Typescript 最佳實踐

文章列表: 

• 《一》大話 TypeScript 基本類型

• 《二》大話 Typescript 枚舉

• 《三》大話 Typescript 接口

• 《四》大話 Typescript 泛型

• 《五》大話 Typescript 函數與類

• 《六》Typescript 最佳實踐

 

爲了更好的閱讀體驗,  能夠看. 

 

一年前剛接觸 Typescript 的時候, 以爲它加大了代碼工做量. 寫一大堆東西.爲了找某個類型東奔西跑, 引入第三庫還常常報錯. 

然而如今的我想說: 真香. 

咱們常常吐槽別人代碼可維護性特別低, 老是但願別人可以主動的寫註釋, 但是寫註釋卻沒有任何方式能夠進行約束. 這下好了, 類型就是最好的註釋, 用 Typescript, 能夠大大提升代碼的可維護性. 

 

 

一. 如何處理第三方庫類型相關問題

Typescipt 所提供的第三方庫類型定義不只約束咱們的輸入調用, 還能爲咱們提供文檔. 如今, NPM 上的第三方類型定義種類繁多，很難保證類型定義是正確的. 也很難保證全部使用的第三方庫都有類型定義. 

那麼, 在這個充滿未知的過程當中，如何才能正確使用TypeScript中的第三方庫呢？

 

下面列舉了四種常見的沒法正常工做的場景以及對應的解決方法：

• 庫自己沒有自帶類型定義

• 庫自己沒有類型定義, 也沒有相關的@type

• 類型聲明庫有誤

• 類型聲明報錯

 

1. 庫自己沒有自帶類型定義

查找不到相關的庫類型. 舉個栗子 

在初次將 react 改造支持 typescript 時, 想必不少人都會遇到 module.hot 報錯. 此時只須要安裝對應的類型庫便可. 

安裝 @types/webpack-env

 

2. 庫自己沒有類型定義, 也沒有相關的@type

那隻能本身聲明一個了. 隨便舉個栗子. 

declare module "lodash"

 

3. 類型聲明庫有誤

• 推進解決官方類型定義的問題, 提issue, pr 

• Import 後經過 extends 或者 merge 能力對原類型進行擴展

• 忍受類型的丟失或不可靠性

• 使用 // @ts-ignore  忽略

 

4. 類型聲明報錯

• 在 compilerOptions 的添加"skipLibCheck": true, 曲線救國

 

二. 巧用類型收縮解決報錯下面列舉了幾種常見的解決方法：

• 類型斷言

• 類型守衛 typeof in instanceof 字面量類型保護

• 雙重斷言

 

一、 類型斷言

類型斷言能夠明確的告訴 TypeScript 值的詳細類型，

在某些場景, 咱們很是確認它的類型, 即便與 typescript 推斷出來的類型不一致. 那咱們可使用類型斷言. 

語法以下: 

<類型>值

 

值 as 類型 // 推薦使用這種語法. 由於<>容易跟泛型, react 中的語法起衝突

 

舉個例子, 以下代碼,  padding 值能夠是 string , 也能夠是 number, 雖然在代碼裏面寫了 Array(), 咱們明確的知道, padding 會被parseint 轉換成 number 類型, 但類型定義依然會報錯. 

 

function padLeft(value: string, padding: string | number) {

   // 報錯: Operator '+' cannot be applied to

   // types 'string | number' and 'number'

   return Array(padding + 1).join(" ") + value;

}

 

解決方法, 使用類型斷言. 告訴 typescript 這裏我確認它是 number 類型, 忽略報錯. 

function padLeft(value: string, padding: string | number) {

   // 正常

   return Array(padding as number + 1).join(" ") + value;

}

 

可是若是有下面這種狀況, 咱們要寫不少個 as 麼? 

function padLeft(value: string, padding: string | number) {

   console.log((padding as number) + 3);

   console.log((padding as number) + 2);

   console.log((padding as number) + 5);

   return Array((padding as number) + 1).join(' ') + value;

}

 

二、 類型守衛

類型守衛有如下幾種方式, 簡單的歸納如下

• typeof:  用於判斷 "number"，"string"，"boolean"或 "symbol" 四種類型. 

• instanceof : 用於判斷一個實例是否屬於某個類

• in: 用於判斷一個屬性/方法是否屬於某個對象

• 字面量類型保護

 

上面的例子中, 是 string | number 類型, 所以使用 typeof 來進行類型守衛. 例子以下: 

function padLeft(value: string,padding: string | number) {

   if (typeof padding === 'number') {

       console.log(padding + 3); //正常

       console.log(padding + 2); //正常

       console.log(padding + 5); //正常

        //正常

       return Array(padding + 1).join(' ') value;

   }

   if (typeof padding === 'string') {

       return padding + value;

   }

}

 

相比較 類型斷言 as , 省去了大量代碼. 除了 typeof , 咱們還有幾種方式, 下面一一舉例子. 

 

• instanceof :用於判斷一個實例是否屬於某個類

class Man {

   handsome = 'handsome';

}

 

class Woman {

   beautiful = 'beautiful';

}

 

function Human(arg: Man | Woman) {

   if (arg instanceof Man) {

       console.log(arg.handsome);

       console.log(arg.beautiful); // error

   } else {

       // 這一塊中必定是 Woman

       console.log(arg.beautiful);

   }

}

 

• in : 用於判斷一個屬性/方法是否屬於某個對象

interface B {

   b: string;

}

 

interface A {

   a: string;

}

 

function foo(x: A | B) {

   if ('a' in x) {

       return x.a;

   }

   return x.b;

}

 

• 字面量類型保護

有些場景, 使用 in, instanceof, typeof 太過麻煩. 這時候能夠本身構造一個字面量類型. 

type Man = {

   handsome: 'handsome';

   type: 'man';

 

};

 

type Woman = {

   beautiful: 'beautiful';

   type: 'woman';

};

 

function Human(arg: Man | Woman) {

   if (arg.type === 'man') {

       console.log(arg.handsome);

       console.log(arg.beautiful); // error

   } else {

       // 這一塊中必定是 Woman

       console.log(arg.beautiful);

   }

}

 

三、雙重斷言

有些時候使用 as 也會報錯,由於 as 斷言的時候也不是毫無條件的. 它只有當S類型是T類型的子集，或者T類型是S類型的子集時，S能被成功斷言成T. 

因此面對這種狀況, 只想暴力解決問題的狀況, 可使用雙重斷言. 

function handler(event: Event) {

   const element = event as HTMLElement;

   // Error: 'Event' 和 'HTMLElement'

    中的任何一個都不能賦值給另一個

}

 

若是你仍然想使用那個類型，你可使用雙重斷言。首先斷言成兼容全部類型的any

 

function handler(event: Event) {

   const element = (event as any) as HTMLElement;

    // 正常

}

 

三. 巧用 typescript 支持的 js 最新特性優化代碼

1. 可選鏈 Optional Chaining 

 

let x = foo?.bar.baz();

 

 

typescript 中的實現以下: 

var _a;

let x = (_a = foo) === null ||

_a === void 0 ? void 0 : _a.bar.baz();

 

利用這個特性, 咱們能夠省去寫不少噁心的 a && a.b && a.b.c 這樣的代碼

 

2. 空值聯合 Nullish Coalescing

 

let x = foo ?? '22';

 

 

typescript 中的實現以下: 

 

let x = (foo !== null && foo !== void 0 ?

foo : '22');

 

 

 

四. 巧用高級類型靈活處理數據typescript 提供了一些很不錯的工具函數. 以下圖

 

 

 

 

• 類型索引

爲了實現上面的工具函數, 咱們須要先了解如下幾個語法: 

keyof : 獲取類型上的 key 值

extends : 泛型裏面的約束

T[K] : 獲取對象 T 相應 K 的元素類型

 

type Partial<T> = {

   [P in keyof T]?: T[P]

}

 

在使用 props 的時候, 有時候所有屬性都是可選的, 若是一個一個屬性寫 ? , 大量的重複動做. 這種時候能夠直接使用 Partial<State>  

 

Record 做爲一個特別靈活的工具. 第一個泛型傳入對象的key值, 第二個傳入 對象的屬性值. 

type Record<K extends string, T> = {

   [P in K]: T;

}

 

咱們看一下下面的這個對象, 你會怎麼用 ts 聲明它? 

const AnimalMap = {

   cat: { name: '貓', title: 'cat' },

   dog: { name: '狗', title: 'dog' },

   frog: { name: '蛙', title: 'wa' },

};

 

此時用 Record 便可. 

type AnimalType = 'cat' | 'dog' | 'frog';

 

interface AnimalDescription {

name: string, title: string

}

 

const AnimalMap:

Record<AnimalType, AnimalDescription> = {

   cat: { name: '貓', title: 'cat' },

   dog: { name: '狗', title: 'dog' },

   frog: { name: '蛙', title: 'wa' },

};

 

• never, 構造條件類型

除了上面的幾個語法. 咱們還能夠用 never , 構造條件類型來組合出更靈活的類型定義. 

語法: 

never: 從未出現的值的類型

 

// 若是 T 是 U 的子類型的話，那麼就會返回 X，不然返回 Y

構造條件類型 : T extends U ? X : Y

 

type Exclude<T, U> = T extends U ? never : T;

 

// 至關於: type A = 'a'

type A = Exclude<'x' | 'a', 'x' | 'y' | 'z'>

 

• 更簡潔的修飾符: - 與 + 

能夠直接去除 ? 將全部對象屬性變成必傳內容. 

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

 

// Remove readonly

type MutableRequired<T> = {

    -readonly [P in keyof T]: T[P]

};  

 

• infer: 在 extends 條件語句中待推斷的類型變量。 

// 須要獲取到 Promise 類型裏蘊含的值

type PromiseVal<P> =

P extends Promise<infer INNER> ? INNER : P;

 

type PStr = Promise<string>;

 

// Test === string

type Test = PromiseVal<PStr>;

 

 

五. 辨別 type & interface 

在各大類型庫中, 會看到形形色色的 type 和 interface . 然而不少人在實際中殊不知道它們的區別. 

 

官網的定義以下: 

 

An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.

 

An interface can have multiple merged declarations, but a type alias for an object type literal cannot.

 

從一張圖看出它們兩的區別: 

 

 

 

 

建議:  能用 interface 實現，就用 interface , 若是不能才用 type. 

 

 

 

爲了更好的閱讀體驗,  《typescrit 最佳實踐》

- 歡迎關注「前端加加」,認真學前端，作個有專業的技術人...