TypeScript如何动态获取数组元素key属性类型并约束变量取值

要实现动态提取数组元素key属性联合类型、约束变量取值范围的需求，按以下步骤操作即可：

• 首先给目标数组添加as const常量断言，阻止TypeScript将字面量值拓宽为通用的string类型，保留每个key的精确字面量类型信息
• 再通过类型索引语法，依次获取数组的元素类型、元素的key属性类型，即可得到目标联合类型

完整实现代码 #

const arr = [
  { key: 'a' },
  { key: 'b' },
  { key: 'c' },
] as const;

// 推导得到的Key类型为 'a' | 'b' | 'c'
type Key = typeof arr[number]['key'];

// 变量取值约束验证
const validKey: Key = 'a'; // 合法，属于联合类型成员
const invalidKey: Key = 'd'; // 类型报错，'d'不在合法取值范围内

语法逻辑说明 #

• typeof arr：先获取常量arr对应的TypeScript类型，加了as const后这里得到的是只读元组类型，每个元素的key值都是精确的字面量
• [number]：用数字类型作为索引访问数组类型，会自动遍历数组所有位置的元素，返回所有元素类型组成的联合类型，此处得到的结果是{ readonly key: "a" } | { readonly key: "b" } | { readonly key: "c" }
• ['key']：访问上述元素联合类型的key属性，自动合并所有元素key的字面量类型，最终得到目标联合类型"a" | "b" | "c"

注意：如果省略as const断言，TypeScript会默认将arr推导为宽泛的{ key: string }[]类型，最终提取出的Key类型会是通用的string，无法实现精确的取值约束。

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