如何为包含必选字段和未知键的递归对象声明TypeScript类型

报错原因 #

你之前的写法触发TS报错的核心原因是：[key: string | number]: propTypes 这个索引签名约定了所有字符串、数字类型的键对应的值都必须是propTypes类型，但你定义的name、link字段是字符串类型，不符合索引签名的类型要求，因此抛出类型不兼容错误。

解决方案 #

根据你的实际使用场景可以选择以下两种方案：

方案1：子节点仅为数字键（匹配你给出的示例结构） #

如果你的嵌套子节点的键都是数字类型，只需要把索引签名限定为数字类型即可，不会和字符串类型的name、link字段产生冲突：

type PropType = {
  name: string;
  link: string;
  [key: number]: PropType;
};

这个类型完全适配你提供的对象示例，不会产生任何报错。

方案2：子节点支持字符串键 #

如果你的嵌套子节点也可能使用字符串类型的键（不能是name、link这两个保留字段），可以将索引签名的返回值设为联合类型，使用时通过类型守卫收窄类型即可：

type PropType = {
  name: string;
  link: string;
  [key: string]: PropType | string;
};

// 类型守卫，用于收窄字段类型
function isPropType(value: PropType | string): value is PropType {
  return typeof value === 'object' && value !== null && 'name' in value && 'link' in value;
}

// 使用示例
const node = obj['customStringKey'];
if (isPropType(node)) {
  // 此处node被自动推断为PropType类型，可安全访问属性
  console.log(node.name, node.link);
}

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