迹忆客 专注技术分享

要在 React 中将 useState 钩子键入为对象数组，请使用钩子的泛型，例如 const [employees, setEmployees] = useState<{salary: number; name: string}[]>([])。 状态变量可以初始化为一个空数组，并且只接受指定类型的对象。

import {useState} from 'react';

const App = () => {
  // 👇️ const employees: {salary: number;name: string;}[]
  const [employees, setEmployees] = useState<{salary: number; name: string}[]>(
    [],
  );

  return (
    <div>
      <button
        onClick={() =>
          setEmployees(prevEmployees => [
            ...prevEmployees,
            {salary: 100, name: 'Bob'},
          ])
        }
      >
        Add employee
      </button>

      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <h2>
              salary: {employee.salary} / name: {employee.name}
            </h2>
          </div>
        );
      })}
    </div>
  );
};

我们使用泛型来正确键入 useState 挂钩，同时使用空数组初始化钩子。

如果我们没有使用泛型，例如 useState<{salary: number; name: string}[]>([]) 当输入 hook 时，状态变量的类型将是 never[]，换句话说，一个永远不会包含任何元素的数组。

如果对 useState 钩子的调用变得繁忙，我们还可以使用类型别名或接口。

import {useState} from 'react';

type Employee = {
  salary: number;
  name: string;
};

const App = () => {
  // 👇️ const employees: Employee[]
  const [employees, setEmployees] = useState<Employee[]>([]);

  return (
    <div>
      <button
        onClick={() =>
          setEmployees(prevEmployees => [
            ...prevEmployees,
            {salary: 100, name: 'Bob'},
          ])
        }
      >
        Add employee
      </button>

      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <h2>
              salary: {employee.salary} / name: {employee.name}
            </h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

我们将对象类型提取到类型别名中，并将其用作 Employee[] 以键入 useState 钩子。

如果我们尝试向状态数组添加不同类型的值，我们会得到类型检查错误。

import {useState} from 'react';

type Employee = {
  salary: number;
  name: string;
};

const App = () => {
  // 👇️ const employees: Employee[]
  const [employees, setEmployees] = useState<Employee[]>([]);

  // ⛔️ Argument of type '(prevEmployees: Employee[]) => (string | Employee)[]' is not assignable to parameter of type 'SetStateAction<Employee[]>'.
  setEmployees(prevEmployees => [...prevEmployees, 'Hello world']);

  return (
    <div>
      <button
        onClick={() =>
          setEmployees(prevEmployees => [
            ...prevEmployees,
            {salary: 100, name: 'Bob'},
          ])
        }
      >
        Add employee
      </button>

      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <h2>
              salary: {employee.salary} / name: {employee.name}
            </h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

该示例显示尝试将字符串添加到类型为 Employee[] 的状态数组如何导致类型检查器出错。