Typescript （四）进阶

字符串字面量类型

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'

元组

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。

let xcatliu: [string, number] = ['Xcat Liu', 25];

let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';
xcatliu[1] = 25;
xcatliu[0].slice(1);
xcatliu[1].toFixed(2);

当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项

let xcatliu: [string, number];
xcatliu = ['Xcat Liu', 25];                //true
let xcatliu: [string, number] = ['Xcat Liu'];       //false

枚举

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等

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

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射

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

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

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

我们也可以给枚举项手动赋值

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

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

console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true

未手动赋值的枚举项会接着上一个枚举项递增
如果未手动赋值的枚举项与手动赋值的重复了，TypeScript 是不会察觉到这一点的

enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};//可以是小数

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1.5); // true
console.log(Days["Tue"] === 2.5); // true
console.log(Days["Sat"] === 6.5); // true

enum Color {red = '红', yellow = '黄', blue = '蓝', green = '绿', purple = '紫'};
// 然后定义一个变量, 指明这个变量只能存储Color里面的东西
let color: Color = Color.red;

color = Color.yellow;          // 正常
color = '白';                  // 报错
color = '黑';                  // 报错
color = '紫';                  // 报错, 必须用Color给其

类

TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private 和 protected。
 public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
 private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
 protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
}