TypeScript中如何限制函数参数为对象的键数组？

问题根源 #

1. 给data添加Record<string, string>类型注解后，TypeScript会丢失具体键（'a'和'b'）的字面量类型信息，只能识别为泛型string键，无法精准限制参数范围。
2. Props定义的是含d属性的对象类型，但调用t(['a'])时传入的是数组，类型完全不匹配。
3. keyof typeof data[]写法错误，你实际需要的是data键组成的数组，正确写法应为(keyof typeof data)[]，原代码括号位置错误，导致取的是数组类型的内置键（如length、push等）。

正确实现代码 #

// 去掉Record<string, string>注解，让TypeScript自动推断具体的键类型
const data = {
    a: '110px',
    b: '160px',
};

// 直接将函数参数类型定义为data键组成的数组
const t = (d: (keyof typeof data)[]) => 'hi' + d;

t(['a']); // 合法
t(['b']); // 合法
t(['c']); // TypeScript报错，符合预期

扩展：支持单个键或数组 #

如果需要函数既接受单个键，也接受键数组，可调整参数类型：

const t = (d: keyof typeof data | (keyof typeof data)[]) => 'hi' + d;

t('a'); // 合法
t(['a', 'b']); // 合法
t('c'); // TypeScript报错

关键说明 #

• 要动态读取data的键并限制参数，必须让TypeScript保留data的具体键字面量类型，因此不能用Record<string, string>这类宽泛注解，让TS自动推断是最灵活的方式。
• 直接使用(keyof typeof data)[]作为参数类型，就能实现“仅允许传入data的键组成的数组”的需求，无需额外定义接口。

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