TypeScript - 一種思維方式

電影《降臨》中有一個(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)目中模仿他人的寫(xiě)法用過(guò) TS官套,不過(guò)平心而論酒奶,在這一輪系統(tǒng)的學(xué)習(xí)之前蚁孔,我并不理解 TS。一個(gè)多月前惋嚎,我理解的 TS 是一種可以對(duì)類(lèi)型進(jìn)行約束的工具杠氢,但是現(xiàn)在才發(fā)現(xiàn) TS 并不簡(jiǎn)單是一個(gè)工具,使用它另伍,會(huì)影響我寫(xiě)代碼時(shí)的思考方式鼻百。

TS 怎么影響了我的思考方式

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

明確的模塊抽象過(guò)程

TS 對(duì)我的思考方式的影響之一在于勺爱,我現(xiàn)在會(huì)把考慮抽象和拓展看作寫(xiě)一個(gè)模塊前的必備環(huán)節(jié)了。當(dāng)然一個(gè)好的開(kāi)發(fā)者用任何語(yǔ)言寫(xiě)程序讯检,考慮抽象和拓展都會(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)單的定義一些類(lèi)型段磨,卻能幫助我們定位函數(shù)的作用,比如說(shuō)我們?cè)O(shè)置其返回值類(lèi)型為 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ǔ)充狼速。

更自信的寫(xiě)代碼

TS 還能讓我更自信的寫(xiě)前端代碼,這種自信來(lái)自 TS 可以幫我們避免很多可能由于自己的忽略造成的 bug卦停。實(shí)際上向胡,關(guān)于 TS 輔助避免 bug 方面存在專(zhuān)門(mén)的研究恼蓬,一篇名為 To Type or Not to Type: Quantifying Detectable Bugs in JavaScript 的論文,表明使用 TS 進(jìn)行靜態(tài)類(lè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棘街。

image

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

使用 TS 的過(guò)程就是一種學(xué)習(xí)的過(guò)程

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

比如說(shuō)淮逻,我們使用 Color 這個(gè)庫(kù)琼懊,VSCode 會(huì)有下面這類(lèi)提醒:

image

<figcaption class="" style="margin: 0px; padding: 4px 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; display: block; color: rgb(184, 184, 184); font-size: 0.85em; text-align: center; line-height: 1.5em;">TS 的智能提示</figcaption>

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

// @types/color/index.d.TSinterface 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ā)的效率,雖然定義類(lèi)型在早期會(huì)花費(fèi)一定的時(shí)間凸椿,但是對(duì)于一個(gè)長(zhǎng)期維護(hù)的比較大型的項(xiàng)目,使用 TS 非常值得翅溺。

一種學(xué)習(xí) typescript 的路徑

也許是因?yàn)槟月抑皬奈聪到y(tǒng)的學(xué)習(xí)過(guò)一門(mén)靜態(tài)語(yǔ)言髓抑,所以從開(kāi)始學(xué)到感覺(jué)自己基本入門(mén)了 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 重寫(xiě)了一個(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í)。

搭建 TS 運(yùn)行環(huán)境

不要誤解关噪,并非從零搭建鸟蟹。學(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 配合其它框架的使用方法秋秤。

理解關(guān)鍵的概念

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

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

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

  • TS 為 JS 引入了一套類(lèi)型系統(tǒng)遭赂;

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

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

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

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

一些 TS 中的新概念

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

TS 支持的類(lèi)型如下:boolean,number,string,[],Tuple,enum,any,void,null,undefined,never,Object翰铡。

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

enum:現(xiàn)在想想 enum 枚舉類(lèi)型非常實(shí)用,很多其它的語(yǔ)言都內(nèi)置了這一類(lè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ò)告知我們還有未處理的情況。

image

<figcaption class="" style="margin: 0px; padding: 4px 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; display: block; color: rgb(184, 184, 184); font-size: 0.85em; text-align: center; line-height: 1.5em;">如果有未處理的 case晌该,TS 會(huì)在編輯器中報(bào)錯(cuò)</figcaption>

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

  • <string>someValue

  • someValue as string

關(guān)于類(lèi)型斷言朝群,我看文檔時(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<T> = {  [P in keyof T]: T[P] | null;};

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

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

  • interface創(chuàng)建了一種新的類(lèi)型铺遂,而 type 僅僅是別名,是一種引用汛蝙;

  • 如果 type 使用了 union operator (|) 操作符烈涮,則不能將 type implements 到 class 上;

  • 如果 type 使用了 union(|) 操作符 窖剑,則不能被用以 extends interface

  • type 不能像 interface 那樣合并坚洽,其在作用域內(nèi)唯一;[1]

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

值得指出的是,TypeScript handbook 關(guān)于 type 和 interface 的區(qū)別還停留在 TS 2.0 版本,對(duì)應(yīng)章節(jié)現(xiàn)在的描述并不準(zhǔn)確跳昼,想要詳細(xì)了解般甲,可參考 Interface vs Type alias in TypeScript 2.7 這篇文章。

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

  • typeof padding === “number”

  • padder instanceof SpaceRepeatingPadder

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

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

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

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

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

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

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

關(guān)于類(lèi)型现使,還有一些很多其它的知識(shí)點(diǎn)低匙,不過(guò)一些沒(méi)有那么常用,一些沒(méi)有那么難理解碳锈,在此暫不贅述顽冶。

消化學(xué)到的新概念

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

Advanced Static Types in TypeScript — egghead.io

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

模仿和實(shí)踐

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

  • TypeScript-React-Starter 直撤,這是微軟為 TS 初學(xué)者提供的一個(gè)非常好的資料非竿,可以繼續(xù)使用我們上面構(gòu)建的 playground ,參照這個(gè)倉(cāng)庫(kù)的 readme 寫(xiě)一次谋竖,差不多就能知道 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)課躲叼,跟著別人的講解,回頭看看自己模仿著寫(xiě)的一些代碼企巢,也許會(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 [2] 是一篇非常優(yōu)秀的文章啸澡,閱讀這篇文章能讓我們更為客觀看待 TS袖订,雖然站在作者的角度看,TS 弊大于利嗅虏,主要原因是 TS 提供的功能大多都可以用其它工具配合在一定程度上代替著角,而且類(lèi)型系統(tǒng)會(huì)需要寫(xiě)太多額外的代碼,類(lèi)型系統(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 官方博客[3] 上都會(huì)有專(zhuān)門(mén)的說(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

參考

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末恨狈,一起剝皮案震驚了整個(gè)濱河市疏哗,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌禾怠,老刑警劉巖沃斤,帶你破解...
    沈念sama閱讀 216,470評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異刃宵,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)徘公,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)牲证,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人关面,你說(shuō)我怎么就攤上這事坦袍。” “怎么了等太?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,577評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵捂齐,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我缩抡,道長(zhǎng)奠宜,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,176評(píng)論 1 292
  • 正文 為了忘掉前任瞻想,我火速辦了婚禮压真,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蘑险。我一直安慰自己滴肿,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布佃迄。 她就那樣靜靜地躺著泼差,像睡著了一般贵少。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上堆缘,一...
    開(kāi)封第一講書(shū)人閱讀 51,155評(píng)論 1 299
  • 那天滔灶,我揣著相機(jī)與錄音,去河邊找鬼套啤。 笑死宽气,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的潜沦。 我是一名探鬼主播萄涯,決...
    沈念sama閱讀 40,041評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼唆鸡!你這毒婦竟也來(lái)了涝影?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,903評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤争占,失蹤者是張志新(化名)和其女友劉穎燃逻,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體臂痕,經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡伯襟,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了握童。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片姆怪。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖澡绩,靈堂內(nèi)的尸體忽然破棺而出稽揭,到底是詐尸還是另有隱情,我是刑警寧澤肥卡,帶...
    沈念sama閱讀 35,417評(píng)論 5 343
  • 正文 年R本政府宣布溪掀,位于F島的核電站,受9級(jí)特大地震影響步鉴,放射性物質(zhì)發(fā)生泄漏揪胃。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3 325
  • 文/蒙蒙 一氛琢、第九天 我趴在偏房一處隱蔽的房頂上張望只嚣。 院中可真熱鬧,春花似錦艺沼、人聲如沸册舞。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,664評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)调鲸。三九已至盛杰,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間藐石,已是汗流浹背即供。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,818評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留于微,地道東北人逗嫡。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像株依,于是被迫代替她去往敵國(guó)和親驱证。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 為了便于后期維護(hù)恋腕,本人在 Github 上新建了一個(gè) awesome-typescript 項(xiàng)目抹锄,歡迎大家分享新的...
    semlinker閱讀 6,327評(píng)論 0 65
  • > 本文不講如何安裝,只講代碼中的實(shí)際應(yīng)用 # 一荠藤、什么是 TypeScript伙单? typescript是js的超...
    冰藍(lán)淚閱讀 814評(píng)論 0 0
  • 先來(lái)看看知識(shí)圖 TS 是什么 ? TS:是TypeScript的簡(jiǎn)稱(chēng)哈肖,是一種由微軟開(kāi)發(fā)的自由和開(kāi)源的編程語(yǔ)言吻育。 T...
    w冷兔w閱讀 106評(píng)論 0 1
  • 簡(jiǎn)介 TypeScript 是 JavaScript 的一個(gè)超集,主要提供了 類(lèi)型系統(tǒng) 和對(duì) ES6 的支持淤井,由 ...
    MrWelson閱讀 15,897評(píng)論 3 21
  • 現(xiàn)在布疼,TypeScript 已經(jīng)在前端圈獲得了廣泛的群眾基礎(chǔ)。但據(jù)個(gè)人觀察庄吼,很多同學(xué)還處于剛剛脫離 AnyScri...
    指尖跳動(dòng)閱讀 483評(píng)論 0 0