深入浅出TypeScript
一、TypeScript
1、TypeScript的定义
简而言之，TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript 。
2、为什么要使用TypeScript？
1、TS是JS的超集，用于解决大型项目的代码复杂性
2、TS是强类型语言，支持静态和动态类型
3、TS可以在编译期间就发现潜在的问题
4、TS不允许更改变量的类型
上述有点都是传统的JS所不具有的，为此，现行大型项目中使用TS的比列正在逐步上升。给出TS和JS的对比表。
| Typescript | JavaScript |
|---|---|
| TS是JS的超集，用于解决大型项目的代码复杂性 | 一种脚本语言，用于创建动态网页 |
| TS是强类型语言，支持静态和动态类型 | 动态弱类型语言 |
| TS可以在编译期间就发现潜在的问题 | 只能在运行时发现错误 |
| TS不允许更改变量的类型 | 变量可以被赋值为不同的类型 |
3、TypeScript带来了什么？
1、安全的类型
2、下一代JS特性
3、完善的工具链
二、TypeScript基础
1、基础类型
类型是在我们运行程序之前通过在代码中描述我们计划如何使用数据来区分正确程序的方法。它们可以从简单的类型(如数字和字符串) 到为我们的问题域完美建模的复杂结构。
编程语言分为两类：静态类型或动态类型。
在使用静态类型的语言中，变量的类型在编译时必须是已知的。如果我们声明一个变量，编译器应该知道(或可推断) 该变量是数字、字符串或布尔值。
在动态类型的语言中，这不一定是这样。只有在运行程序时才知道变量的类型。
TypeScript可以支持静态类型，而JavaScript不支持。
TypeScript有如下类型：
boolean,number,srting
undefined,null
any,unknown,void
never
数组类型[]
元组类型tuple
（1）布尔值 最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）。
let isDone: boolean = false;
（2）数字
和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
（3）字符串
JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样，我们使用 string表示文本数据类型。 和JavaScript一样，可以使用双引号（ "）或单引号（'）表示字符串。
let name: string = "bob";
name = "smith";
同时，TypeScript也支持模板字符串：
let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.
I'll be ${ age + 1 } years old next month.`;
（4）any
有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量：
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
（5）void
某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：
function warnUser(): void {
console.log("This is my warning message");
}
（6）never
never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。
下面是一些返回never类型的函数：
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}
}
（7）数组
TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：
let list: number[] = [1, 2, 3];
第二种方式是使用数组泛型，Array<元素类型>：
let list: Array<number> = [1, 2, 3];
（8）元组
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error
当访问一个已知索引的元素，会得到正确的类型：
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'
2、函数类型
定义: TS定义函数类型时要定义输入参数类型和输出类型
1、输入参数:参数支持可选参数和默认参数
2、输出参数:输出可以自动推断，没有返回值时，默认为void类型
3、函数重载:名称相同但参数不同，可以通过重载支持多种类型
3、接口
定义：接口是为了定义对象类型
特点：
可选属性：？
只读属性：readonly
可以描述函数类型
可以描述自定义属性
总结：接口很灵活
4、类
定义:写法和JS差不多，增加了一些定义
特点:
增加了public、private、 protected 修饰符
抽象类:
只能被继承，不能被实例化
作为基类，抽象方法必须被子类实现 interface约束类，使用implements关键字
