摘要：怎么影響了我的思考方式對(duì)前端開(kāi)發(fā)者來(lái)說(shuō)，能強(qiáng)化了面向接口編程這一理念。使用的過(guò)程就是在加深理解的過(guò)程，確實(shí)面向接口編程天然和靜態(tài)類型更為親密。

電影《降臨》中有一個(gè)觀點(diǎn)，語(yǔ)言會(huì)影響人的思維方式，對(duì)于前端工程師來(lái)說(shuō)，使用 typescript 開(kāi)發(fā)無(wú)疑就是在嘗試換一種思維方式做事情。

其實(shí)直到最近，我才開(kāi)始系統(tǒng)的學(xué)習(xí) typescript ，前后大概花了一個(gè)月左右的時(shí)間。在這之前，我也在一些項(xiàng)目中模仿他人的寫法用過(guò) TS，不過(guò)平心而論，在這一輪系統(tǒng)的學(xué)習(xí)之前，我并不理解 TS。一個(gè)多月前，我理解的 TS 是一種可以對(duì)類型進(jìn)行約束的工具，但是現(xiàn)在才發(fā)現(xiàn) TS 并不簡(jiǎn)單是一個(gè)工具，使用它，會(huì)影響我寫代碼時(shí)的思考方式。

對(duì)前端開(kāi)發(fā)者來(lái)說(shuō)，TS 能強(qiáng)化了「面向接口編程」這一理念。我們知道稍微復(fù)雜一點(diǎn)的程序都離不開(kāi)不同模塊間的配合，不同模塊的功能理應(yīng)是更為清晰的，TS 能幫我們梳理清不同的接口。

TS 對(duì)我的思考方式的影響之一在于，我現(xiàn)在會(huì)把考慮抽象和拓展看作寫一個(gè)模塊前的必備環(huán)節(jié)了。當(dāng)然一個(gè)好的開(kāi)發(fā)者用任何語(yǔ)言寫程序，考慮抽象和拓展都會(huì)是一個(gè)必備環(huán)節(jié)，不過(guò)如果你在日常生活中使用過(guò)清單，你就會(huì)明白 TS 通過(guò)接口將這種抽象明確為具體的內(nèi)容的意義所在了，任何沒(méi)有被明確的內(nèi)容，其實(shí)都有點(diǎn)像是可選的內(nèi)容，往往就容易被忽略。

舉例來(lái)說(shuō)，比如說(shuō)我們用 TS 定義一個(gè)函數(shù)，TS 會(huì)要求我們對(duì)函數(shù)的參數(shù)及返回值有一個(gè)明確的定義，簡(jiǎn)單的定義一些類型，卻能幫助我們定位函數(shù)的作用，比如說(shuō)我們?cè)O(shè)置其返回值類型為 void ，就明確的表明了我們想利用這個(gè)函數(shù)的副作用；

把抽象明確下來(lái)，對(duì)后續(xù)代碼的修改也非常有意義，我們不用再擔(dān)心忘記了之前是怎么構(gòu)想的呢，對(duì)多人協(xié)作的團(tuán)隊(duì)來(lái)說(shuō)，這一點(diǎn)也許更為重要。

當(dāng)然使用 jsdoc 等工具也能把對(duì)函數(shù)的抽象明確下來(lái)，不過(guò)并沒(méi)有那么強(qiáng)制，所以效果不一定會(huì)很好，不過(guò) jsdoc 反而可以做為 TS 的一種補(bǔ)充。

TS 還能讓我更自信的寫前端代碼，這種自信來(lái)自 TS 可以幫我們避免很多可能由于自己的忽略造成的 bug。實(shí)際上，關(guān)于 TS 輔助避免 bug 方面存在專門的研究，一篇名為To Type or Not to Type: Quantifying Detectable Bugs in JavaScript 的論文，表明使用 TS 進(jìn)行靜態(tài)類型檢查能幫我們至少減少 15% 以上的 bug （這篇論文的研究過(guò)程也很有意思，感興趣可以點(diǎn)擊鏈接閱讀）。

可以舉一個(gè)例子來(lái)說(shuō)明，TS 是怎么給我?guī)?lái)這種自信的。

下面這條語(yǔ)句，大家都很熟悉，是 DOM 提供依據(jù) id 獲取元素的方法。

const a = document.getElementById("a")

對(duì)我自己來(lái)說(shuō)，使用 TS 之前，我忽略了document.getElementById的返回值還可能是 null，這種不經(jīng)意的忽略也許在未來(lái)就會(huì)造成一個(gè)意想不到的 bug。

使用 TS，在編輯器中就會(huì)明確的提醒我們 a 的值可能為 null。

我們并不一定要處理值 null 的情況，使用 const a = document.getElementById(‘id")! 可以明確告訴 TS ，它不會(huì)是 null，不過(guò)至少，這時(shí)候我們清楚的知道自己想做什么。

使用 TS 后，感覺(jué)自己通過(guò)瀏覽器查文檔的時(shí)間明顯少了很多。無(wú)論是庫(kù)還是原生的 js 或者 nodejs，甚至是自己團(tuán)隊(duì)其它成員定義的類型。結(jié)合 VSCode ，會(huì)有非常智能的提醒，也可以很方便看到相應(yīng)的接口的確切定義。使用的過(guò)程就是在加深理解的過(guò)程，確實(shí)「面向接口編程」天然和靜態(tài)類型更為親密。

比如說(shuō)，我們使用 Color 這個(gè)庫(kù)，VSCode 會(huì)有下面這類提醒：

不用去查文檔，我們就能看到其提供的 API。
如果我們?nèi)タ催@個(gè)庫(kù)的源文件會(huì)發(fā)現(xiàn)，能有提醒的原因在于存在下面這樣的定義：

// @types/color/index.d.TS
interface Color {
    toString(): string;
    toJSON(): Color;
    string(places?: number): string;
    percenTString(places?: number): string;
    array(): number[];
    object(): { alpha?: number } & { [key: string]: number };
    unitArray(): number[];
    unitObject(): { r: number, g: number, b: number, alpha?: number };
    ...
}

這種提醒無(wú)疑能增強(qiáng)開(kāi)發(fā)的效率，雖然定義類型在早期會(huì)花費(fèi)一定的時(shí)間，但是對(duì)于一個(gè)長(zhǎng)期維護(hù)的比較大型的項(xiàng)目，使用 TS 非常值得。

也許是因?yàn)?，我之前從未系統(tǒng)的學(xué)習(xí)過(guò)一門靜態(tài)語(yǔ)言，所以從開(kāi)始學(xué)到感覺(jué)自己基本入門了 TS 花的精力還挺多的。
學(xué)習(xí) TS 的過(guò)程中，主要參考了以下這些資料，你可以直接點(diǎn)擊鏈接查看，也可以繼續(xù)看后文，我對(duì)這些資料有著一些簡(jiǎn)單的分析。

TypeScript handbook — book

TypeScript Deep Dive — book

TypeScript-React-Starter — github

react-typescript-cheaTSheet — github

Advanced Static Types in TypeScript — egghead.io

Use TypeScript to develop React Applications — egghead.io

Practical Advanced TypeScript — egghead.io

Ultimate React Component Patterns with Typescript 2.8 — medium

The TypeScript Tax — medium

在閱讀上述資料的過(guò)程中，我使用 TS 重寫了一個(gè)基于 CRA 的簡(jiǎn)單但是很完整的前端項(xiàng)目，現(xiàn)在覺(jué)得，使用 TS 來(lái)開(kāi)發(fā)工作中的常見(jiàn)需求，應(yīng)該都能應(yīng)對(duì)了。如果你是剛剛開(kāi)始學(xué) TS，不妨參照下面的路徑學(xué)習(xí)。

不要誤解，并非從零搭建。學(xué)習(xí)實(shí)踐性很強(qiáng)的內(nèi)容時(shí)，邊學(xué)邊練習(xí)可以幫我們更快的掌握。如果你使用 React，借助 yarn 或者 create-react-app，可輕易的構(gòu)造一個(gè)基于 TS 的項(xiàng)目。

在命令行中執(zhí)行下述命令即可生產(chǎn)可直接使用的項(xiàng)目：

# 使用 yarn
$ yarn create react-app TS-react-playground --typescript
# 使用 npx
$ npx create-react-app TS-react-playground --typescript

隨后如果需要，可以在tsconfig.json中添加額外的配置。

就我個(gè)人而言，我喜歡同步配置 TS-lint 與 prettier，已免去之后練習(xí)過(guò)程中格式的煩惱。配置方法可以參考 Configure TypeScript, TSLint, and Prettier in VS Code for React Native Development 這篇文章，或者看我的配置記錄。

如果你不使用 React，TypeScript 官方文檔首頁(yè)就提供了 TS 配合其它框架的使用方法。

我一直覺(jué)得，學(xué)習(xí)一項(xiàng)新的技能，清楚其邊界很重要，相關(guān)的細(xì)節(jié)知識(shí)則可以在后續(xù)的使用過(guò)程中逐步的了解。我們都知道，TS 是 JS 的超集，所以學(xué)習(xí) TS 的第一件事情就是要找到「超」的邊界在哪里。

這個(gè)階段，推薦閱讀 TypeScript handbook — book，這本書其實(shí)也是官方推薦的入門手冊(cè)。這里給的鏈接是中文翻譯版的鏈接，翻譯的質(zhì)量非常好，雖然內(nèi)容沒(méi)有英文官方文檔新，不過(guò)學(xué)習(xí)新的東西最好還是從自己最熟悉的內(nèi)容入手，所以不妨先看中文文檔。閱讀過(guò)程中遇到的示例，都可以在上面搭建的 TS-playground 中練習(xí)一下，熟悉一下。

TS 做為 JS 的超集，其「超」其實(shí)主要在兩方面

TS 為 JS 引入了一套類型系統(tǒng)；

TS 支持一些非 ECMAScript 正式標(biāo)準(zhǔn)的語(yǔ)法，比如裝飾器；

關(guān)于第二點(diǎn)，TS 做的事情有些類似 babel，所以也有人說(shuō) TS 是 babel 最大的威脅。不過(guò)這些新語(yǔ)法，很可能你早就使用過(guò)，本文不再贅述。

比較難理解的其實(shí)是這套類型系統(tǒng)，這套類型系統(tǒng)有著自己的聲明空間（Declaration Spaces），具有自己的一些關(guān)鍵字和語(yǔ)法。

對(duì)我來(lái)說(shuō)，學(xué)習(xí) TS 最大的難點(diǎn)就在于這套類型系統(tǒng)中有著一些我之前很少了解的概念，在這里可以大致的梳理一下。

編程實(shí)際上就是對(duì)數(shù)據(jù)進(jìn)行操作和加工的過(guò)程。類型系統(tǒng)能輔助我們對(duì)數(shù)據(jù)進(jìn)行更為準(zhǔn)確的操作。TypeScript 的核心就在于其提供一套類型系統(tǒng)，讓我們對(duì)數(shù)據(jù)類型有所約束。約束有時(shí)候很簡(jiǎn)單，有時(shí)候很抽象。

TS 支持的類型如下：boolean,number,string,[],Tuple,enum,any,void,null,undefined,never,Object。

TS 中更復(fù)雜的數(shù)據(jù)結(jié)構(gòu)其實(shí)都是針對(duì)上述類型的組合，關(guān)于類型的基礎(chǔ)知識(shí)，推薦先閱讀基礎(chǔ)類型一節(jié)，這里只討論最初對(duì)我造成困擾的概念：

enum：

現(xiàn)在想想 enum ?枚舉類型非常實(shí)用，很多其它的語(yǔ)言都內(nèi)置了這一類型，合理的使用枚舉，能讓我們的代碼可讀性更高，比如：

const enum MediaTypes {
  JSON = "application/json"
}

fetch("https://swapi.co/api/people/1/", {
  headers: {
      Accept: MediaTypes.JSON
  }
})
.then((res) => res.json())

never：

never 代表代碼永遠(yuǎn)不會(huì)執(zhí)行到這里，常?？梢詰?yīng)用在 switch case 的 default 中，防止我們遺漏 case 未處理，比如：

enum ShirTSize {
  XS,
  S,
  M,
  L,
  XL
}

function assertNever(value: never): never {
  console.log(Error(`Unexpected value "${value}"`));
}

function prettyPrint(size: ShirTSize) {
  switch (size) {
      case ShirTSize.S: console.log("small");
      case ShirTSize.M: return "medium";
      case ShirTSize.L: return "large";
      case ShirTSize.XL: return "extra large";
        // case ShirTSize.XS: return "extra small";
      default: return assertNever(size);
  }
}

下面是上述代碼在我的編輯器中的截圖，編輯器會(huì)通過(guò)報(bào)錯(cuò)告知我們還有未處理的情況。

類型斷言：

類型斷言其實(shí)就是你告訴編譯器，某個(gè)值具備某種類型。有兩種不同的方式可以添加類型斷言：

someValue

someValue as string

關(guān)于類型斷言，我看文檔時(shí)的疑惑點(diǎn)在于，我想不到什么情況下會(huì)使用它。后來(lái)發(fā)現(xiàn)，當(dāng)你知道有這么一個(gè)功能，在實(shí)際使用過(guò)程中，就會(huì)發(fā)現(xiàn)能用得著，比如說(shuō)遷移遺留項(xiàng)目時(shí)。

Generics(泛型)：

泛型讓我們的數(shù)據(jù)結(jié)構(gòu)更為抽象可復(fù)用，因?yàn)檫@種抽象，也讓它有時(shí)候不是那么好理解。泛型的應(yīng)用場(chǎng)景非常廣泛，比如：

type Nullable = {
  [P in keyof T]: T[P] | null;
};

能夠讓某一種接口的子類型都可以為 null。我記得我第一次看到泛型時(shí)也覺(jué)得它很不好理解，不過(guò)后來(lái)多用了幾次后，就覺(jué)得還好了。

interface 和 type

interface 和 type 都可以用來(lái)定義一些復(fù)雜的類型結(jié)構(gòu)，最很多情況下是通用的，最初我一直沒(méi)能理解它們二者之間區(qū)別在哪里，后來(lái)發(fā)現(xiàn)，二者的區(qū)別在于：

* `interface`創(chuàng)建了一種新的類型，而 type 僅僅是別名，是一種引用；
* `type` 不能被 `extends` 和 `implements`

在視頻 Use Types vs. Interfaces from @volkeron on @eggheadio 中，通過(guò)實(shí)例對(duì)二者的區(qū)別有更細(xì)致的說(shuō)明。

類型保護(hù)

TS 編譯器會(huì)分析我們的程序并為某一個(gè)變量在指定的作用域來(lái)指明盡可能確切的類型，類型保護(hù)就是一種輔助確定類型的方法，下面的語(yǔ)句都可以用作類型保護(hù)：

* `typeof padding === "number"`
* `padder instanceof SpaceRepeatingPadder` 

一個(gè)應(yīng)用實(shí)例是結(jié)合 redux 中的 reducer 中依據(jù)不同的 type，TS 能分別出不同作用域內(nèi) action 應(yīng)有的類型。

類型映射

類型映射是 TypeScript 提供的從舊類型中創(chuàng)建新類型的一種方式。它們非常實(shí)用。比如說(shuō)，我們想要快速讓某個(gè)接口中的所有屬性變?yōu)榭蛇x的，可以按照下面這樣寫：

interface Person {
    name: string;
    age: number;
}
type PartialPerson = { [P in keyof Person]?: Person[P] }

還有一個(gè)概念叫做 映射類型，TS 內(nèi)置一些映射類型（實(shí)際上是一些語(yǔ)法糖），讓我們可以方便的進(jìn)行類型映射。比如通過(guò)內(nèi)置的映射類型 Partial ，上面的表達(dá)式可以按照下面這樣寫：

interface Person {
    name: string;
    age: number;
}
type PartialPerson = Partial

常見(jiàn)的映射類型，可以參看這篇文章 — TS 一些工具泛型的使用及其實(shí)現(xiàn)，除了做為語(yǔ)法糖內(nèi)置在 TS 中的映射類型（如Readonly），這篇文章中也提到了一些未內(nèi)置最 TS 中但是很實(shí)用的映射類型（比如 Omit）。

第三方的庫(kù)，如何得到類型支持

我們很難保證，第三方的庫(kù)都原生支持 TS 類型，在你使用過(guò)一段時(shí)間 TS 后，你肯定安裝過(guò)類似 @types/xxx 的類型庫(kù)，安裝類似這樣的庫(kù)，實(shí)際上就安裝了某個(gè)庫(kù)的描述文件，對(duì)于這些第三方庫(kù)的類型的定義，都存儲(chǔ)在DefinitelyTyped 這個(gè)倉(cāng)庫(kù)中，常用的第三方庫(kù)在這里面都有定義了。在 TypeSearch 中可以搜索第三方庫(kù)的類型定義包。

關(guān)于類型，還有一些很多其它的知識(shí)點(diǎn)，不過(guò)一些沒(méi)有那么常用，一些沒(méi)有那么難理解，在此暫不贅述。

我首次看完《TypeScript handbook》時(shí)，確實(shí)覺(jué)得自己懂了不少，但是發(fā)現(xiàn)動(dòng)手寫代碼，還是會(huì)經(jīng)?？ㄗ?。追其原因，可能在于一下子接收了太多的新概念，一些概念并沒(méi)有來(lái)得及消化，這時(shí)候我推薦看下面這門網(wǎng)課：

Advanced Static Types in TypeScript — egghead.io

看視頻算是一種比較輕松的學(xué)習(xí)方式，這門課時(shí)長(zhǎng)大概是一個(gè)小時(shí)。會(huì)把 TypeScript handbook 這本書中的一些比較重要的概念，配合實(shí)例講解一次。可以跟著教程把示例敲一次，在 vscode 中多看看給出的提示，看完之后，對(duì) TS 的一些核心概念，肯定會(huì)有更深的理解。

想要真的掌握 TS，少不了實(shí)踐。模仿也是一種好的實(shí)踐方式，已 React + TypeScript 為例，比較推薦的模仿內(nèi)容如下：

TypeScript-React-Starter ，這是微軟為 TS 初學(xué)者提供的一個(gè)非常好的資料，可以繼續(xù)使用我們上面構(gòu)建的 playground ，參照這個(gè)倉(cāng)庫(kù)的 readme 寫一次，差不多就能知道 TS 結(jié)合 React 的基本用法了；

GitHub - react-typescript-cheaTSheet，這個(gè)教程也比較簡(jiǎn)單，不過(guò)上面那個(gè)教程更近了一步，依據(jù)其 readme 繼續(xù)改造我們的 playground 后，我們能知道，React + Redux + TypeScript 該如何配合使用；

react-redux-typescript-guide ，這個(gè)教程則展示了基于 TypeScript 如何應(yīng)用一些更復(fù)雜的模式，我們也可以模仿其提供的用法，將其應(yīng)用到我們自己的項(xiàng)目中；

Ultimate React Component Patterns with Typescript 2.8 ，這篇文章則可以做為上述內(nèi)容的補(bǔ)充，其在掘金上有漢語(yǔ)翻譯，點(diǎn)贊量非常高，看完之后，差不多就能了解到如果使用 TS 應(yīng)對(duì)各種 React 組件模式了。

Use TypeScript to develop React Applications — egghead.io，隨后如果想再輕松一點(diǎn)，則可以再看看這個(gè)網(wǎng)課，跟著別人的講解，回頭看看自己模仿著寫的一些代碼，也許會(huì)有不同的感觸；

至此，你肯定就已經(jīng)具備了基礎(chǔ)的 TS 開(kāi)發(fā)能力，可以獨(dú)立的結(jié)合 TS 開(kāi)發(fā)相對(duì)復(fù)雜的應(yīng)用了。

當(dāng)然也許你并不會(huì)滿足于會(huì)用 TS，你還想知道 TS 的工作原理是什么。這時(shí)候推薦閱讀下面兩篇內(nèi)容：

TypeScript Compiler Internals · TypeScript Deep Dive ，TS 編譯的核心還是 AST，這篇文章講解了 TS 編譯的五個(gè)階段（ Scanner /Parser / Binder /Checker /Emitter ）分別是怎么工作的；

Learn how to contribute to the TypeScript compiler on GitHub through a real-world example，則是另外一篇比較好的了解 TS 運(yùn)行原理的資料。

關(guān)于 TS 的原理，我還沒(méi)有來(lái)得及仔細(xì)去看。不過(guò) AST 在前端中的應(yīng)用還真是多，待我補(bǔ)充更多的相關(guān)知識(shí)后，也許會(huì)對(duì) AST 有一個(gè)更全面的總結(jié)。

TS 當(dāng)然也不是沒(méi)有缺點(diǎn)，The TypeScript Tax 是一篇非常優(yōu)秀的文章，閱讀這篇文章能讓我們更為客觀看待 TS，雖然站在作者的角度看，TS 弊大于利，主要原因是 TS 提供的功能大多都可以用其它工具配合在一定程度上代替，而且類型系統(tǒng)會(huì)需要寫太多額外的代碼，類型系統(tǒng)在一定程度上也破壞了動(dòng)態(tài)語(yǔ)言的靈活性，讓一些動(dòng)態(tài)語(yǔ)言特有的模式很難在其中被應(yīng)用。作者最終的結(jié)論帶有很強(qiáng)的主觀色彩，我并不是非常認(rèn)可，但是這篇文章的分析過(guò)程非常精彩，就 TS 的各種特性和現(xiàn)在的 JS 生態(tài)進(jìn)行了對(duì)比，能讓我們對(duì) TS 有一個(gè)更全面的了解，非常推薦閱讀，也許你會(huì)和我一樣，看完這個(gè)分析過(guò)程，會(huì)對(duì) TS 更感興趣。

TS 每隔幾個(gè)月就會(huì)發(fā)布一個(gè)新的小版本，每個(gè)小版本在 TypeScript 官方博客 上都會(huì)有專門的說(shuō)明，可用用作跟進(jìn)學(xué)習(xí) TS 的參考。

下述參考內(nèi)容在文中，都有鏈接，如果都看過(guò)，則無(wú)需再重復(fù)查看了。

TypeScript handbook — book

TypeScript Deep Dive — book

TypeScript-React-Starter — github

react-typescript-cheaTSheet — github

Advanced Static Types in TypeScript — egghead.io

Use TypeScript to develop React Applications — egghead.io

Practical Advanced TypeScript — egghead.io

Ultimate React Component Patterns with Typescript 2.8 — medium

The TypeScript Tax — medium

你也可以來(lái)知乎專欄和我討論