TS03 TypeScript进阶

类型别名

概念

可以使用type关键字来创建一个类型的别名：

type num = number;
const a:num = 123;

类型别名常用于联合类型，例如字符串字面量类型，用来约束取值只能是几个字符串的一个

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
  // do something
}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dbclick'); // 报错，event 不能为 'dbclick'

// index.ts(7,47): error TS2345: Argument of type '"dbclick"' is not assignable to parameter of type 'EventNames'.

与interface的异同

二者的共同点是：

（1）都可以描述对象或者函数

（2）都允许扩展（extends）

type Name = { 
  name: string; 
}
type User = Name & { age: number  };

type的扩展使用了&

二者的不同点是：

（1）type可以声明基本类型的别名，interface不可以

（2）type语句可以使用typeof获取实例的类型赋值

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div

（3）interface能够声明合并，而type不同

interface User {
  name: string
  age: number
}

interface User {
  sex: string
}

/*
User 接口为 {
  name: string
  age: number
  sex: string 
}
*/

元组

元组（Tuple）就是包含不同类型元素的数组：

const person: [string, number] = ['Tom', 24];
person[0] = 'Jerry';

person[0] = 1;
// Error:(12, 1) TS2322: Type '1' is not assignable to type 'string'.

可以赋值其中一项，但是如果对元组整体进行定义或者赋值的时候，必须提供所有元组类型中指定的项目：

let person1: [string, number];
tom[0] = 'Tom';

let person2: [string, number];
person2 = ['Tom'];
// Property '1' is missing in type '[string]' but required in type '[string, number]'.

当添加元组规定的类型数量之外的元素时，元素的类型会被限定为元组包含类型的联合类型：

const person: [string, number] = ['tom', 24];

person.push('ok');
person.push(true);
// Error:(11, 13) TS2345: Argument of type 'true' is not assignable to parameter of type 'string | number'.

枚举

定义枚举值

枚举类型用于取值被限定在一定范围的场景

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}

const sun = Days.Sun;
const sat = Days.Sat;

枚举成员会被赋值为从0开始递增的数字，同时也会对枚举值到枚举名进行反向映射，上面的编译结果是：

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

var sun = Days.Sun;
var sat = Days.Sat;

手动赋值

可以为枚举项手动赋值：

enum Days {Sun = 'test', Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 'test'); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

未手动赋值的枚举项会接着上一个枚举项递增，要注意的是，如果未手动赋值的枚举项和手动赋值的枚举项重复了，TypeScript是不会报错的。

计算所得项

枚举项有两种类型，常数项和计算所得项，上面的列子都是常数项，计算所得项如下：

enum Color {Red, Green, Blue