一、前言

寫Ts之前看了官方文件，被那么多特性嚇尿了，實(shí)際上工作用的特性并不多。(大衛(wèi)亞設(shè))。

五月底ts正式升級(jí)了4.3版本，4.4也已經(jīng)在beta版本了。差不多先生，夠用就行，這里更多的是，以自己的理解去總結(jié)一下常用的ts特性。有理解錯(cuò)誤的，歡迎大哥指正

知識(shí)這種東西，學(xué)了還是要總結(jié)下，梳理清楚自己對(duì)當(dāng)前知識(shí)的掌握程度。偷懶了一段時(shí)間，接下來要好好發(fā)力了。

二、ts的優(yōu)缺點(diǎn)

1、優(yōu)點(diǎn)

• 代碼的可讀性和可維護(hù)性：舉個(gè)看后端某個(gè)接口返回值，一般需要去network看or去看接口文檔，才知道返回?cái)?shù)據(jù)結(jié)構(gòu)，而正確用了ts后，編輯器會(huì)提醒接口返回值的類型，這點(diǎn)相當(dāng)實(shí)用。
• 在編譯階段就發(fā)現(xiàn)大部分錯(cuò)誤，避免了很多線上bug
• 增強(qiáng)了編輯器和 IDE 的功能，包括代碼補(bǔ)全、接口提示、跳轉(zhuǎn)到定義、重構(gòu)等

2、缺點(diǎn)

• 有一定的學(xué)習(xí)成本，需要理解接口（Interfaces）、泛型（Generics）、類（Classes）、枚舉類型（Enums）等前端工程師可能不是很熟悉的概念
• 會(huì)增加一些開發(fā)成本，當(dāng)然這是前期的，后期維護(hù)更簡單了
• 一些JavaScript庫需要兼容，提供聲明文件，像vue2，底層對(duì)ts的兼容就不是很好。
• ts編譯是需要時(shí)間的，這就意味著項(xiàng)目大了以后，開發(fā)環(huán)境啟動(dòng)和生產(chǎn)環(huán)境打包的速度就成了考驗(yàn)
• 可以看看Deno 內(nèi)部代碼將停用 typeScript，并公布五項(xiàng)具體理由

或多或少，聽到過的開發(fā)體驗(yàn)最好的架構(gòu)：React Hooks + TypeScript。目前也在用，還在學(xué)習(xí)中，至于到底好不好，我還是對(duì)vue 情有獨(dú)鐘。前端還在快速發(fā)展中，后面再出來個(gè)xxxScript，誰也說不好。所以一個(gè)字：學(xué)！

三、anyScript

可能因?yàn)闃I(yè)務(wù)場景或者業(yè)務(wù)緊張，or某個(gè)跑路的大哥省了點(diǎn)功夫，用了typeScript的項(xiàng)目也可能會(huì)變成anyScript。以下是幾種救急的方式（大哥們還沒有其他辦法）：

• // @ts-nocheck 禁用整個(gè)文件的ts校驗(yàn)
• // @ts-ignore 禁用單行ts校驗(yàn)
• any和unknown

不建議多用，但也不是不能用，有些場景確實(shí)不好寫ts定義。這個(gè)時(shí)候就不要硬憋自己了，寫個(gè)備注any下。

拋個(gè)面試題：你知道any和unknown的區(qū)別嗎？

回歸正題，開始學(xué)習(xí)，總結(jié)一些項(xiàng)目中使用較多的，一些TS高級(jí)特性這里就不說了。

四、ts類型

本篇所有demo都可在TypeScript Playground

運(yùn)行，不理解的建議都來跑跑看。

1、基礎(chǔ)類型

• 常用：boolean、number、string、array、enum、any、void
• 不常用：tuple、null、undefine、never

const count: number = 20210701;

2、對(duì)象類型

簡單理解interface 和 type 的區(qū)別：type 更強(qiáng)大，interface 可以進(jìn)行聲明合并，type 不行；

看個(gè)人習(xí)慣，一般聲明都用interface，需要用到其他變量類型，type多一些。有沒有interface或type一把梭的？

interface Hero { name: string; age: number; skill: string; skinNum?: number; say(): string; // say函數(shù)返回值為string [propname: string]: any; // 當(dāng)前Hero可定義任意字符串類型的key } // 繼承 interface littleSoldier extends Hero { rush(): string; } // 任意類型 interface IAnyObject { [key: string]: any; } type Hero = { name: string, age: number, skill: string, skinNum?: number, };

3、數(shù)組類型

項(xiàng)目中常見的寫法，需要聲明列表數(shù)據(jù)類型：

interface IItem { id: number; name: string; isDad: boolean; } const objectArr: IItem[] = [{ id: 1, name: '俊劫', isGod: true }]; // or const objectArr: Array<IItem> = [{ id: 1, name: '俊劫', isGod: true }]; const numberArr: number[] = [1, 2, 3]; const arr: (number | string)[] = [1, "string", 2];

4、元組 tuple

元組和數(shù)組類似，但是類型注解時(shí)會(huì)不一樣

賦值的類型、位置、個(gè)數(shù)需要和定義（生明）的類型、位置、個(gè)數(shù)一致。

暫時(shí)沒用過，感覺用處不大~~~

// 數(shù)組 某個(gè)位置的值可以是注解中的任何一個(gè) const LOL: (string | number)[] = ["zed", 25, "darts"]; // 元祖 每一項(xiàng)數(shù)據(jù)類型必須一致 const LOL: [string, string, number] = ["zed", "darts", 25];

5、聯(lián)合| or 交叉&類型

• 聯(lián)合類型：某個(gè)變量可能是多個(gè) interface 中的其中一個(gè)，用 | 分割
• 交叉類型：由多個(gè)類型組成，用 & 連接

// anjiao 某胖博主愛好 interface Waiter { anjiao: boolean; say: () => {}; } interface Teacher { anjiao: boolean; skill: () => {}; } // 聯(lián)合類型 function judgeWho(animal: Waiter | Teacher) {} // 交叉類型 // 同名類型會(huì)進(jìn)行合并，同名基礎(chǔ)類型屬性的合并返回：never // 同名非基礎(chǔ)類型屬性可以正常合并 function judgeWho(jishi: Waiter & Teacher) {}

6、enum枚舉

提高代碼可維護(hù)性，統(tǒng)一維護(hù)某些枚舉值，避免 JiShi === 1這種魔法數(shù)字。JiShi === JiS這樣寫，老板一眼就知道我想找誰。

// 初始值默認(rèn)為 0 enum JiShiEnum { REDJ, BLUEJ, GREENJ, } // 設(shè)置初始值 enum JiShiEnum { REDJ = 8, BLUEJ, GREENJ, } const jishi: JiShiEnum = JiS con(jishi) // 9 // 字符串枚舉，每個(gè)都需要聲明 enum JiShiEnum { REDJ = "8號(hào)", BLUEJ = "9號(hào)", GREENJ = "10號(hào)", }

7、泛型 T（Type）

簡單說就是：泛指的類型，不確定的類型，可以理解為一個(gè)占位符（使用T只是習(xí)慣，使用任何字母都行）

• K（Key）：表示對(duì)象中的鍵類型；
• V（Value）：表示對(duì)象中的值類型；
• E（Element）：表示元素類型。

// T 自定義名稱 function myFun<T>(params: T[]) { return params; } myFun <string> ["123", "456"]; // 定義多個(gè)泛型 function join<T, P>(first: T, second: P) { return `${first}${second}`; } join <number, string> (1, "2");

8、斷言

斷言用來手動(dòng)指定一個(gè)值的類型。值 as 類型 or <類型>值

注意在 tsx 語法中必須使用前者，即 值 as 類型。

function judgeWho(animal: Waiter | Teacher) { if ) { (animal as Teacher).skill(); }else{ (animal as Waiter).say(); } }

9、in

在做類型保護(hù)時(shí)間，類似于數(shù)組和字符串的 includes 方法

也有遍歷的作用，拿到ts類型定義的Key，獲取Key還有個(gè)方法：keyof是取類型的key的聯(lián)合類型 , in是遍歷類型的key

function judgeWhoTwo(animal: Waiter | Teacher) { if ("skill" in animal) { animal.skill(); } else { animal.say(); } }

10、類型注解

顯式的告訴代碼，我們的 count 變量就是一個(gè)數(shù)字類型，這就叫做類型注解

let count: number; // 類型注解 count = 123;

11、類型推斷

• 如果 TS 能夠自動(dòng)分析變量類型， 我們就什么也不需要做了
• 如果 TS 無法分析變量類型的話， 我們就需要使用類型注解

// ts可以推斷出count 為number類型 let count = 123;

12、void和never

返回值類型，也算是基礎(chǔ)類型。沒有返回值的函數(shù): void

function sayHello(): void { con("hello world"); }

如果一個(gè)函數(shù)是永遠(yuǎn)也執(zhí)行不完的，就可以定義返回值為 never

function errorFuntion(): never { throw new Error(); con("Hello World"); }

一個(gè)函數(shù)有入?yún)ⅲ灿谐鰠?，?xiàng)目中的常規(guī)寫法：

// 定義一個(gè)小姐姐 interface IGirl { name: string, age: number, skill: string, isAnMo: boolean; number: JiShiEnum; }; // 定義搜索小姐姐的入?yún)?interface ISearchParams extends IGirl{ serviceTime: string; } interface IGetGirls { data: IGirl[]; } // 函數(shù)主體 export function getGirls(data: ISearchParams): Promise<IGetGirls> { return axios({ url: `/dabaojian/getGirls`, method: 'GET', data, }); }

13、類型檢測

1、typeof

typeof 操作符可以用來獲取一個(gè)變量或?qū)ο蟮念愋?/p>interface Hero { name: string; skill: string; } const zed: Hero = { name: "影流之主", skill: "影子" }; type LOL = typeof zed; // type LOL = Hero

在上面代碼中，我們通過 typeof 操作符獲取 zed 變量的類型并賦值給 LOL 類型變量，之后我們就可以使用 LOL 類型

const ahri: LOL = { name: "阿貍", skill: "魅惑" };

2、instanceof

class NumberObj { count: number; } function addObj(first: object | NumberObj, second: object | NumberObj) { if (first instanceof NumberObj && second instanceof NumberObj) { return + ; } return 0; }

3、keyof

keyof 與 Object.keys 略有相似，只不過 keyof 取 interface 的鍵

interface Point { x: number; y: number; } // type keys = "x" | "y" type keys = keyof Point;

用 keyof 可以更好的定義數(shù)據(jù)類型

function get<T extends object, K extends keyof T>(o: T, name: K): T[K] { return o[name] }

14、ts類里的關(guān)鍵字

了解ts關(guān)鍵字的作用，在寫base類的時(shí)候可能會(huì)用到，個(gè)人用的不多。

• public
• private 類的外部不可用，繼承也不行
• protected 類的外部不可用，繼承可以
• public readOnly xxx 只讀屬性
• static funcXXX 靜態(tài)方法，不需要 new 就可以調(diào)用
• abstract funcXXX 抽象類，所有子類都必須要實(shí)現(xiàn) funcXXX

五、tsconfig

需要去了解 中一些參數(shù)的說明，具體參考官方文檔

1、作用：

• 用于標(biāo)識(shí) TypeScript 項(xiàng)目的根路徑；
• 用于配置 TypeScript 編譯器；
• 用于指定編譯的文件。

2、注意事項(xiàng)：

• tsc -init 生成 ，項(xiàng)目目錄下直接 tsc,編譯的時(shí)候就會(huì)走配置文件
• compilerOptions 內(nèi)部字段含義 阿寶哥 這篇文章有詳細(xì)說明
• 項(xiàng)目別名配置：遇到過的一個(gè)坑，僅在項(xiàng)目config中配置別名不生效，需要在中再配置一遍

六、Utility Types

Utility Types： 可以理解為基于ts封裝的工具類型;

具體源碼解析可以參考：

• 源碼解讀utility-types
• TypeScript Utility Types 學(xué)習(xí)筆記及源碼解析

1、Partial<T>

將T中所有屬性轉(zhuǎn)換為可選屬性。返回的類型可以是T的任意子集

export interface UserModel { name: string; age?: number; sex: number; } type JUserModel = Partial<UserModel> // = type JUserModel = { name?: string | undefined; age?: number | undefined; sex?: number | undefined; } // 源碼解析 type Partial<T> = { [P in keyof T]?: T[P]; };

2、Required<T>

通過將T的所有屬性設(shè)置為必選屬性來構(gòu)造一個(gè)新的類型。與Partial相反

type JUserModel2 = Required<UserModel> // = type JUserModel2 = { name: string; age: number; sex: number; }

3、Readonly<T>

將T中所有屬性設(shè)置為只讀

type JUserModel3 = Readonly<UserModel> // = type JUserModel3 = { readonly name: string; readonly age?: number | undefined; readonly sex: number; }

4、Record<K,T>

構(gòu)造一個(gè)類型，該類型具有一組屬性K，每個(gè)屬性的類型為T?？捎糜趯⒁粋€(gè)類型的屬性映射為另一個(gè)類型。Record 后面的泛型就是對(duì)象鍵和值的類型。

簡單理解：K對(duì)應(yīng)對(duì)應(yīng)的key，T對(duì)應(yīng)對(duì)象的value，返回的就是一個(gè)聲明好的對(duì)象

type TodoProperty = 'title' | 'description'; type Todo = Record<TodoProperty, string>; // = type Todo = { title: string; description: string; } interface IGirl { name: string; age: number; } type allGirls = Record<string, IGirl>

5、Pick<T,K>

在一個(gè)聲明好的對(duì)象中，挑選一部分出來組成一個(gè)新的聲明對(duì)象

interface Todo { title: string; description: string; done: boolean; } type TodoBase = Pick<Todo, "title" | "done">; // = type TodoBase = { title: string; done: boolean; }

6、Omit<T,K>

從T中取出除去K的其他所有屬性。與Pick相對(duì)。

7、Exclude<T,U>

從T中排除可分配給U的屬性，剩余的屬性構(gòu)成新的類型

type T0 = Exclude<'a' | 'b' | 'c', 'a'>; // = type T0 = "b" | "c"

8、Extract<T,U>

從T中抽出可分配給U的屬性構(gòu)成新的類型。與Exclude相反

type T0 = Extract<'a' | 'b' | 'c', 'a'>; // = type T0 = 'a'

9、NonNullable<T>

去除T中的 null 和 undefined 類型

10、Parameters<T>

返回類型為T的函數(shù)的參數(shù)類型所組成的數(shù)組

type T0 = Parameters<() => string>; // [] type T1 = Parameters<(s: string) => void>; // [string]

11、ReturnType<T>

function T的返回類型

type T0 = ReturnType<() => string>; // string type T1 = ReturnType<(s: string) => void>; // void

12、InstanceType<T>

返回構(gòu)造函數(shù)類型T的實(shí)例類型; 相當(dāng)于js中的，不過返回的是對(duì)應(yīng)的實(shí)例

class C { x = 0; y = 0; } type T0 = InstanceType<typeof C>; // C