如何通过TypeScript确保组件值属于指定数组选项？

要让TypeScript在编译阶段就校验count必须是options中的合法选项，核心思路是通过泛型捕获options的具体元素类型，再约束count属于该类型的成员。

实现代码示例 #

// 定义Props，泛型T代表options的具体数组类型
interface Props<T extends readonly number[]> {
  count: T[number]; // count必须是options数组元素的联合类型
  options: T;
}

const Component = <T extends readonly number[]>({ count, options }: Props<T>) => {
  // 组件业务逻辑
};

// 错误示例：count=5不在options[1,2,3]中，编译阶段报错
Component({ count: 5, options: [1, 2, 3] as const });

// 正确示例：count=2是options的合法选项，编译通过
Component({ count: 2, options: [1, 2, 3] as const });

关键说明 #

1. 泛型约束：通过T extends readonly number[]让TypeScript捕获options的具体字面量数组类型（比如readonly [1,2,3]），而非宽泛的number[]。
2. 类型关联：T[number]会提取数组元素的联合类型（比如1|2|3），以此约束count必须是该联合类型的成员。
3. as const的作用：强制TypeScript将数组推断为只读的字面量数组，保留具体的元素值类型，否则数组会被推断为number[]，无法实现精确校验。

简化写法（无需单独定义Props） #

如果不想单独定义Props接口，也可以直接在组件函数中写泛型约束：

const Component = <T extends readonly number[]>({ count, options }: { count: T[number]; options: T }) => {
  // 组件逻辑
};

// 同样的校验效果
Component({ count: 5, options: [1,2,3] as const }); // 报错
Component({ count: 2, options: [1,2,3] as const }); // 通过

原代码问题分析 #

你之前的代码中，Array<N | number>仅表示options可以包含N类型或number类型的元素，但没有建立N与options实际元素的关联，因此TypeScript无法检测到count不在options中的错误。

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