TypeScript简介
什么是TypeScript？
TypeScript 是添加了类型系统的 JavaScript。
TypeScript 是一门静态类型、弱类型的语言。
类型系统
类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型。
动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。
JavaScript 是一门解释型语言，没有编译阶段，所以它是动态类型。以下这段代码在运行时才会报错：
let foo = 1;
foo.split(' ');
// Uncaught TypeError: foo.split is not a function
// 运行时会报错（foo.split 不是一个函数），造成线上 bug
TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以TypeScript 是静态类型，这段 TypeScript 代码在编译阶段就会报错了：
let foo = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错（数字没有 split 方法），无法通过编译
类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型。
TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，所以它们都是弱类型。以下代码运行时数字1会被隐式类型转换为字符串'1'，加号+被识别为字符串拼接，所以打印出结果是字符串'11'。
console.log(1 + '1');
// 打印出字符串 '11'
为什么用TypeScript？
JavaScript 是一门非常灵活的编程语言，没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。这种灵活性一方面学习使用起来非常简单方便，另一方面使得它的代码质量参次不起，维护成本高，运行时错误多。TypeScript 的类型系统，在很大程度上弥补了 JavaScript 的缺点。
TypeScript基础
原始数据类型
JavaScript 的类型分为两种：原始数据类型和对象类型。
原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 BigInt。常用前面5种，对应在 TypeScript 中的写法分别是：
let isDone: boolean = false;
let decLiteral: number = 6;
let myName: string = 'Tom';
let u: undefined = undefined;
let n: null = null;
JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数：
function alertName(): void {
alert('My name is Tom');
}
任意值
任意值（Any）用来表示允许赋值为任意类型。
如果是一个普通类型，在赋值过程中改变类型是不被允许的：
let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
但如果是any类型，则允许被赋值为任意类型。
let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
在任意值上访问任何属性都是允许的：
let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);
也允许调用任何方法：
let anyThing: any = 'Tom';
anyThing.setName('Jerry');
anyThing.setName('Jerry').sayHello();
anyThing.myName.setFirstName('Cat');
可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。
变量如果在声明的时候，未指定其类型且没有赋值，那么它会被识别为any类型：
let something;
等价于
let something: any;
类型推论
TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。
let myFavoriteNumber = 'seven';
等价于
let myFavoriteNumber: string = 'seven';
联合类型
联合类型（Union Types）表示取值可以为多种类型中的一种，使用 | 分隔每个类型。
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：
function getLength(something: string | number): number {
return something.length;
}
// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.
上例中，length不是string和number的共有属性，所以会报错。
访问string和number的共有属性是没问题的：
function getString(something: string | number): string {
return something.toString();
}
对象的类型——接口
在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。
TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。
interface Person {
name: string;
age: number;
}
let tom: Person = {
name: 'Tom',
age: 25
};
上面的例子中，我们定义了一个接口Person，接着定义了一个变量tom，它的类型是Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。
接口一般首字母大写。
上例中定义的变量比接口增加或减少属性都是不允许的。赋值的时候，变量的形状必须和接口的形状保持一致。
有时我们希望不要完全匹配一个形状，那么可以用可选属性，在定义的接口里的属性名字后面添加?将其变为可选属性：
interface Person {
name: string;
age?: number;
}
let tom: Person = {
name: 'Tom'
};
这时仍然不允许添加未定义的属性，有时候我们希望一个接口允许有任意的属性，可以使用如下方式：
interface Person {
name: string;
age?: number;
[propName: string]: any;
}
let tom: Person = {
name: 'Tom',
gender: 'male'
};
使用[propName: string]定义了任意属性取string类型的值。
一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：
interface Person {
name: string;
age?: number;
[propName: string]: string;
}
// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：
interface Person {
name: string;
age?: number;
[propName: string]: string | number;
}
数组的类型
类型 + 方括号」表示法
let fibonacci: number[] = [1, 1, 2, 3, 5];
数组泛型
let fibonacci: Array<number> = [1, 1, 2, 3, 5];
用接口表示数组（一般不用）
interface NumberArray {
[index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
any 在数组中的应用
一个比较常见的做法是，用any表示数组中允许出现任意类型：
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];
函数的类型
在 JavaScript 中，有两种常见的定义函数的方式——函数声明和函数表达式。
// 函数声明（Function Declaration）
function sum(x, y) {
return x + y;
}
// 函数表达式（Function Expression）
let mySum = function (x, y) {
return x + y;
};
一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到。
输入多余的（或者少于要求的）参数，是不被允许的。
函数声明
function sum(x: number, y: number): number {
return x + y;
}
函数表达式
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
return x + y;
};
用接口定义函数的形状
interface SumFunc {
(x: number, y: number): number;
}
let mySum: SumFunc = function (x: number, y: number): number {
return x + y;
}
可选参数
前面提到，输入多余的（或者少于要求的）参数，是不允许的。那么如何定义可选的参数呢？
与接口中的可选属性类似，我们用?表示可选的参数,可选参数后面不允许再出现必需参数：
function buildName(firstName: string, lastName?: string) {
if (lastName) {
return firstName + ' ' + lastName;
} else {
return firstName;
}
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');
参数默认值
TypeScript 会将添加了默认值的参数识别为可选参数。
function buildName(firstName: string, lastName: string = 'Cat') {
return firstName + ' ' + lastName;
}
剩余参数
rest 参数只能是最后一个参数。
function push(array: any[], ...items: any[]) {
items.forEach(function(item) {
array.push(item);
});
}
let a = [];
push(a, 1, 2, 3);
重载
重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。
比如，我们需要实现一个函数reverse，输入数字123的时候，输出反转的数字321，输入字符串'hello'的时候，输出反转的字符串'olleh'。
利用联合类型，我们可以这么实现：
function reverse(x: number | string): number | string {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}
然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。 这时，我们可以使用重载定义多个reverse的函数类型：
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}
前几次都是函数定义，最后一次是函数实现。
类型断言
类型断言可以用来手动指定一个值的类型。
值 as 类型
(window as any).foo = 1;
