TypeScript 如何定义允许传入额外自定义属性的接口？

最优实现方案 #

有两种常用的类型定义方案可以完全替代any，同时满足「必填属性校验+允许自定义额外字段」的需求：

方案1：索引签名扩展（简单通用） #

在基础属性接口中增加索引签名，即可在保留id、name必填校验的同时，允许任意自定义字段：

interface OptionProp {
  id: number;
  name: string;
  // 字符串索引签名，支持任意额外属性，value类型可根据需求调整
  // 用unknown比any更安全，需要使用额外属性时可配合类型守卫做类型收窄
  [key: string]: unknown;
}

// 主组件接口无需再写any
interface TypeComponent {
  options: OptionProp[];
}

如果你的业务场景不需要对额外属性做严格校验，直接把unknown替换为any也可以，相比原来的写法依然能保障必填字段的类型校验。

方案2：泛型扩展（更严谨，支持自定义额外属性类型） #

如果需要给组件使用者提供更强的类型支持，允许自定义额外属性的类型约束，可以用泛型实现：

// 泛型T用于接收使用者传入的额外属性类型，默认无额外属性
interface OptionProp<T extends Record<string, unknown> = Record<string, never>> {
  id: number;
  name: string;
} & T

// 主组件接口也同步支持泛型
interface TypeComponent<T extends Record<string, unknown> = Record<string, never>> {
  options: OptionProp<T>[];
}

使用时使用者可以自行传入额外属性的类型：

// 使用者自定义额外属性类型
interface CustomExtraProps {
  disabled: boolean;
  icon: string;
}

// 组件使用时传入泛型，即可获得所有属性的类型提示
const customComponent: TypeComponent<CustomExtraProps> = () => {
  // 内部访问options元素的id、name、disabled、icon都会有正确的类型提示
}

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