TypeScript从0基础到项目实战:05. Type(类型别名)

104 阅读1分钟

接口类型的一个作用是将内联类型抽离出来,从而实现类型可复用。其实,我们也可以使用类型别名接收抽离出来的内联类型实现复用。格式:type 别名名称 = 类型定义。

1. 基础使用

 type PersonInfo = { name: string; age: number };
 let zs: PersonInfo = {
   name: "张三",
   age: 20,
 };

type跟interface差不多,都可以自定义类型,但是type不能重名

2. 特定使用场景

大家可能觉得这个和接口没多大区别,这不是重复了吗?其实不是,类型别名可以针对接口没法覆盖的场景,例如组合类型、交叉类型等;

 // 1. 组合类型
 type NumAndString = number | string;
 // 2. 交叉类型
 type SectionType = { name: string; age: number } & {
   height: number;
   name: string;
 };
 
 interface PersonInfo {
   name: string;
   height: number;
 }
 // 3. 我们可以这样子拿接口定义的类型
 type PersonHeight = PersonInfo["height"];//这里拿了PersonInfo接口中的height类型
 
 let zs: SectionType = {
   name: "张三",
   age: 20,
   height: 180,
 };
 
 // 黑魔法
 type BorderColor = 'black' | 'red' | 'green' | 'yellow' | 'blue' | string & {}; // vscode提示字面类型都被保留

3. Interface 与 Type 的区别

实际上,在大多数的情况下使用接口类型和类型别名的效果等价,但是在某些特定的场景下这两者还是存在很大区别。

  1. 重复定义的接口类型,它的属性会叠加,这个特性使得我们可以极其方便地对全局变量、第三方库的类型做扩展
  2. 如果我们重复定义类型别名,那么就会报错