TypeScript如何从JavaScript Map中获取联合类型？

要从现有Map的键生成字面量联合类型，关键是让TypeScript保留键的字面量类型（默认情况下Map构造函数会把键推断为string），具体步骤如下：

• 先将Map的初始化键值对数组用as const断言，强制TS保留每个键的字面量类型，而非宽泛的string
• 通过类型提取语法从这个数组类型中获取键的联合类型

修改后的完整代码 #

// 抽离键值对数组并添加as const断言，保留字面量类型
const mapEntries = [
  ['one', <IconOne/>],
  ['two', <IconTwo/>],
  ['three', <IconThree/>],
] as const;

// 用处理后的数组初始化Map
const myMap = new Map(mapEntries);

// 自动提取键的联合类型
type MapKey = typeof mapEntries[number][0]; // 得到 'one' | 'two' | 'three'

type Props = {
  name: MapKey; // 直接使用自动生成的联合类型
}

export const Component = ({name}: Props) => (
   <div>
    {myMap.get(name)}
   </div>
) 

原理说明 #

• as const会让TypeScript将数组中的每个元素推断为只读字面量类型，避免把键自动拓宽为string
• typeof mapEntries[number]获取数组中所有键值对的类型，再取[0]就得到了所有键的字面量，自动组合成联合类型

注意事项 #

如果完全无法修改Map的初始化代码（包括不能添加as const），TypeScript已经将Map的键类型推断为string，此时无法从typeof myMap还原出具体的字面量联合类型，只能手动声明联合类型。

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