React TypeScript类型错误求助：'User'无法赋值给'never'等问题

1. 解决[...users, user]的never类型错误 #

初始化users状态时未指定类型，TypeScript默认推断为never[]，导致无法添加User类型元素。给useState显式指定User[]类型即可：

import { useState } from 'react';
import UserList from './UserList';

type User = {
  name: string;
  email: string;
};

function App() {
  // 显式指定状态类型为User数组
  const [users, setUsers] = useState<User[]>([]);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleAddUser = () => {
    const newUser: User = { name, email };
    // 现在可以正常添加User到数组中
    setUsers([...users, newUser]);
    setName('');
    setEmail('');
  };

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="姓名"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="邮箱"
      />
      <button onClick={handleAddUser}>添加用户</button>
      <UserList users={users} />
    </div>
  );
}

export default App;

2. 修复UserList组件的props类型错误 #

组件接收的是包含users数组的props，而非单个User对象，所以需要定义对应的props类型：

type User = {
  name: string;
  email: string;
};

// 定义组件props的类型
type UserListProps = {
  users: User[];
};

const UserList = ({ users }: UserListProps) => {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>
          姓名: {user.name}, 邮箱: {user.email}
        </li>
      ))}
    </ul>
  );
};

export default UserList;

3. 修复传递props时的类型不匹配 #

这个错误是前一个问题的连锁反应，当UserList的props类型正确定义为UserListProps后，传递users={users}时类型会自动匹配，无需额外修改。

内容的提问来源于stack exchange，提问作者lomine