TypeScript如何基于同接口属性动态生成联合类型约束参数值

这个需求可以完全在TypeScript类型层面实现，核心是通过泛型捕获传入values的字面量类型，再约束defaultValue必须为数组成员构成的联合类型。

原写法的问题 #

你最初定义的Foo接口中，values标注为string[]、defaultValue标注为string，TypeScript只会将二者识别为通用字符串类型，无法感知传入的具体字面量值，自然无法拦截不在取值范围内的非法传参。

TS 5.0+ 推荐实现 #

使用const类型参数可以自动捕获传入数组的字面量类型，调用方不需要额外加类型标注，就能自动完成校验：

function fooo<const T extends string>({
  values,
  defaultValue,
}: {
  values: readonly T[];
  defaultValue: T;
}) {
  // 内部业务逻辑正常编写即可
}

校验效果 #

• 合法传参正常通过类型检查：

fooo({ values: ['a', 'b'], defaultValue: 'a' }); // 校验通过

• 非法传参直接触发类型报错：

fooo({ values: ['a', 'b'], defaultValue: 'c' });
// 类型错误：类型"c"无法分配给类型"a" | "b"

TS 5.0以下版本兼容写法 #

如果项目使用的TS版本低于5.0，不支持const类型参数，可以去掉泛型前的const修饰符，调用时给values加as const锁定字面量类型即可：

function fooo<T extends string>({
  values,
  defaultValue,
}: {
  values: readonly T[];
  defaultValue: T;
}) {}

// 调用时手动标记as const
fooo({ values: ['a', 'b'] as const, defaultValue: 'a' }); // 校验通过
fooo({ values: ['a', 'b'] as const, defaultValue: 'c' }); // 校验报错

注意点 #

• 类型定义中values需要标注为readonly T[]，因为as const生成的是只读元组类型，仅兼容只读数组定义，如果写为普通T[]会出现类型不匹配问题。
• 泛型添加T extends string约束是为了保证values成员为字符串类型，和你原本的业务类型要求一致。

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