如何在TypeScript中从指定常量数组生成目标键值映射类型？

先看我们的输入常量数组：

const obj = [
    {
        key: 'fruit',
        value: ['apple', 'banana']
    },
    {
        key: 'meat',
        value: ['pork', 'chicken']
    }
] as const;

目标是生成这样的对象类型：

type T = {
    'fruit': 'apple' | 'banana',
    'meat': 'pork' | 'chicken'
}

可以通过映射类型+索引访问类型组合实现，直接上代码：

方案一：封装成可复用类型 #

// 定义通用转换类型
type ArrayToKeyValObj<T extends readonly { key: string; value: readonly string[] }[]> = {
  [K in T[number]['key']]: Extract<T[number], { key: K }>['value'][number]
};

// 生成目标类型
type T = ArrayToKeyValObj<typeof obj>;

方案二：直接内联写法 #

如果不需要复用，也可以直接写：

type T = {
  [K in typeof obj[number]['key']]: Extract<typeof obj[number], { key: K }>['value'][number]
};

简单解释原理 #

1. typeof obj[number]：把数组转成元素的联合类型，也就是{ key: 'fruit'; value: readonly ['apple', 'banana'] } | { key: 'meat'; value: readonly ['pork', 'chicken'] }
2. [K in typeof obj[number]['key']]：遍历所有key值作为对象的属性名，也就是'fruit' | 'meat'
3. Extract<typeof obj[number], { key: K }>：从联合类型里精准挑出当前key对应的元素类型
4. ['value'][number]：把该元素的value数组转成元素值的联合类型，比如'apple' | 'banana'

这样就能完美得到你想要的类型了。

内容的提问来源于stack exchange，提问作者kkh.name