某一天，一个朋友突然在微信里问我，“['TYPE'] => { 'TYPE': 'TYPE' }，写个函数转换这个，类型怎么加？”。笔者马上的回复就是，“用 reduce 将数组转对象，TS 类型写个泛型即可”。

说是这么说，但是发现在写 TS 类型上实际上却的确不是那么容易，于是，笔者马上偷偷开始尝试。（推荐大家可以在 TypeScript Playground 上练习 TS 类型）

首先转换从数组转换到对象，我们用 reduce 很容易达成目标：

function convert(source) {
  return source.reduce((memo, key) => {
    return { 
      ...memo,
      [key]: key
    }
  }, {});
}

但本文的重点是写这个函数的类型。简而言之，就是需要写 convert 函数参数的类型和返回值类型，从而可以定义函数的形状。

于是，笔者折腾了一会，写出来下述类型，

function convert<K extends string>(source: K[]): Record<K, K>
{
  return source.reduce((memo, key) => {
    return { 
      ...memo,
      [key]: key
    }
  }, {} as any);
}
type TNAME = 'LIN' | 'HUA';

const peoples: TNAME[] = ['LIN', 'HUA'];
const peopleMap = convert<TNAME>(peoples);
function getNameFromPeopleMap<T extends any>(name: T): T {
  return peopleMap[name];
}

const t = getNameFromPeopleMap('HUA');

新增一个 getNameFromPeopleMap 函数，编写泛型 (name: T): T。从而达成了以下效果：

发给朋友，但是马上被吐槽了，首先 LIN、HUA 两个值就在代码上被重复了两次，TNAME 类型略显冗余。其次，上述类型只是定义了函数传参值和返回值相同，并没有达到预期中约束传参值的效果。

所以传入任意值，编辑器都不会提示类型错误。

因此，上述类型如果打个分，连及格线都不达。于是，进行考虑优化。为了解决上述两个问题，一段时间后，新的类型火热出炉！

function convert<K extends string>(source: readonly K[]): Record<K, K>
{
  return source.reduce((memo, key) => {
    return { 
      ...memo,
      [key]: key
    }
  }, {} as any);
}

const peoples = ['LIN', 'HUA'] as const;
const peopleMap = convert<typeof peoples[number]>(peoples);
function getNameFromPeopleMap<T extends typeof peoples[number]>(name: T): T {
  return peopleMap[name] as any;
}

const t = getNameFromPeopleMap('LIN');

为了减少冗余的 TNAME。使用了 TypeScript 3.4 版本新增的 const 断言。它可以将我们一个字面量表达式断言为一个 TS 类型。如下：

// Type '"HELLO"'
const STR = "HELLO" as const;

// Type 'readonly [10, 20]'
const POINT = [10, 20] as const;

// Type '{ readonly text: "hello" }'
const PAYLOAD = { text: "hello" } as const;

因此，无需 TNAME[]，我们的 peoples 拥有了 TS 类型。

同时，修改 getNameFromPeopleMap 的函数泛型声明为 <T extends typeof peoples[number]>(name: T): T。我们即可约束函数传入值只能为 peoples 的子项。

可能有些同学比较困惑，上述泛型是什么意思。笔者这里稍微解释一下。

其实 typeof peoples[number] 真正可以理解为，先执行 typeof peoples，即可得出 readonly ["LIN", "HUA"] 类型。然后 [number] 可以理解为，从 readonly ["LIN", "HUA"] 中使用 number 类型作为 key 将类型转换为字符串字面量类型 "LIN" | "HUA"。

那么 T extends 即代表着进行泛型约束。因此我们就可以成功对函数传参进行类型限制。

瞧一瞧，多么成功。当我自信的把这段代码发给朋友时，又遭到了无情吐槽，“我想要的是 peopleMap 直接使用”

的确，笔者反思了一下，为什么需要莫名其妙多一个函数去取值呢？还不是因为无法从 convert 函数上完成传参值和返回值的相等的类型限制嘛。

嗯，如果能从 convert 函数上直接支持就好了。

于是笔者将目光挪到了可疑的 convert 函数类型 (source: readonly K[]): Record<K, K> 上。首先从 Record<K, K> 上看，已经无法约束类型了。按照需求，返回值应该是 key 与 value 相等的对象类型。怎么写呢？笔者查阅了 TS 文档后，得出一种写法：

type IRecord<K extends keyof any> = {
  [P in K]: P;
}

可能大家好奇 keyof any 是什么？其实它刚刚好就是对象的 key 类型。因为 TS 限制对象 key 类型只能为 string、number、symbol。

使用效果如下:

因此最终可以干掉之前多余的函数，得出如下类型：

type IRecord<K extends keyof any> = {
  [P in K]: P;
}

function convert<K extends string>(source: readonly K[]): IRecord<K>
{
  return source.reduce((memo, key) => {
    return { 
      ...memo,
      [key]: key
    }
  }, {} as any);
}

const peoples = ['LIN', 'HUA'] as const;
const peopleMap = convert<typeof peoples[number]>(peoples);
const t = peopleMap.LIN;

同时也达到了对 peopleMap 的取值类型限制。

将代码发给了朋友，终于得到了满意。但是他还是希望可以简化一下。

好叭，那简化一下！

function convert<K extends keyof any>(source: readonly K[]): { [P in K]: P }
{
  return source.reduce((memo, key) => {
    return { 
      ...memo,
      [key]: key
    }
  }, {} as any);
}

const peoples = ['LIN', 'HUA'] as const;
const peopleMap = convert(peoples);
const t = peopleMap.LIN;

简简单单的一个 TS 类型的需求，发现编写起来还是挺有意思的。第一，作为笔记；第二，也希望可以帮助到有需要的同学们。

谢谢大家~如有助益，不胜荣幸！