TypeScript实现带类型推断的动态键值数组项添加函数

问题根源 #

你当前的代码里，key是keyof Stuff联合类型（"cars" | "books"），Stuff[typeof key]会被推断为Car[] | Book[]，对应的item类型就是Car | Book。TypeScript无法确定key和item的具体关联——比如当key是"cars"时，item可能是Book，所以会要求item必须同时满足Car和Book的结构，导致报错。

正确实现方案 #

使用泛型来绑定key和item的类型关系，让TypeScript能根据传入的key自动推断item的正确类型，同时支持键的自动补全：

const addToStuff = <K extends keyof Stuff>({ key, item }: {
  key: K;
  item: Stuff[K][number];
}) => {
  stuff[key].push(item);
};

调用示例 #

此时调用函数时，TypeScript会自动根据key推断item的类型，且key会有自动补全：

// 正确：key为"cars"时，item必须是Car类型
addToStuff({ key: "cars", item: { make: "Ford", model: "F-150", year: 2024 } });

// 正确：key为"books"时，item必须是Book类型
addToStuff({ key: "books", item: { title: "Pale Blue Dot", author: "Carl Sagan" } });

// 错误：类型不匹配，TS会报错
addToStuff({ key: "cars", item: { title: "Wrong Type", author: "Someone" } });

原理说明 #

• 泛型K extends keyof Stuff约束key只能是Stuff的键之一；
• item: Stuff[K][number]表示：当key是K时，item的类型是Stuff[K]（对应数组）的元素类型，完美关联了key和item的类型；
• TypeScript会在调用时根据传入的key值，自动推断出K的具体类型，从而确定item的类型要求，同时提供键的自动补全。

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