【萬字長文】深刻理解 Typescript 高級用法

時間  2020-05-05
標籤 萬字長文 深刻 理解 typescript 高級 用法 简体版
原文   原文鏈接
做者: 韓念琪

歡迎轉載或分享，轉載請註明做者及出處！javascript

相關連接

寫做初衷

最近剛入職新公司，正好部門每一個新人都須要作技術分享，這裏借這個機會把本身的知識體系梳理一遍。css

關於標題

本來題目設定爲是 Typescript 高級用法介紹，可是考慮掘金有不少關於 Typescript 高級用法 相關的分享，寫的都很是好，這裏就不作重複性工做了。因此把題目改爲了 深刻理解 Typescript 高級用法，注重 理解 而非 使用。html

正文

前言：這裏的標題看起來是 "高級用法"，很多同窗可能就表示被勸退了。其實 Typescript 做爲一門 強類型 編程語言，最具特點的就是他的類型表達能力，這是不少完備的後端語言都難以媲美的 說的很對，但PHP是最好的語言，因此若是你搞懂了他的類型系統，對未來的平常開發必定是大有裨益的，但過於靈活的類型系統也註定了 Typescript 沒法成爲一門純粹的靜態語言，不過每一行代碼都有代碼提示他不香嘛？前端

爲了更好的閱讀體驗，建議在寬屏瀏覽器端閱讀。vue

大綱

基礎準備

閱讀本文須要具有的基礎知識。java

預備知識

本文的定位爲理解高級用法，故不會涉及過多基礎知識相關的講解，須要讀者本身去完善這方面的知識儲備。node

此文檔的內容默認要求讀者已經具有如下知識：
  1. 有 Javascript 或其餘語言編程經驗。
  2. 有 Typescript 實際使用經驗，最好在正經項目中完整地使用過。
  3. 瞭解 Typescript 基礎語法以及常見關鍵字地做用。
  4. 對 Typescript 的 類型系統 架構有一個最基本的瞭解。

相關資源推薦

  1. Typescript 官網
  2. TypeScript Deep Dive
  3. TypeScript GitHub地址

背景

初用 Typescript 開發的同窗必定有這樣的困擾：react

  1. 代碼代碼提示並不智能，彷佛只能顯式的定義類型，纔能有代碼提示，沒法理解這樣的編程語言竟然有這麼多人趨之若鶩。
  2. 各類各樣的類型報錯苦不堪言，本覺得聽信網上說 Typescript 能夠提升代碼可維護性，結果卻發現徒增了很多開發負擔。
  3. 顯式地定義全部的類型彷佛能應付大部分常見，但遇到有些複雜的狀況卻發現無能爲力，只能含恨寫下若干的 as any 默默等待代碼 review 時的公開處刑。
  4. 項目急時間緊卻發現 Typescript 成了首要難題，思索片刻決定投靠的 Anyscript，快速開發業務邏輯，待到春暖花開時再回來補充類型。雙倍的工做量，雙倍的快樂只有本身才懂。

爲了不以上悲劇的發生或者重演，咱們只有在對它有更加深入的理解以後，才能在開發時遊刃有餘、在擼碼時縱橫捭闔。jquery

Typescript 類型系統簡述

思考題：有人說 Typescript = Type + Javascript，那麼拋開 Javascript 不談，這裏的 Type 是一門完備的編程語言嗎？webpack

Typescript 的類型是支持定義 "函數定義" 的

有過編程經驗的同窗都知道，函數是一門編程語言中最基礎的功能之一，函數是過程化、面向對象、函數式編程中程序封裝的基本單元，其重要程度不言而喻。

函數能夠幫助咱們作不少事，好比 ：

  • 函數能夠把程序封裝成一個個功能，並造成函數內部的變量做用域，經過靜態變量保存函數狀態，經過返回值返回結果。
  • 函數能夠幫助咱們實現過程的複用，若是一段邏輯能夠被使用屢次，就封裝成函數，被其它過程屢次調用。
  • 函數也能夠幫咱們更好地組織代碼結構，幫助咱們更好地維護代碼。
那麼言歸正傳，如何在 Typescript 類型系統中定義函數呢？

Typescript 中類型系統中的的函數被稱做 泛型操做符，其定義的簡單的方式就是使用 type 關鍵字：

// 這裏咱們就定義了一個最簡單的泛型操做符
type foo<T> = T;
複製代碼

這裏的代碼如何理解呢，其實這裏我把代碼轉換成你們最熟悉的 Javascript 代碼其實就不難理解了：

// 把上面的類型代碼轉換成 `JavaScript` 代碼
function foo(T) {
	return T
}
複製代碼

那麼看到這裏有同窗內心要犯嘀咕了，心想你這不是忽悠我嘛？這不就是 Typescript 中定義類型的方式嘛？這玩意兒我可太熟了，這玩意兒不就和 interface 同樣的嘛，我還知道 Type 關鍵字和 interface 關鍵字有啥細微的區別呢！

嗯，同窗你說的太對了，不過你不要着急，接着聽我說，其實類型系統中的函數還支持對入參的約束。

// 這裏咱們就對入參 T 進行了類型約束
type foo<T extends string> = T;
複製代碼

那麼把這裏的代碼轉換成咱們常見的 Typescript 是什麼樣子的呢？

function foo(T: string) {
	return T
}
複製代碼

固然啦咱們也能夠給它設置默認值：

// 這裏咱們就對入參 T 增長了默認值
type foo<T extends string = 'hello world'> = T;
複製代碼

那麼這裏的代碼轉換成咱們常見的 Typescript 就是這樣的：

function foo(T: string = 'hello world') {
	return T
}
複製代碼

看到這裏確定有同窗火燒眉毛地想要提問了：那能不能像 JS 裏的函數同樣支持剩餘參數呢？

很遺憾，目前暫時是不支持的，可是在咱們平常開發中必定是有這樣的需求存在的。那就真的沒有辦法了嘛？其實也不必定，咱們能夠經過一些騷操做來模擬這種場景，固然這個是後話了，這裏就不做拓展了。

Typescript 的類型是支持 "條件判斷" 的

人生總會面臨不少選擇，編程也是同樣。

——我瞎編的

條件判斷也是編程語言中最基礎的功能之一，也是咱們平常擼碼過程成最經常使用的功能，不管是 if else 仍是 三元運算符，相信你們都有使用過。

那麼在 Typescript 類型系統中的類型判斷要怎麼實現呢？

其實這在 Typescript 官方文檔被稱爲 條件類型(Conditional Types)，定義的方法也很是簡單，就是使用 extends 關鍵字。

T extends U ? X : Y;
複製代碼

這裏相信聰明的你一眼就看出來了，這不就是 三元運算符 嘛！是的，並且這和三元運算符的也發也很是像，若是 T extends U 爲 true 那麼 返回 X ，不然返回 Y。

結合以前剛剛講過的 "函數"，咱們就能夠簡單的拓展一下：

type num = 1;
type str = 'hello world';

type IsNumber<N> = N extends number ? 'yes, is a number' : 'no, not a number';

type result1 = IsNumber<num>; // "yes, is a number"
type result2 = IsNumber<str>; // "no, not a number"
複製代碼

這裏咱們就實現了一個簡單的帶判斷邏輯的函數。

Typescript 的類型是支持 "數據結構" 的

模擬真實數組

看到這裏確定有同窗就笑了，這還不簡單，就舉例來講，Typescript 中最多見數據類型就是 數組（Array） 或者 元組（tuple）。

同窗你說的很對，那你知道如何對 元組類型 做 push、pop、shift、unshift 這些行爲操做嗎？

其實這些操做都是能夠被實現的：

// 這裏定義一個工具類型，簡化代碼
type ReplaceValByOwnKey<T, S extends any> = { [P in keyof T]: S[P] };

// shift action
type ShiftAction<T extends any[]> = ((...args: T) => any) extends ((arg1: any, ...rest: infer R) => any) ? R : never; // unshift action type UnshiftAction<T extends any[], A> = ((args1: A, ...rest: T) => any) extends ((...args: infer R) => any) ? R : never; // pop action type PopAction<T extends any[]> = ReplaceValByOwnKey<ShiftAction<T>, T>; // push action type PushAction<T extends any[], E> = ReplaceValByOwnKey<UnshiftAction<T, any>, T & { [k: string]: E }>; // test ... type tuple = ['vue', 'react', 'angular']; type resultWithShiftAction = ShiftAction<tuple>; // ["react", "angular"] type resultWithUnshiftAction = UnshiftAction<tuple, 'jquery'>; // ["jquery", "vue", "react", "angular"] type resultWithPopAction = PopAction<tuple>; // ["vue", "react"] type resultWithPushAction = PushAction<tuple, 'jquery'>; // ["vue", "react", "angular", "jquery"] 複製代碼

注意：這裏的代碼僅用於測試，操做某些複雜類型可能會報錯，須要作進一步兼容處理，這裏簡化了相關代碼，請勿用於生產環境！

相信讀到這裏，大部分同窗應該能夠已經能夠感覺到 Typescript 類型系統的強大之處了，其實這裏仍是繼續完善，爲元組增長 concat 、map 等數組的經常使用的功能，這裏不做詳細探討，留給同窗們本身課後嘗試吧。

可是其實上面提到的 "數據類型" 並非我這裏想講解的 "數據類型"，上述的數據類型本質上仍是服務於代碼邏輯的數據類型，其實並非服務於 類型系統 自己的數據類型。

上面這句話的怎麼理解呢？

無論是 數組 仍是 元組，在廣義的理解中，其實都是用來對 數據 做 批量操做，同理，服務於 類型系統 自己的數據結構，應該也能夠對 類型 做 批量操做。

那麼如何對 類型 做 批量操做 呢？或者說服務於 類型系統 中的 數組 是什麼呢？

下面就引出了本小節真正的 "數組"：聯合類型(Union Types)

提及 聯合類型(Union Types) ，相信使用過 Typescript 同窗的必定對它又愛又恨：

  1. 定義函數入參的時候，當同一個位置的參數容許傳入多種參數類型，使用 聯合類型(Union Types) 會很是的方便，但想智能地推導出返回值的類型地時候卻又犯了難。
  2. 當函數入參個數不肯定地時候，又不肯意寫出 (...args: any[]) => void 這種毫無卵用的參數類型定義。
  3. 使用 聯合類型(Union Types) 時，雖然有 類型守衛（Type guard），可是某些場景下依然不夠好用。

其實當你對它有足夠的瞭解時，你就會發現 聯合類型(Union Types) 比 交叉類型(Intersection Types) 不知道高到哪裏去了，我和它談笑風生。

類型系統中的 "數組"

下面就讓咱們更加深刻地瞭解一下 聯合類型(Union Types)：
如何遍歷 聯合類型(Union Types) 呢？

既然目標是 批量操做類型，天然少不了類型的 遍歷，和大多數編程語言方法同樣，在 Typescript 類型系統中也是 in 關鍵字來遍歷。

type key = 'vue' | 'react';

type MappedType = { [k in key]: string } // { vue: string; react: string; }
複製代碼

你看，經過 in 關鍵字，咱們能夠很容易地遍歷 聯合類型(Union Types)，並對類型做一些變換操做。

但有時候並非全部全部 聯合類型(Union Types) 都是咱們顯式地定義出來的。

咱們想動態地推導出 聯合類型(Union Types) 類型有哪些方法呢？

可使用 keyof 關鍵字動態地取出某個鍵值對類型的 key

interface Student {
  name: string;
  age: number;
}

type studentKey = keyof Student; // "name" | "age"
複製代碼

一樣的咱們也能夠經過一些方法取出 元組類型 子類型

type framework = ['vue', 'react', 'angular'];

type frameworkVal1 = framework[number]; // "vue" | "react" | "angular"
type frameworkVal2 = framework[any]; // "vue" | "react" | "angular"
複製代碼

實戰應用

看到這裏，有的同窗可能要問了，你既然說 聯合類型(Union Types) 能夠批量操做類型，那我想把某一組類型批量映射成另外一種類型，該怎麼操做呢？

方法其實有不少，這裏提供一種思路，拋磚引玉一下，別的方法就留給同窗們自行研究吧。

其實分析一下上面那個需求，不難看出，這個需求其實和數組的 map 方法有點類似

那麼如何實現一個操做 聯合類型(Union Types) 的 map 函數呢？
// 這裏的 placeholder 能夠鍵入任何你所但願映射成爲的類型
type UnionTypesMap<T> = T extends any ? 'placeholder' : never;
複製代碼

其實這裏聰明的同窗已經看出來，咱們只是利用了 條件類型(Conditional Types)，使其的判斷條件老是爲 true，那麼它就老是會返回左邊的類型，咱們就能夠拿到 泛型操做符 的入參並自定義咱們的操做。

讓咱們趁熱打鐵，再舉個具體的栗子：把 聯合類型(Union Types) 的每一項映射成某個函數的 返回值。

type UnionTypesMap2Func<T> = T extends any ? () => T : never;

type myUnionTypes = "vue" | "react" | "angular";

type myUnionTypes2FuncResult = UnionTypesMap2Func<myUnionTypes>;
// (() => "vue") | (() => "react") | (() => "angular")
複製代碼

相信有了上述內容的學習，咱們已經對 聯合類型(Union Types) 有了一個相對全面的瞭解，後續在此基礎之上在做一些高級的拓展，也如砍瓜切菜通常簡單了。

其餘數據類型

固然除了數組，還存在其餘的數據類型，例如能夠用 type 或 interface 模擬 Javascript 中的 字面量對象，其特徵之一就是可使用 myType['propKey'] 這樣的方式取出子類型。這裏拋磚引玉一下，有興趣的同窗能夠自行研究。

Typescript 的類型是支持 "做用域" 的

全局做用域

就像常見的編程語言同樣，在 Typescript 的類型系統中，也是支持 全局做用域 的。換句話說，你能夠在沒有 導入 的前提下，在 任意文件任意位置 直接獲取到而且使用它。

一般使用 declare 關鍵字來修飾，例如咱們常見的 圖片資源 的類型定義：

declare module '*.png';
declare module '*.svg';
declare module '*.jpg';
複製代碼

固然咱們也能夠在 全局做用域 內聲明一個類型：

declare type str = string;
declare interface Foo {
  propA: string;
  propB: number;
}
複製代碼

須要注意的是，如何你的模塊使用了 export 關鍵字導出了內容，上述的聲明方式可能會失效，若是你依然想要將類型聲明到全局，那麼你就須要顯式地聲明到全局：

declare global {
  const ModuleGlobalFoo: string;
}
複製代碼

模塊做用域

就像 nodejs 中的模塊同樣，每一個文件都是一個模塊，每一個模塊都是獨立的模塊做用域。這裏模塊做用域觸發的條件之一就是使用 export 關鍵字導出內容。

每個模塊中定義的內容是沒法直接在其餘模塊中直接獲取到的，若是有須要的話，可使用 import 關鍵字按需導入。

泛型操做符做用域&函數做用域

泛型操做符是存在做用域的，還記得這一章的第一節爲了方便你們理解，我把泛型操做符類比爲函數嗎？既然能夠類比爲函數，那麼函數所具有的性質，泛型操做符天然也能夠具有，因此存在泛型操做符做用域天然也就很好理解了。

這裏定義的兩個同名的 T 並不會相互影響：

type TypeOperator<T> = T;
type TypeOperator2<T> = T;
複製代碼

上述是關於泛型操做符做用域的描述，下面咱們聊一聊真正的函數做用域：

類型也能夠支持閉包：

function Foo<T> () {
  return function(param: T) {
    return param;
  }
}

const myFooStr = Foo<string>();
// const myFooStr: (param: string) => string
// 這裏觸發了閉包，類型依然能夠被保留
const myFooNum = Foo<number>();
// const myFooNum: (param: number) => number
// 這裏觸發了閉包，類型也會保持相互獨立，互不干涉
複製代碼

Typescript 的類型是支持 "遞歸" 的

Typescript 中的類型也是能夠支持遞歸的，遞歸相關的問題比較抽象，這裏仍是舉例來說解，同時爲了方便你們的理解，我也會像第一節同樣，把類型遞歸的邏輯用 Javascript 語法描述一遍。

首先來讓咱們舉個栗子：

假如如今須要把一個任意長度的元組類型中的子類型依次取出，並用 `&` 拼接並返回。

這裏解決的方法其實很是很是多，解決的思路也很是很是多，因爲這一小節講的是 遞歸，因此咱們使用遞歸的方式來解決。廢話不羅嗦，先上代碼：

// shift action
type ShiftAction<T extends any[]> = ((...args: T) => any) extends ((arg1: any, ...rest: infer R) => any) ? R : never; type combineTupleTypeWithTecursion<T extends any[], E = {}> = { 1: E, 0: combineTupleTypeWithTecursion<ShiftAction<T>, E & T[0]> }[T extends [] ? 1 : 0] type test = [{ a: string }, { b: number }]; type testResult = combineTupleTypeWithTecursion<test>; // { a: string; } & { b: number; } 複製代碼

看到上面的代碼是否是一臉懵逼？不要緊，接下來咱們用普通的 Typescript 代碼來 "翻譯" 一下上述的代碼。

function combineTupleTypeWithTecursion(T: object[], E: object = {}): object {
  return T.length ? combineTupleTypeWithTecursion(T.slice(1), { ...E, ...T[0] }) : E
}

const testData = [{ a: 'hello world' }, { b: 100 }];
// 此時函數的返回值爲 { a: 'hello world', b: 100 }
combineTupleTypeWithTecursion(testData);
複製代碼

看到這兒，相信聰明的同窗一會兒就懂了，原來類型的遞歸與普通函數的遞歸本質上是同樣的。若是觸發結束條件，就直接返回，不然就一直地遞歸調用下去，所傳遞的第二個參數用來保存上一次遞歸的計算結果。

固然熟悉遞歸的同窗都知道，常見的編程語言中，遞歸行爲很是消耗計算機資源的，一旦超出了最大限制那麼程序就會崩潰。同理類型中的遞歸也是同樣的，若是遞歸地過深，類型系統同樣會崩潰，因此這裏的代碼你們理解就好，儘可能不要在生產環境使用哈。

小結

還記得一開始提出的思考題嗎？其實經過上述的學習，咱們徹底能夠自信地說出，Typescript 的 Type 自己也是一套完備的編程語言，甚至能夠說是完備的圖靈語言。所以類型自己也是能夠用來編程的，你徹底能夠用它來編寫一些有趣的東西，更別說是搞定平常開發中遇到的簡單的業務場景了。

"高級用法" 的使用場景與價值

哪些用法能夠被稱爲 "高級用法"

其實所謂 "高級用法"，不過是用來解決某些特定的場景而產生的特定的約定俗稱的寫法或者語法糖。那高級用法重要嗎？重要，也不重要。怎理解呢，根據編程中的 "二八原則"，20%的知識儲備已經能夠解決80%的需求問題，可是這剩餘的20%，就是入門與熟練的分水嶺。

其實只要當咱們仔細翻閱一遍官方提供的 handbook，就已經能夠應付平常開發了。可是就像本文一開頭說的那樣，你是否以爲：

  1. Typescript 在某些場景下用起來很費勁，遠不及 Javascript 靈活度的十分之一。
  2. 你是否爲本身使用 Javascript 中了某些 騷操做 用極簡短的代碼解決了某個複雜的代碼而沾沾自喜，但卻爲不正確的 返回類型 撓禿了頭。
  3. 你是否明知用了若干 as xxx 會讓你的代碼看起來很挫，但卻無能爲力，含恨而終。

同窗，當你使用某種辦法解決了上述的這些問題，那麼這種用法就能夠被稱做 "高級用法"。

舉例說明 "高級用法" 的使用場景

舉個栗子：在 Redux 中有一個叫做 combineReducers 的函數，由於某些場景，咱們須要增長一個 combineReducersParamFactory 的函數，該函數支持傳入多個函數，傳入函數的返回值爲做爲combineReducers 的入參，咱們須要整合多個入參數函數的返回值，並生成最終的對象供 combineReducers 函數使用。

思考一下邏輯，發現其實並不複雜，用 Javascript 能夠很容易地實現出來：

/** * 合併多個參數的返回數值並返回 * @param { Function[] } reducerCreators * @returns { Object } */
function combineReducersParamFactory(...reducerCreators) {
  return reducerCreators.reduce((acc, creator) => ({ ...acc, ...creator() }), {})
}

// test ...

function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

const ret = combineReducersParamFactory(
  () => ({ todosReducer }),
  () => ({ counterReducer })
);
// { todosReducer: [Function: todosReducer], counterReducer: [Function: counterReducer] }
複製代碼

但若是用須要配備對應的類型，應該如何編寫呢？

type Combine<T> = (T extends any ? (args: T) => any : never) extends (args: infer A) => any ? A : never;

/**
 * 合併多個參數的返回數值並返回
 * @param { Function[] } reducerCreators
 * @returns { Object }
 */
function combineReducersParamFactory<T extends ((...args) => object)[]>(...reducerCreators: T): Combine<ReturnType<T[number]>> {
  return reducerCreators.reduce<any>((acc, creator) => ({ ...acc, ...creator() }), {});
}

// test ...

function todosReducer(state: object[], action: { [x: string]: string}) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

function counterReducer(state: number, action: { [x: string]: string}) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// 這裏不須要顯示傳入類型，這裏就能夠獲得正確的代碼提示
const ret = combineReducersParamFactory(
  () => ({ todosReducer }),
  () => ({ counterReducer })
);
// { todosReducer: [Function: todosReducer], counterReducer: [Function: counterReducer] }
複製代碼

你看，類型通過精心編排以後，就是可讓調用者不增長任何負擔的前提下，享受到代碼提示的快樂。

小結

通過這一章節的學習，咱們能夠明確瞭解到，通過咱們精心編排的類型，能夠變得很是的智能，可讓調用者幾乎零成本地享受到代碼提示的快樂。或許在編排類型時所耗費的時間成本比較大，可是一旦咱們編排完成，就能夠極大地減小調用者的腦力負擔，讓調用者享受到編程的快樂。

類型推導與泛型操做符

流動的類型（類型編寫思路）

熟悉 函數式編程 的同窗必定對 數據流動 的概念有較爲深入的理解。當你在 "上游" 改變了一個值以後，"下游" 相關的會跟着自動更新。有 響應式編程 經驗的同窗這是時候應該火燒眉毛地想舉手了，同窗把手放下，這裏咱們並不想深刻地討論 流式編程思想，之因此引出這些概念，是想類比出本小節的重點: 流動的類型。

是的，編寫類型系統的思路是能夠借鑑 函數式編程 的思想的。所以某一個類型發生變化時，其餘相關的類型也會自動更新，而且當代碼的臃腫到不可維護的時候，你會獲得一個友好的提示，整個類型系統就好像一個被精心設計過的約束系統。

Typescript 代碼哲學

聊完了類型系統的編寫思路，我們再來聊一聊代碼哲學。其實之因此如今 Typescript 愈來愈火，撇開哪些聊爛了的優點不談，其實最大的優點在於強大的類型表現能力，以及編輯器（VSCode）完備的代碼提示能力。

那麼在這些優點的基礎上，我我的拓展了一些編碼哲學（習慣），這裏見仁見智，大佬輕噴~：

  1. 減小沒必要要的顯式類型定義，儘量多地使用類型推導，讓類型的流動像呼吸同樣天然。
  2. 儘量少地使用 any 或 as any，注意這裏並非說不能用，而是你判斷出目前狀況下使用 any 是最優解。
  3. 若是肯定要使用 any 做爲類型，優先考慮一下是否可使用 unknown 類型替代，畢竟 any 會破壞類型的流動。
  4. 儘量少地使用 as xxx，若是大量使用這種方式糾正類型，那麼大機率你對 類型流動 理解的還不夠透徹。

常見類型推導實現邏輯梳理與實踐入門

類型的傳遞（流動）

前面咱們說到，類型是具有流動性的，結合 響應式編程 的概念其實很容易理解。這一小節咱們將列舉幾個常見的例子，來和你們具體講解一下。

有編程經驗的同窗都知道，數據是能夠被傳遞的，同理，類型也能夠。

你可用 type 建立一個類型指針，指向對應的類型，那麼就能夠實現類型的傳遞，固然你也能夠理解爲指定起一個別名，或者說是拷貝，這裏見仁見智，可是經過上述方法能夠實現類型的傳遞，這是顯而易見的。

type RawType = { a: string, b: number };

// 這裏就拿到了上述類型的引用
type InferType = RawType; // { a: string, b: number };
複製代碼

一樣，類型也能夠隨着數據的傳遞而傳遞：

var num: number = 100;
var num2  = num;

type Num2Type = typeof num2; // number
複製代碼

也正是依賴這一點，Typescript 才得以實現 類型檢查、定義跳轉 等功能。

到這裏熟悉 流式編程 的同窗就要舉手了：你光說了類型的 傳遞，輸入 與 輸出，那我若是但願在類型 傳遞 的過程當中對它進行操做，該怎麼作呢？同窗你不要急，這正是我下面所想要講的內容。

類型的過濾與分流

在上一小節中，咱們反覆地扯到了 函數式編程、響應式編程、流式編程 這些抽象的概念，其實並非跑題，而是者二者的思想（理念）實在太類似了，在本小節後續的講解中，我還會一直延用這些概念幫助你們理解。翻看一下經常使用 函數式編程 的庫，無論是 Ramda 、RXJS 仍是咱們耳熟能詳的 lodash 、underscore，裏面必定有一個操做符叫做 filter，也就是對數據流的過濾。

這個操做符的使用頻率必定遠超其餘操做符，那麼這麼重要的功能，咱們在類型系統中該如何實現呢？

要解決這個問題，這裏咱們先要了解一個在各大 技術社區/平臺 搜索頻率很是高的一個問題:

TypeScript中 的 never 類型具體有什麼用？

既然這個問題搜索頻率很是之高，這裏我也就不重複做答，有興趣的同窗能夠看一下尤大大的回答： TypeScript中的never類型具體有什麼用？ - 尤雨溪的回答 - 知乎。

這裏咱們簡單總結一下：

  1. never 表明空集。
  2. 經常使用於用於校驗 "類型收窄" 是否符合預期，就是寫出類型絕對安全的代碼。
  3. never 常被用來做 "類型兜底"。

固然上面的總結並不完整，但已經足夠幫助理解本小節內容，感興趣的同窗能夠自行查閱相關資料。

上面提到了 "類型收窄"，這與咱們的目標已經十分接近了，固然咱們還須要瞭解 never 參與類型運算的相關表現：

type NeverTest = string | never // stirng
type NeverTest2 = string & never // never
複製代碼

重要的知識出現了：T | never，結果爲 T。

看到這裏，相信聰明的同窗們已經有思路了，咱們能夠用 never 來過濾掉 聯合類型(Union Types) 中不和指望的類型，其實這個 泛型操做符 早在 Typescript 2.8 就已經被加入到了官方文檔中了。

/** * Exclude from T those types that are assignable to U */
type Exclude<T, U> = T extends U ? never : T;
複製代碼

相信通過這麼長時間的學習，看到這裏你必定很容易就能這種寫法的思路。

好了，講完了 過濾，咱們再來說講 分流。類型 分流 的概念其實也不難理解，這個概念經常與邏輯判斷一同出現，畢竟從邏輯層面來說，聯合類型(Union Types) 本質上仍是用來描述 或 的關係。一樣的概念若是引入到 流式編程 中，就天然而然地會引出 分流。換成打白話來說，就是不一樣數據應被分該發到不一樣的 管道 中，同理，類型也須要。

那麼這麼經常使用的功能，在 Typescript 中如何處理呢？其實這種常見的問題，官方也很是貼心地爲咱們考慮到了，那就是：類型守衛（Type guard）。網上對 類型守衛（Type guard） 有講解的文章很是的多，這裏也不做贅述，有興趣的同窗能夠自行搜索學習。咱們這裏用一個簡單的栗子簡單地演示一下用法：

function foo(x: A | B) {
  if (x instanceof A) {
    // x is A
  } else {
		// x is B
  }
}
複製代碼

能夠觸發類型守衛的常見方式有：typeof、instanceof、in、==、 ===、 !=、 !== 等等。

固然在有些場景中，單單經過以上的方式不能知足咱們的需求，該怎麼辦呢？其實這種問題，官方也早已經幫我考慮到了：使用 is 關鍵字自定義 類型守衛（Type guard）。

// 注意這裏須要返回 boolean 類型
function isA(x): x is A {
  return true;
}

// 注意這裏須要返回 boolean 類型
function isB(x): x is B {
  return x instanceof B;
}

function foo2(x: unknown) {
  if (isA(x)) {
    // x is A
  } else {
    // x is B
  }
}
複製代碼

小結

這一章節中，咱們經過類比 響應式編程、流式編程 的概念方式，幫助你們更好地理解了 類型推導 的實現邏輯與思路，相信通過了這一章節的學習，咱們對 Typescript 中的類型推導又有了更加深刻的理解。不過這一章引入的抽象的概念比較多，也比較雜，基礎不是太好的同窗須要多花點時間翻看一下相關資料。

【未完待續...】常見泛型操做符實現邏輯梳理與實踐入門

定製化擴展你的 Typescript

Typescript Service Plugins 的產生背景、功能定位、基礎使用

產生背景

提及 Typescript 的編譯手段大部分同窗應該都不會陌生，不管是在 webpack 中使用 ts-loader 或 babel-loader，仍是在 gulp 中使用 gulp-typescript，亦或是直接使用 Typescript 自帶的命令行工具，相信大部分同窗也都已經得心應手了，這裏不作贅述。

這裏咱們把目光聚焦到擼碼體驗上，相信有使用過 Typescritp 開發前端項目的同窗必定有過各類各樣的困擾，這裏列舉幾個常見的問題：

  1. 在處理 CSS Module 的樣式資源的類型定義時，不知足於使用 declare module '*.module.css' 這種毫無卵用的類型定義。
  2. 不想給編輯器安裝各類各樣的插件，下次啓動編輯器的時間明顯變長，小破電腦不堪重負，並且每次重裝系統都是一次噩夢降臨。
  3. 不想妥協於同事的使用習慣，想使用本身熟悉的編輯器。
  4. 並不知足於官方已有的代碼提示，想讓本身的編輯器更加地貼心與智能。
爲了提供更加貼心的開發體驗，Typescript 官方提供一種解決思路——Typescript Service Plugins

功能定位

如下內容摘自官方 WIKI：

In TypeScript 2.2 and later, developers can enable language service plugins to augment the TypeScript code editing experience.

其實官方文檔已經寫的很清楚了，這玩意兒旨在優化 Typescript 代碼的 編寫體驗。因此想利用這玩意兒改變編譯結果或是想自創新語法的仍是省省吧 嗯，我在說我本身呢！

那麼 Typescript Service Plugins 的能夠用來作哪些事呢？

官方也有明確的回答：

plugins are for augmenting the editing experience. Some examples of things plugins might do:

  • Provide errors from a linter inline in the editor
  • Filter the completion list to remove certain properties from window
  • Redirect "Go to definition" to go to a different location for certain identifiers
  • Enable new errors or completions in string literals for a custom templating language

一樣官方也給出了不推薦使用 Typescript Service Plugins 的場景：

Examples of things language plugins cannot do:

  • Add new custom syntax to TypeScript
  • Change how the compiler emits JavaScript
  • Customize the type system to change what is or isn't an error when running tsc

好了，相信讀到這裏你們必定對 Typescript Service Plugins 有了一個大體的瞭解，下面我會介紹一下 Typescript Service Plugins 的安裝與使用。

如何安裝以及如何配置 Typescript Service Plugins

Typescript Service Plugins 的安裝方法
# 就像安裝普通的 `npm` 包同樣
npm install --save-dev your_plugin_name
複製代碼
如何在 tsconfig.json 中配置 Typescript Service Plugins
{
  "compilerOptions": {
    /** compilerOptions Configuration ... */
    "noImplicitAny": true,
    "plugins": [
      {
        /** 配置插件名稱，也能夠填寫本地路徑 */
        "name": "sample-ts-plugin"
        /** 這裏能夠給插件傳參 ... */
      }
      /** 支持同時引入多個插件 ... */
    ]
  }
}
複製代碼
幾個須要注意的地方:
  1. 若是使用 VSCode 開發，記得務必 using the workspace version of typescript，不然可能致使插件不生效。
  2. Typescript Service Plugins 產生的告警或者報錯不會影響編譯結果。
  3. 若是配置完了不生效能夠先嚐試重啓你的編輯器。

市面上已有的 Typescript Service Plugins 舉例介紹

具體使用細節請用編輯器打開我提供的 demo，自行體驗。

示例插件：typescript-plugin-css-modules

插件安裝
npm install --save-dev typescript-styled-plugin typescript
複製代碼
配置方法
在 tsconfig.json 中增長配置
{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin"
        /** 具體配置參數請查看官方文檔 */
      }
    ]
  }
}
複製代碼
插件基本介紹與使用場景

此插件能夠用來緩解在使用 CSS Module 時沒有代碼提示的困境，主要思路就是經過讀取對應的 CSS Module 文件並解析成對應的 AST，並生成對應的類型文件從而支持對應的代碼提示。可是根據反饋來看，彷佛某些場景下表現並不盡人意，是否值得大規模使用有待商榷。

相似實現思路的還有 typings-for-css-modules-loader，功能來講確定是 webpack loader 更增強大，可是 Typescript Plugin 更加輕量、入侵度也越低，取捨與否，見仁見智吧

示例插件：typescript-eslint-language-service

插件安裝
npm install --save-dev eslint typescript-eslint-language-service
複製代碼
配置方法

在 .eslintrc.* 文件中，添加對應的 eslint 配置

在 tsconfig.json 中增長配置
{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-eslint-language-service"
        /** 默認會讀取 `.eslintrc.*` 文件 */
        /** 具體配置參數請查看官方文檔 */
      }
    ]
  }
}
複製代碼
插件基本介紹與使用場景

此插件可讓 Typescript 原生支持 eslint 檢查及告警，編輯器不須要安裝任何插件便可自持，可是報錯並不影響編譯結果。

示例插件：typescript-styled-plugin

插件安裝
npm install --save-dev typescript-styled-plugin typescript
複製代碼
配置方法
在 tsconfig.json 中增長配置
{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin"
        /** 具體配置參數請查看官方文檔 */
      }
    ]
  }
}
複製代碼
插件基本介紹與使用場景

此插件能夠爲 styled-components 的樣式字符串模板提供 屬性/屬性值 作語法檢查。 同時也推薦安裝 VSCode 插件 vscode-styled-components，爲你的樣式字符串模板提供代碼提示以及語法高亮。

如何本身寫一個 Typescript Service Plugins

未完待續...

參考資料連接

  1. Using the Compiler API
  2. Using the Language Service API
  3. Writing a Language Service Plugin
  4. Useful Links for TypeScript Issue Management

總結

未完待續...

Q&A（歡迎評論區補充）

能夠利用 Typescript Service Plugin（例如配置 eslint 規則）阻塞編譯或者在編譯時告警嗎？

答：不能夠，全部可使用 Typescript Plugin 的場景必定都是編碼階段的，並且官方對 plugins 的定位侷限在了 只改善編寫體驗 這方面，你並不能自定義語法或者自定義規則來改變編譯結果，不過你能夠考慮使用自定義 compiler，固然這是另外一個話題了。

如下引用自官方文檔：

TypeScript Language Service Plugins ("plugins") are for changing the editing experience only. The core TypeScript language remains the same. Plugins can't add new language features such as new syntax or different typechecking behavior, and plugins aren't loaded during normal commandline typechecking or emitting.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程