如何从对象数组中提取所有id值作为TypeScript类型？

问题描述 #

我有如下对象数组：

var myObj = [{ id: 'a', value: 1}, { id: 'b', value: 2 }, { id: 'c', value: 3}]

希望定义一个仅能传入该数组中id可能值的函数：

function abc(id: 'a' | 'b' | 'c') { /* */ }

尝试了以下代码但未得到预期结果：

var myObj = [{ id: 'a', value: 1}, { id: 'b', value: 2 }, { id: 'c', value: 3}]

type OJ = typeof myObj;
type id = keyof OJ[number]['id'];

得到的类型是字符串的所有内置方法和属性的联合类型：

type id = number | typeof Symbol.iterator | "toString" | "charAt" | "charCodeAt" | "concat" | "indexOf" | "lastIndexOf" | "localeCompare" | "match" | "replace" | "search" | "slice" | ... 30 more ... | "padEnd"

请问如何正确提取id值作为类型？

解决方法 #

问题根源在于两点：

• 默认情况下TypeScript会把数组中对象的id属性推断为宽泛的string类型，而非具体的字面量值；
• keyof OJ[number]['id']实际取的是string类型的所有键（即字符串的内置方法和属性），并非我们需要的id值。

正确实现步骤：

1. 使用as const断言让TypeScript保留数组中id的具体字面量类型；
2. 通过typeof myObj[number]['id']直接提取所有id值的联合类型。

完整代码示例：

const myObj = [{ id: 'a', value: 1}, { id: 'b', value: 2 }, { id: 'c', value: 3}] as const;

// 得到目标类型：'a' | 'b' | 'c'
type IdType = typeof myObj[number]['id'];

function abc(id: IdType) {
  // 函数逻辑
}

abc('a'); // 合法，无类型错误
abc('d'); // 类型报错，符合预期

补充说明 #

as const会将数组和对象的所有属性标记为只读字面量类型，阻止TypeScript把具体的字符串值自动拓宽为string类型，这样就能准确提取出所有id的可能值组成联合类型。

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