TypeScript 是 JavaScript 的一個(gè)超集，支持 ECMAScript 6 標(biāo)準(zhǔn)（ES6 教程）。

TypeScript 由微軟開發(fā)的自由和開源的編程語言。

TypeScript 設(shè)計(jì)目標(biāo)是開發(fā)大型應(yīng)用，它可以編譯成純 JavaScript，編譯出來的 JavaScript 可以運(yùn)行在任何瀏覽器上。

1 TypeScript VS JavaScript

TypeScript	JavaScript
JavaScript 的超集，用于解決大型項(xiàng)目的代碼復(fù)雜性	一種腳本語言，用于創(chuàng)建動態(tài)網(wǎng)頁
強(qiáng)類型，支持靜態(tài)和動態(tài)類型	動態(tài)弱類型語言
可以在編譯期間發(fā)現(xiàn)并糾正錯誤	只能在運(yùn)行時(shí)發(fā)現(xiàn)錯誤
不允許改變變量的數(shù)據(jù)類型	變量可以被賦值成不同類型

2 TypeScript基礎(chǔ)

2.1 TS基礎(chǔ)-基礎(chǔ)類型

1. boolean、number、string
2. undefined、null
3. any、unknown、void
4. never
5. 數(shù)組類型 []
6. 元組類型 tuple

// 舉個(gè)例子
function test(x:string | number):boolean {if (typeof x === 'string') {return true;} else if (typeof x === 'number') {return false;}return throwError('參數(shù)格式不對');
}function throwError(message:string):never {throw new Error(message);
}

2.2 TS基礎(chǔ)-函數(shù)類型

定義：TS定義函數(shù)類型時(shí)要定義輸入?yún)?shù)類型和輸出類型

輸入?yún)?shù)：參數(shù)支持可選參數(shù)和默認(rèn)參數(shù)

輸出參數(shù)：輸出可以自動推斷，沒有返回值時(shí)，默認(rèn)為 void 類型

函數(shù)重載：名稱相同但參數(shù)不同，可以通過重載支持多種類型

function add(x:number[]):number
function add(x:string[]):string
function add(x:any[]):any {if (typeof x[0] === 'string') {return x.join()}if (typeof x[0] === 'number') {return x.reduce((acc,cur) => acc + cur)}
}

2.3 TS基礎(chǔ)-interface

定義：接口是為了定義對象類型

特點(diǎn)：

• 可選屬性：？
• 只讀屬性：readonly
• 可以描述函數(shù)類型
• 可以描述自定義屬性

總結(jié)：接口非常靈活duck typing

interface RandomKey {[propName:string]:string
}const obj:RandomKey = {a:'hello',b:'world',c:'typescript',
}

2.4 TS基礎(chǔ)-類

定義：寫法和JS差不多，增加了一些定義

特點(diǎn)：

• 增加了 public、private、protected 修飾符
• 抽象類：
  • 只能被繼承，不能被實(shí)例化
  • 作為基類，抽象方法必須被子類實(shí)現(xiàn)
• interface:約束類，使用implements關(guān)鍵字

3 TypeScript 進(jìn)階

3.1 TS進(jìn)階-高級類型

1. 聯(lián)合類型 |
2. 交叉類型 &
3. 類型斷言
4. 類型別名（type VS interface）
   • 定義：給類型起個(gè)別名
   • 相同點(diǎn)：
     1. 都可以定義對象或函數(shù)
     2. 都允許繼承
   • 差異性
     1. interface是TS用來定義對象，type是用來定義別名方便使用；
     2. type可以定義基本類型，interface:不行；
     3. interface可以合并重復(fù)聲明，type不行；

3.2 TS進(jìn)階-泛型-什么時(shí)候需要泛型？

官方定義：

軟件工程中，我們不僅要創(chuàng)建一致的定義良好的API,同時(shí)也要考慮可重用性。

組件不僅能夠支持當(dāng)前的數(shù)據(jù)類型，同時(shí)也能支持未來的數(shù)據(jù)類型，這在創(chuàng)建大型系統(tǒng)時(shí)為你提供了十分靈活的功能。

在像 C# 和 Java 這樣的語言中，可以使用泛型來創(chuàng)建可重用的組件，

一個(gè)組件可以支持多種類型的數(shù)據(jù)。這樣用戶就可以以自己的數(shù)據(jù)類型來使用組件。

有點(diǎn)晦澀，還是舉個(gè)栗子。

3.3 TS進(jìn)階-泛型-什么時(shí)候需要泛型？

3.4 TS進(jìn)階-泛型-基本使用

基本定義：

1. 泛型的語法是◇里面寫類型參數(shù)，一般用T表示；
2. 使用時(shí)有兩種方法指定類型：
   1. 定義要使用的類型
   2. 通過TS類型推斷，自動推導(dǎo)類型
3. 泛型的作用是臨時(shí)占位，之后通過傳來的類型進(jìn)行推導(dǎo)；

function print<T>(arg:T):T {console.lLog(arg)return arg
}
print<string>('hello')  // 定義T為string
print('hello')  // TS類型推斷，自動推導(dǎo)類型為string

3.5 TS進(jìn)階-泛型工具類型-基礎(chǔ)操作符

3.6 TS進(jìn)階-泛型工具類型-常用工具類型

• Partials:將類型屬性變?yōu)榭蛇x
• Required:將類型屬性變?yōu)楸剡x
• Readonly.:將類型屬性變?yōu)橹蛔x
• Pick、Record…

type Partials<T> ={[P in keyof T]?:T[P];
};type Required<T> = {[P in keyof T]-?:T[P]
};type Readonly<T> = {readonly [P in keyof T]:T[P];
};

4 TypeScript 實(shí)戰(zhàn)

4.1 TS實(shí)戰(zhàn)-聲明文件

• declare:三方庫需要類型聲明文件
• .dts:聲明文件定義
• @types:三方庫TS類型包
• tsconfig.json:定義TS的配置

4.2 TS實(shí)戰(zhàn)-泛型約束后端接口類型