Typescript - 类型操作符&索引访问类型

2022-08-07 本文已影响0人前端C罗

Typescript提供一些非常有用的类型操作符，如keyof/typeof，在日常开发中灵活应用这些函数利于编写更为健壮的代码。

keyof 操作符

⚠️ keyof只能作用于类型。

当keyof后面跟的是对象类型，则其结果为该对象类型的属性组成的union类型。以下面的代码为例：

type Point = { x: number; y: number };
type P = keyof Point;
// P = 'x' | 'y';

上面代码中，P的实际类型为 'x' | 'y'。

如果keyof后的类型包含字符串或数字的索引签名，则其返回索引本身的类型。

示例1

type ArrayLike = { [k: number]: unknown };
type Key = keyof ArrayLike;

类型Key实际为number。

示例2

type MapLike = { [k: string]: unknown };
type Key = keyof MapLike;

类型Key实际为number | string。

⚠️ 这里的Key为number和string的联合类型，其原因是在javascript中对象的key会被自动转为字符串类型。obj[0]等价于obj['0']。

typeof 操作符

⚠️ typeof通常作用于标识符(identifier-变量的名字，可以是标识符自身或标识符的属性（变量对应的值是对象的场景下）。

例如 type M = typeof 'cluo'，此时类型校验系统会报错。

typeof必需作用于identifier

正确的用法应该为

let name = 'cluo';
type M = typeof name;

M的类型为string。

索引访问类型（Indexed Access Types）

类型是一类特殊的存在，虽然不能直接参与代码中的运算，但类型本身是可以通过一些运算生成其他类型。其中，通过索引获取相应的类型就是一类。
如下代码：

type Person = { age: number; name: string; alive: boolean };
type Age = Person["age"];

通过获取Person的age属性，获取其类型并赋值给Age。这种获取类型的方法就是通过索引获取相应的类型。非常类似于对象的属性值获取。但与对象属性获取不同的是，类型索引本身也是类型。
这句话不是那么容易理解，可以通过下面的代码及其对应的截图来对比：

使用值获取属性类型

使用值作为索引类型

使用类型获取属性类型

使用类型作为索引

相应的代码：

type age = 'age';
type Person = { age: number; name: string; alive: boolean };
type AgeType = Person[age];

单个字符串的书写可能会让读者困惑，那么使用字符串联合类型的写法更为清晰。如下所示：

type Person = { age: number; name: string; alive: boolean };
type AgeAndName = Person['age' | 'name'];

可以看到索引为 'age' | 'name'，这是一个字符串联合类型。
相应的，既然索引是类型，那通过类型操作符获得的类型也可以作为索引，继续改造上述的代码，获取Person所有的属性类型联合，则相应的代码如下：

type Person = { age: number; name: string; alive: boolean };
type AllPropType = Person[keyof Person];

此时AllPropType为'number' | 'string' | 'boolean'，也就是将所有属性的类型取出来联合运算。

应用

上面介绍了3种获取类型的方法，它们在实际开发中有着相当强大的作用。比如例举下面的几种场景，看看如何使用上面的类型操作符化腐朽为神奇。

已知const RGB = ['red', 'green', 'blue']，如何将变量类型限制为RGB数组中的项？
已知const RGB = { R: 'red', G: 'green', B: 'blue', };，如何将变量类型限制RGB对象的属性值域？

其实上面2个场景的问题是类似的，根据已有的标识符获取目标类型，很容易想到使用typeof类型操作符。

一，数组场景

目标类型：'red' | 'green' | 'blue'

对RGB执行typeof

const RGB = ['red', 'green', 'blue'];
type T = typeof RGB[number];

类型T为 string，这显然与预期的类型是不一致的。目标类型为字符串常量的联合，而typeof如果要生成常量类型那么操作符后面的也必须是常量，否则只能获取变量的类型。举个🌰：

let r = 'red';
type TypeOfR = typeof r;

对let定义的变量做typeof得到的是类型string，如图：

变量类型获取

但如果使用const定义，其他不变，得到的类型就是常量'red'，如图：

常量类型获取

将RGB的项常量化

const RGB = ['red', 'green', 'blue'] as const;
type T = typeof RGB[number];

通过上面的修改，T的类型就变成'red' | 'green' | 'blue'，跟预期一致。

二，对象场景

对象场景和数组场景解决方案一样，只是在获取索引类型时稍有区别，具体可以参看前文的索引类型章节，相应的代码如下：

const RGB = {
  R: 'red',
  G: 'green',
  B: 'blue',
} as const;
type TypeOfRGB = typeof RGB;
type KeyOfRGB = keyof TypeOfRGB;
export type T = TypeOfRGB[KeyOfRGB];

对象场景下，搭配keyof类型操作符用以获取属性的联合类型，本质上依然是获取索引类型。

小结：

本文介绍typescript的3种类型获取的方法，包括类型操作符keyof/typeof和索引类型获取，并通过两个实际的案例介绍如何灵活使用这几种方案获取相应的类型。