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'
,此时类型校验系统会报错。
正确的用法应该为
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
和索引类型获取
,并通过两个实际的案例
介绍如何灵活使用这几种方案获取相应的类型。