如何在React TypeScript中定义状态使用的特定对象结构？

你的问题出在对TypeScript接口索引的理解偏差：你写的number: [{...}]是给对象定义了名为"number"的字符串属性，而非允许用数字类型作为键。要实现数字键对应数组的结构，有两种常用的正确写法：

方式一：用索引签名定义接口 #

先单独定义数组元素的类型，再通过数字索引签名声明对象结构：

// 定义数组中单个项的类型
interface ListItem {
  foo: string;
  bar: string;
}

// 声明对象允许数字作为键，对应值为ListItem数组
interface NumberKeyedObject {
  [key: number]: ListItem[];
}

// 初始化React状态
const [data, setData] = useState<NumberKeyedObject>({});

方式二：用Record工具类型（更简洁） #

利用TypeScript内置的Record工具类型，快速定义键值对结构：

type ListItem = {
  foo: string;
  bar: string;
};

// Record<键类型, 值类型>
type NumberKeyedObject = Record<number, ListItem[]>;

// 初始化状态
const [data, setData] = useState<NumberKeyedObject>({});

使用示例 #

现在可以正常用数字动态键访问或修改状态：

// 动态键示例
const dynamicKey = 2;

// 读取数据（空数组兜底）
const items = data[dynamicKey] || [];

// 更新数据（向指定键的数组添加新项）
setData(prev => ({
  ...prev,
  [dynamicKey]: [...(prev[dynamicKey] || []), { foo: "新内容", bar: "新描述" }]
}));

内容的提问来源于stack exchange，提问作者four-eyes