如何为React useState中的嵌套数组正确定义TypeScript类型

你代码里共有3处导致类型报错的问题：

• 类型声明位置错误：React.useState的泛型才是用来指定state值类型的，你直接给返回的[state, setState]元组标注SettingsProps类型，属于类型不匹配，元组的类型和单个state值的类型完全不同。
• 属性名不匹配：你定义的ToyProps接口里车辆字段是car，但初始化对象里写的是cars，多了一个s，属于属性名拼写错误。
• 字段类型不匹配：ToyProps里doll字段定义的是number | null类型，但你初始化时传入的是字符串类型的值，类型不符合要求。

如果你要保持原有ToyProps的类型定义不变，调整初始化值即可：

interface ToyProps {
  car: string | null;
  doll: number | null;
}

interface SettingsProps {
  [key: string]: ToyProps[];
}

// 把类型传给useState的泛型参数
const [state, setState] = React.useState<SettingsProps>({
  toys: [
    {
      // 修正属性名cars为car
      car: "car 1",
      // 修正doll的值为数字类型
      doll: 1,
    },
    {
      car: "car 2",
      doll: 3,
    },
  ],
});

如果你的业务需求里doll本身就是字符串类型，只需要修改ToyProps的字段定义即可：

interface ToyProps {
  car: string | null;
  // 修改doll的类型为string | null
  doll: string | null;
}

补充说明：如果你的SettingsProps确定只有toys这一个key，建议把索引签名改成明确的toys: ToyProps[]，类型检查会更严格，避免后续写错key。

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