TS动态获取已知对象的属性 - 断言，联合类型

背景介绍

在 ts 中我们经常会有如下的写法：

function func(req, res) {
  const obj = {
    a: 1,
    b: 2,
    c: 3,
  };
  let id = obj[req.params.id];
  // ...
}

当我们想获取某个对象中的某个属性，而这个属性名又是通过外部参数传入时，就会使用[]的方式获取对象的属性，然而这种方法在 ts 中会无法通过类型校验。

报错的大概意思就是：从外部获取的 id 字段为 string 类型，而 obj 对象只有 a,b,c 三个属性，id 有可能无法对应到这三个属性上，就会导致后续的类型推断失败。TS 无法正确进行推断就会报错。

解决办法

利用 ts 的断言和联合类型就可以解决。我们将上面的代码进行修改：

function func(req, res) {
  const obj = {
    a: 1,
    b: 2,
    c: 3,
  };
  let id = obj[req.params.id as "a" | "b" | "c"];
  // ...
}

as 的作用是告诉 ts 进一步缩小 id 的类型范围仅限后面定义的类型。

而’a’ | ‘b’ | ‘c’表示的是联合类型，这种类型的值可以使列举出来的类型里面的任意一个。

两个特性一起使用，可以将[]中的变量类型范围限制在 a,b,c 其中的一个，就能保证获取到对应的属性。