TypeScript主要是给JS添加了类型系统，你可能会问，为什么要给JS添加类型系统呢？因为JS用法太过灵活了，3+[] 经过一系列的类型转化，竟然得到了字符串 '3'，如果程序出现问题，这种错误很难debug。加了类型，就能避免这样的操作发生。因为一旦定义了类型，你就知道，这个类型可以进行哪个操作，如果进行非法操作，就会报错。比如 3+[], 3是数字类型，[]是数组类型，两者类型不同，不能相加。

　　类型，定义取值的范围，以及对这些值的操作。比如，数字类型，取值范围就是数字，可以进行+-*/ 操作。学习TypeScript就是学习它的类型系统。学习之前，一定要先安装它, mkdir ts-learning && cd ts-learning && npm int -y 新建ts-learning项目， npm install typescript -D安装ts. touch type.ts，就可以写TypeScript代码了。

　　TypeScript定义了各式各样的类型，如number, string, boolean等。那怎么给变量指定类型呢？格式为 变量名：变量类型。

let str: string;
let a: number = 3;

　　如果在声明变量时，进行了初始化操作，像let a:number = 3; a是可以不用指定类型的，TypeScript 能够自动推断出a变量的类型是number类型。let a = 3; 当你把鼠标放到变量a上时，TypeScript 推断它是number类型。

　　这也算是一种最佳实践吧，尽量让TypeScript 去推断类型，只有当TypeScript 不能正确地推断时，我们才指定类型。

　　使用了类型系统后，程序要怎么运行呢？TS代码是不能直接运行的，要把它编译成JS代码，然后在浏览器或node 中执行。TypeScript 提供了tsc编译器，编译TS代码 到JS，当你npm install typescript 时，同时安装了tsc 编译器。但你要告诉它怎么编译，比如源文件在什么地方，编译到什么地方等等。这些信息放置的地方就是TS的配置文件tsconfig.json, 要把它放到项目的根目录下。执行tsc命令时，它会从项目根目录中寻找tsconfig.json, 然后根据配置信息进行编译。最简单的配置文件如下：

{
  "compilerOptions": {
    "rootDir": "./src",   /* .ts文件的根目录 */
    "outDir": "dist",     /* 编译后的文件放到哪里 */
    "target": "ES2015",   /* 编译到目标语法*/
    "module": "commonjs"   /* 编译后文件使用哪一种规范*/
  }
}

　　npx tsc 进行编译，项目就多出来了dist目录。node dist/type.js就可以运行程序了。假设粗心大意，给str赋值了数字3，

let str: string;
str = 3;

　　你会发现str变量下面标红了，鼠标移动上去，看到了报错的原因，数字类型不能赋值给字符串类型。怎么这么神奇呢？npm install typescript，除了安装了刚才说的tsc编译器，还安装了tsserver(TypeScript Language Service), 编辑器或IDE利用tsserver来完成标红提示错误等功能。当你编写TS代码时，编辑器会时时地与tsserver 进行通信，实实编译代码(编译到内存中)。这里要注意的是VS Code使用的TS版本，它默认使用的是Node自带的tsc编译器，当你打开任意一个.ts文件时，在VS Code的右下方，你都能看到这个版本号，

　　如果想使用自己安装的TS版本，就点击这个版本号，VS Code会在编辑区的上方弹出一个选择框，点击选择想要的版本就可以了。说的有点远了，现在再执行npx tsc会发生什么？同样报错，tsc 在编译的过程中，它会类型检查(type check)，但你也发现, tsc 仍然把错误的TS代码编译成了JS代码。按理说，如果有错，就不应该编译，更不应该输出编译后的JS文件。 幸好，可以在tsconfig.json配置noEmitOnError: true, 如查TS检查出错误，它就不会编译JS代码。

　　无论是VS Code编辑器的实时编译，还是tsc 的编译，你都会发现TS给JS加入类型系统的一个好处，就是尽可能早的发现问题，就是尽量把运行时发生的错误在编译时捕获，不用运行代码，也能检测到在程序运行过程中引起问题的代码。

　　number, string, boolean都是JS中拥有的类型，行为也类似，就不说了，主要说TypeScript中定义的JS中没有的类型。

　　any: 任意类型

　　当一个变量是any类型时，它可以被赋值给任何值。

let str: any;
str = 2;
str = 'str';

　　同时，any类型的值也可以赋值给任意其它类型。

let a: any = 'string';
let b: number = a;

　　当使用any类型时，TS不会进行类型检查，代码很容易出错，所以尽量不要用any 类型。

　　unknown:不知道的类型

　　为什么会有这种类型呢？在极少的情况下，你事先并不知道一个变量要保存什么类型，需要一个类型标注。你可能会说不是有any吗？确实，可以声明为any类型，但一旦声明为any类型，这个变量就不受控制了，就可以对这个变量进行任何操作，但你肯定不想对一个变量进行任意的操作，报错了怎么办？unknown类型和any类型不同之处就是在于控制操作上。当一个变量是unkonwn类型时，你做的事情并不多，如果要使用unknown类型，在使用之前，一定缩小它的类型范围(narrow type)。举个例子，就明白了

let a: any;
a = 3;
console.log(a.toUpperCase());

let b: unknown;
b = 3;
// Property 'toUpperCase' does not exist on type 'unknown'.
console.log(b.toUpperCase()); 

　　假设事先并不知道a和b的类型，于是分别把a和b标注了any 和unkown类型。先看a(any类型)，你可以把任何值赋给它，于是赋值了3，你可以对其进行任何操作，于是调用方法toUpperCase()，实际上数字3并没有toUpperCase()方法，尝试去调用对象不存在的方法，就会导致程序运行时报错。

　　再看b，编译器直接报错了，toUpperCase属性不存在unknown类型上。这就是区别。当你声明一个unknown类型的变量时，在对其进行操作(调用方法)之前，编译器会强制你进行向下类型缩小，比如你要对这个类型进行判断，有没有这个属性，这就减小了潜在的运行时报错。缩小类型范围的方法有很多，这里使用typeof, 我们都知道只有字符串才调用toUpperCase()方法，那就判断b是不是字符串

let b: unknown;
b = 3;
if (typeof b === 'string'){
    console.log(b.toUpperCase());
}

　　unknown和any一样，可以表示任意的值 ，但后续的操作却完全不同。any可以进行任意的操作，但unknown却要进行类型缩小，也因此更为安全。如果实在是不知道变量的类型，尽量使用unknown，不要使用any。

　　null和undefined 类型

　　它们也是JS中已有的类型，之所以把它们拿出来说，是因为，在TypeScript中，null和undefined可以赋值给其它任意类型，而不仅仅是null和undefined类型。

const x: number = null; 

　　竟然没有报错，x是number类型，值却是null，如果用x调用number的方法，肯定报错，最好是null只能赋值给null类型，undefined只能赋给undefined类型。这要配置strictNullChecks来控制null或undefined是否能赋值给其它类型。strictNullChecks: true 表示禁止赋值给其它类型。当在tsconfig.json中写入strictNullChecks: true

// Type 'null' is not assignable to type 'number'
const x: number = null; 

　　如果变量值就是null，那要明显地标注变量是null类型

const x: null = null; 

　　字面量类型

　　TypeScript 还定义了字面量类型，3也是一个类型。变量类型的声明方式是 变量名：类型，如果类型是一个字面量时，就是字面量类型。

let a: 3;
let b: 'name';
let c: false;

　　当变量类型是字面量类型时，它的取值也就固定了。a只能赋值为3，b只能赋值为'name'，c只能赋值为false。

　　数组类型

　　在使用数组时，数组中的元素通常是一个类型，所以数组的类型声明是元素的类型后面跟上[]

let arr: number[]; // arr数组中每一个元素都是number类型

　　数组还有一个子类叫元组类型，看一下类型声明就清楚了

let turple: [number, string];

　　[number, string] 就是一个元组类型，[ ]表示它是一个数组类型，但元素的类型声明不是在[ ] 的外面，而是在里面。这表明，数组中元素都是固定的，也就是数组的长度是固定的，并且数组中的每一个元素的类型也是固定的，所以元组就是一个元素类型固定且长度固定的数组。turple 就是2个元素的数组，数组的第一个元素的类型是number，第二个元素的类型是string。

let arr: number[] = [2, 3, 4, 5];
let turple: [number, string] = [2, 'name'];

　　对象类型

　　在TS中有4种方式来标示一个变量（或值）是对象类型

let obj1: object = {a: 2}; // 小写object 类型
let a: {b: number} = { b: 12 }  //对象字面量语法，{b: number}类型
let danger: {} // {} 类型
let obj: Object; // 大写的object类型。

　　先看第一种，小写的object类型。

let obj1: object = {a: 2};
// Property 'a' does not exist on type 'object'
obj1.a;

　　获取obj1对象上a属性，发现报错了，object类型上不存在属性a。当声明一个变量是object类型时，只表示它是一个object，而不是null，再也没有其它过多信息了。你对object类型(obj1)什么也做不了。

　　再看{} 类型和Object类型。

let danger: {};
danger = {};
danger = {x: 1}
danger = [];
danger = 2;

let Obj: Object;
Obj =1;
Obj = {x: 1};

　　除了null和undefined以外的类型都能赋值{} 类型和Object类型，这两种声明方式没有什么用。

　　以上三种声明对象类型的方式，几乎没有什么用，就只剩下对象字面量的声明方式。对象字面量语法声明对象类型，声明的是对象的形状，对象包含哪些属性。这样声明对象类型的方式，叫作structurally typed(duck typing )。structurally typed(duck typing )是一种编程风格，它只关心对象有哪些属性，而不关心它名义上的类型。

　　当把一个对象字面量赋值给一个对象类型变量时，TS会执行非常严格的类型检查。对象字面量中的属性，既不能比对象类型中的定义的属性多，也不能比类型中的定义的属性少，必须一一对应，否则报错，这叫excess property check

let obj: {b: number} = {
    b: 123,
    /* 
    Type '{ b: number; a: number; }' is not assignable to type '{ b: number; }'.
    Object literal may only specify known properties, and 'a' does not exist in type '{ b: number; }'
    */
    a: 456
}

　　但这会带来问题，有的对象有某个属性，有的对象却没有这个属性，有的对象有很多属性，有的对象却没有这些属性，但它们都有共有的属性a，这样怎么声明，可使用?: 标示某个属性可有可无，也可以使用索引表达式 [key: number]: boolean。 key(可以取任意名字)表示对象的属性，是number类型，值是布尔类型。

let obj: {
    b: number
    c?: string
    [key: number]: boolean
}

　　 obj 必须有b属性，且是number类型。c属性可能有也可能没有，如果有c属性，它的值可以是undefined。如果还有其属性，它们必须是number类型，且属性值必须是布尔值。

obj = {b: 3};
obj = {b: 2, c:undefined};
obj = {b: 2, 10: false}
obj = {10: false} // 报错，没有b属性。

　　函数类型

　　无论是函数声明，还是函数表达式，在写函数的过程中可以直接定义其参数类型和返回值。

function sum(a: number, b: number): number {
    return a + b;
}
const substract = (a:number, b:number):number => a - b;

　　参数a，b都是number类型，参数列表() 后面跟 :number，表示函数的返回值类型，是number类型。如果TS能推断出函数的返回值类型，返回值类型可以省略。

function sum(a: number, b: number) {
    return a + b;
}

　　当你把鼠标放到sum上时，可以看到TS已经推断出函数的返回值是number类型。如果参数类型也不写呢？

function sum(a, b) {
    return a + b;
}

　　鼠标放到a上，a是any类型。当TypeScript不能推断一个变量的类型时，它就默认变量的类型为any。这叫隐式any，因为你没有写any这个关键字，变是却是any类型。由于any类型，容易引起问题，所以最好不要让TS做这种类型推断。如果参数确实是any类型，要显示地标示出来。配置项noImplicitAny 就是阻止TS做这种类型推断的。当在tsconfig.json文件中配置noImplicitAny: true时，如果你没有为变量标注类型，而是让TS推断出了它的类型是any时，TS就会报错。

function sum(a, b) {// Parameter 'a' implicitly has an 'any' type.
    return a + b;
}

　　如果函数没有返回值呢？返回值类型是void

function print(a: string): void {
    console.log(a);
}

　　当函数抛出错误呢，返回值是never类型，永远不会发生。never类型是所有类型的子类型，你可以把never类型赋值给任意其它类型。

function erorr(): never {
    throw new Error('Error');
}

　　有时函数参数是默认参数或可能传参，也可能不传参的参数，参数类型用?: 表示。

function request(url: string, method?: string){}

　　函数中还有一个特殊的存在this，函数调用方式不同，this指向就不同，这也是问题的所在，所以函数中有this时，最好声明this的期望类型。在TypeScript中，可以在参数列表中声明this，不过，this要作为第一个参数存在，其它参数放到它后面

function fancyDate(this: Date, name?: string) {
    return `${this.getDate()}/${this.getMonth()}/${this.getFullYear()}`
}

fancyDate.call(new Date)

　　当函数作为参数传递，或者作为函数返回值时，就不能用这种方式声明类型了，那就需要自定义类型了。

　　使用type自定义类型

　　使用type自定义类型，格式为:  type 类型名称 = 类型。 以sum函数为例，它的类型是什么呢？两个number类型参数，返回一个number类型，类型就可以这么写

(a:number, b:number ) => number

　　很像箭头函数的语法，参数列表 => 返回值类型。再取个名字Sum，自定义类型就是

type Sum = (a:number, b:number ) => number;

 　　Sum就是一个自定义的函数类型，只要一个函数接受两个number类型的参数，并返回number类型，这个函数就可以用Sum 标示。

let sub: Sum = (a, b) => a - b;

　　同时可标注参数或返回值

function runSum(fn: Sum, a:number, b: number) {
    return fn(a, b);
}
function returnSum(): Sum {
    return  (a, b) => a + b ;
}

returnSum()(7, 8);

　　type Sum = (a:number, b:number ) => number; 是Sum类型的简写形式，更完整的形式如下

type Sum = {
    (a: number, b: number): number
}

　　因为在JS中函数是一个对象，对象就会有属性，声明一个函数类型，也就是声明一个对象类型，就可以用对象字面量的方式声明它。

　　使用Type 来定义类型的时候，有两个重要概念，type union(联合类型)，type insertection(交叉类型)。

　　type union(联合类型)

　　type union(联合类型)：两个或多个类型使用 | 联合在一起，形成一个新的类型。可以把两个基本类型联合起来

type StrOrNum =  string | number;

　　　StrOrNum 或是string类型，或是number类型。使用这个联合类型时，只能使用string和number类型的共用的属性，两者很少共有属性。可以把两个对象类型联合起来

type Cat = {name: string, purrs: boolean}
type Dog = {name: string, barks: boolean, wags: boolean}
type CatOrDogOrBoth = Cat | Dog

　　当你看到一个类型是CatOrDogOrBoth的时候， 你想到了什么？保险起见，我只使用它们共有的属性name，这个类型肯定有一个name属性，其它属性有没有，不敢保证。反过来想，既然这个类型是CatOrDogOrBoth，我可以给它赋一个cat值，也可以给它赋一个Dog值，共有的值也可以赋给它。

let c:CatOrDogOrBoth = {name: 'cat', purrs: false } // Cat类型
let d:CatOrDogOrBoth = {name: 'dog', barks: false, wags: false } // dog类型
let cdBoth: CatOrDogOrBoth = { name: 'both', barks: true, purrs: true, wags: true}

　　类型联合时要注意，如果两个类型中有相同的属性，但属性却是不同的类型时，属性的两个类型也进行联合(union)

type Product = {
    id: number,
    name: string,
    price?: number
};
type Person = {
    id: string,
    name: string,
    city: string
};

// Product 和 Person 联合之后的结果
type UnionType = {
    id: number | string,
    name: string
};

　　UnionType就是Product和Person类型进行联合后生成的新类型。在UnionType中，id属性的类型是联合类型 number | string ，就是因为id 在Product中是number 类型，但是在Person类型中是string类型.  name属性在两个类型中都是string, 所以在新的联合类型中，name属性也是string

　　type insertection(交叉类型)：两个或多个类型使用 & 联合在一起，形成一个新的类型。

type strAndnum =  string & number;

 　　strAndnum，既是string，又是number，新的类型集合了string类型 和number类型的所有属性。正是由于把所有的属性都集合到了一起，你会发现，没有一个值既是string，又是number，所以这个类型没有意义。通常，&用于对象类型。

type Person = {
    id: string;
    name: string;
    city: string;
}

type Employee = {
    company: string;
    dept: string
}

type PersonAndEmpoyee = {
    id: string;
    name: string;
    city: string;
    company: string;
    dept: string
}

　　PersonAndEmpoyee就是Person和Empoyee进行交叉生成的新的类型。你可以看到，type insertection(交叉类型) 就是把所有对象类型的属性全部组合到一起，允许你使用所有的属性，而不是共有类型。

 　　当给一个交叉类型进行赋值时，值必须包含每一个类型中都定义的属性

let bob: Person & Employee = {
    id: "bsmith", name: "Bob", city: "London",
    company: "Acme Co", dept: "Sales"
};

　　如果两个要交叉类型有相同的属性时，这时要注意。如果相同的属性，类型也相同，这没有问题。给Empoyee再声明一个id:string属性，Person & Employee 的结果还是一样　　

 　　但是如果类型不同，这个属性的类型，是两个不同类型进行交叉，分别给Person和Employee 定义一个contact属性，类型不同

type Person = {
    id: string;
    contact: number;
}

type Employee = {
    id: string;
    contact: string;
}

　　Person & Employee

type PersonAndEmpoyee = {
    id: string;
    contact: number & string;
}

 　　这时就出现问题了，没有一个值，它既是number 又是string. 解决办法，就是相同的属性不要使用原始类型，要使用对象。　　

type Person = {
    id: string;
    contact: {phone: number};
}

type Employee = {
    id: string;
    contact: {name: string}
}

type PersonAndEmpoyee = {
    id: string;
    contact: {phone: number} & {name: string};
}