同學(xué)你好，我是Lison。很高興你對TypeScript感興趣，或許你對TypeScript了解還不多，或許還有很多疑問，比如：
- 學(xué) TypeScript 是不是就不需要學(xué) JavaScript 了？
- Vue 用 TypeScript 改寫發(fā)布 3.0 后是不是不用 TypeScript 不行？
- TypeScript 靠譜嗎？
- …
諸如此類疑惑，導(dǎo)致你一直對它猶豫不決，那么本節(jié)我將代替 TypeScript 向你做一個自我介紹。
同學(xué)你好，我是 TypeScript，如果你覺得我是 JavaScript 的孿生兄弟，或者覺得我是前端圈新扶持起來的太子，那你可能對我是有點(diǎn)誤解了。其實(shí)我并不是一個新的語言，用大家公認(rèn)的說法，我是JavaScript的超集，你可以理解為，我是加了一身裝備銘文的進(jìn)化版 JavaScript。JavaScript 有的，我都有，而且做得更好。JavaScript 沒有的，我也有，而且我是在很長一段時間內(nèi)不會被 JavaScript 趕上的。
雖然我作為超集，但是我始終緊跟 ECMAScript 標(biāo)準(zhǔn)，所以 ES6/7/8/9 等新語法標(biāo)準(zhǔn)我都是支持的，而且我還在語言層面上，對一些語法進(jìn)行拓展。比如新增了枚舉(Enum)這種在一些語言中常見的數(shù)據(jù)類型，對類(Class)實(shí)現(xiàn)了一些ES6標(biāo)準(zhǔn)中沒有確定的語法標(biāo)準(zhǔn)等等。
如果你是一個追趕技術(shù)潮流的開發(fā)者，那你應(yīng)該已經(jīng)將 ES6/7/8/9 語法用于開發(fā)中了。但是要想讓具有新特性的代碼順利運(yùn)行在非現(xiàn)代瀏覽器，需要借助Babel這種編譯工具，將代碼轉(zhuǎn)為ES3/5版本。而我，可以完全不用 Babel，就能將你的代碼編譯為指定版本標(biāo)準(zhǔn)的代碼。這一點(diǎn)，我可以說和 JavaScript 打了個平手。
另外我的優(yōu)勢，想必你也略有耳聞了那就是我強(qiáng)大的類型系統(tǒng)。這也是為什么造世主給我起名TypeScript。如果你是一名前端開發(fā)者，或者使用過 JavaScript 進(jìn)行開發(fā)，那么你應(yīng)該知道，JavaScript 是在運(yùn)行的時候，才能發(fā)現(xiàn)一些錯誤的，比如：
- 訪問了一個對象沒有的屬性；
- 調(diào)用一個函數(shù)卻少傳了參數(shù)；
- 函數(shù)的返回值是個字符串你卻把它當(dāng)數(shù)值用了；
- …
這些問題在我這里都不算事。我強(qiáng)大的類型系統(tǒng)可以在你編寫代碼的時候，就檢測出你的這些小粗心。先來簡單看下我工作的樣子：
interface 定義的叫接口，它定義的是對結(jié)構(gòu)的描述。下面的 info 使用 ES6 的新關(guān)鍵字 const 定義，通過 info: Info 指定 info 要實(shí)現(xiàn) Info 這個結(jié)構(gòu)，那 info 必須要包含 name 和 age 這兩個字段。實(shí)際代碼中卻只有 name 字段，所以你可以看到 info 下面被紅色波浪線標(biāo)記了，說明它有問題。當(dāng)你把鼠標(biāo)放在 info 上時，VSCode 編輯器會做出如下提示：
如果上面這個小例子中你有很多概念都不了解，沒關(guān)系，Lison 在后面的章節(jié)都會講到。
配合VSCode這類編輯器，你可以借助編輯器的提示愉快地使用 TypeScript。另外值得一提的是，深受前端開發(fā)者喜愛的 VSCode 也是使用 TypeScript 開發(fā)的哦。
很多后端開發(fā)者，在做了很久的后端開發(fā)，習(xí)慣了 C++、Java 這些語言后，可能對我會有很多誤解。就拿一個函數(shù)重載來說吧，在別的這些語言里，你可以定義多個同名函數(shù)，然后不同點(diǎn)在于參數(shù)個數(shù)、參數(shù)類型和函數(shù)體等，你可以給同一個函數(shù)傳入不同參數(shù)，編譯器就會知道你要調(diào)用的是哪個函數(shù)體；而我，也是有函數(shù)重載的概念的，只不過，我的重載是為了幫助編譯器知道，你給同一個函數(shù)傳入不同參數(shù)，返回值是什么情況；在 JavaScript 中，我們?nèi)绻幸粋€函數(shù)，要根據(jù)傳入?yún)?shù)不同，執(zhí)行不同的邏輯，是需要自己在函數(shù)體內(nèi)自行判斷的。比如下面這個JavaScript 書寫的例子：
const getResult = input => {
if (typeof input === 'string') return input.length
else if (typeof input === 'number') return input.toString()
else return input
}
這個例子很簡單。如果輸入的值是字符串類型，返回這個字符串的長度；如果是數(shù)值類型，返回這個數(shù)值變成字符串的結(jié)果；如果都不是，原樣返回?？梢钥吹?，輸入不同類型的值，返回的結(jié)果類型是不一樣的。所以如果你要使用這個函數(shù)的返回值，就可能一不小心用錯，比如輸入123，應(yīng)該返回字符串 ‘123’。如果你在結(jié)果上調(diào)用 toFixed 方法，如 getResult(123).toFixed()，運(yùn)行后就會報錯，因?yàn)樽址菦]有這個方法的。如果你使用我來書寫，結(jié)果就不同了，我會在你寫代碼的時候就告訴你。來看怎么使用我來書寫上面的例子：
function getResult (input: string): number
function getResult (input: number): string
function getResult <T>(input: T): T
function getResult (input: any): any {
if (typeof input === 'string') return input.length
else if (typeof input === 'number') return input.toString()
else return input
}
前三行組成了函數(shù)重載，第四行開始是實(shí)際函數(shù)體，之后你再調(diào)用 getResult 來看下效果：
這里輸入123結(jié)果應(yīng)該是字符串’123’，結(jié)果訪問 toFixed 方法，字符串是沒有這個方法的。
這里輸入字符串’abc’，返回應(yīng)該是他的長度數(shù)值3，結(jié)果訪問它的length屬性，數(shù)值是沒有l(wèi)ength屬性的。
這里你傳入一個對象，既不是字符串也不是數(shù)值，所以原樣返回這個對象，編譯器就知道你的res是對象 { a: ‘a(chǎn)’, b: ‘b’ } 啦。所以當(dāng)你輸入res然后輸入 . 后，VSCode 就會給你列出有哪些屬性可以訪問。
是不是和你理解的函數(shù)重載有點(diǎn)不一樣？所以一定要注意哦，不要用學(xué)習(xí)其他語言的思維來認(rèn)識我哦，否則你會鉆牛角尖的。上面例子的語法你可以不用在意，因?yàn)?Lison 都會詳詳細(xì)細(xì)地給你講噠。
對了，另外還有一個我的好搭檔，TSLint，也是追求極致的你不可或缺的。它和 ESLint 相似，都是能夠?qū)δ愕拇a起到約束和提示作用，特別是團(tuán)隊(duì)協(xié)作的項(xiàng)目中，使用它可以讓你們多個開發(fā)者都能夠遵循相同的代碼規(guī)范——大到各種語法，小到標(biāo)點(diǎn)空格。搭配使用 VSCode 和 TSLint，再加上我強(qiáng)大的類型系統(tǒng)，寫代碼簡直不要太嗨~
好了，向你介紹得差不多了，相信你對我已經(jīng)有了一個大致的了解。下面讓 Lison 向你客觀地介紹下，我的發(fā)展趨勢以及你為什么要與我為伴。
相信你在聽完 TypeScript 的自我介紹之后，它的亮點(diǎn)你已經(jīng)了解一二了。或許你還有些顧慮，畢竟學(xué)習(xí) TypeScript 是需要時間的，你可能會擔(dān)心 TypeScript 像 CoffeeScript 一樣，隨著 ES標(biāo)準(zhǔn) 的不斷更新，漸漸退出大家的視線。下面讓我們來看下 TypeScript 的發(fā)展趨勢，來打消你的顧慮，同時讓你對它有進(jìn)一步的了解。
我們都知道 TypeScript 最主要的亮點(diǎn)是它的類型系統(tǒng)，這使得在編寫代碼的時候就能夠檢測到一些錯誤。而 JavaScript 是一門動態(tài)腳本語言，它不需要編譯成二進(jìn)制代碼運(yùn)行。Node 服務(wù)端代碼也不需編譯即可在服務(wù)器起一個服務(wù)，你甚至可以直接在服務(wù)器修改你的服務(wù)代碼然后重啟就可以，不需要編譯等操作。這一切特點(diǎn)使得 JavaScript 的所有調(diào)試都需要在運(yùn)行時才能進(jìn)行，在編寫代碼的時候很多問題是無法提前知曉的，而且就JavaScript目前的使用場景來看，它在至少很長一段時間內(nèi)會保持這樣的特點(diǎn)。
而 TypeScript 和 JavaScript 不同的就是，它可以在你編寫代碼的時候，就對一些錯誤進(jìn)行提示，還能在你使用某個數(shù)據(jù)的時候，為你列出這個數(shù)據(jù)可以訪問的屬性和方法。在 TypeScript 的自我介紹中我們已經(jīng)看過幾個簡單的例子，想必你也知道它實(shí)現(xiàn)這些的效果了。當(dāng)我們的項(xiàng)目較為龐大，需要由多人合作開發(fā)時，多人協(xié)作是需要溝通成本和 review 成本的。一些接口的定義，一些方法的使用，都可能因?yàn)閭€人習(xí)慣或溝通不暢導(dǎo)致邏輯實(shí)現(xiàn)的差異。而如果引入TypeScript，則會對一些實(shí)現(xiàn)進(jìn)行強(qiáng)校驗(yàn)。如果不按接口實(shí)現(xiàn)，編譯就沒法通過，如果對代碼質(zhì)量要求較高，可以將嚴(yán)格檢查全部打開，效果更好。
那么哪些項(xiàng)目適合用 TypeScript 開發(fā)呢，我總結(jié)了幾類：
- 需要多人合作開發(fā)的項(xiàng)目
- 開源項(xiàng)目，尤其是工具函數(shù)或組件庫
- 對代碼質(zhì)量有很高要求的項(xiàng)目
來看幾個廣為人知的使用 TypeScript 開發(fā)的經(jīng)典項(xiàng)目：
- VSCode：開源的高質(zhì)量代碼編輯器VSCode使用TypeScript開發(fā)，所以它天生就支持 TypeScript；
- Angular & React & Vue3.0：現(xiàn)在三足鼎立的三個前端框架，Angular 和 React 已經(jīng)使用 TypeScript編寫，而在我編寫專欄的同時，Vue3.0 將使用 TypeScript 進(jìn)行重構(gòu)，屆時三個前端框架都使用TypeScript編寫，如果使用TypeScript開發(fā)將會得到很好的類型支持。也可以看出，TypeScript 已經(jīng)被廣為接受。當(dāng)然了，你依然可以使用JavaScript來開發(fā)前端項(xiàng)目，但是相信隨著 Vue3.0 發(fā)布，TypeScript將會被越來越多的開發(fā)者所接受；
- Ant Design：使用 React 開發(fā)項(xiàng)目的開發(fā)者大多應(yīng)該都知道螞蟻金服開源UI組件庫Ant Design，同樣使用TypeScript進(jìn)行編寫。保證了代碼質(zhì)量的同時，也能很好地支持開發(fā)者使用TypeScript進(jìn)行React項(xiàng)目的開發(fā)。如果你使用 Vue 進(jìn)行開發(fā)，Ant Design 也提供了Vue 版的組件庫，風(fēng)格和功能和 React 版的保持一致，共享單元測試和設(shè)計資源，對TypeScript的支持也一樣很好。
TypeScript 在實(shí)現(xiàn)新特性的同時，時刻保持對ES標(biāo)準(zhǔn)的對齊。一些ECMAScript標(biāo)準(zhǔn)沒有確定的內(nèi)容，在 TypeScript 中已經(jīng)率先支持了。所以在語法標(biāo)準(zhǔn)方面，可以說TypeScript是略微領(lǐng)先的，比如類的私有屬性和方法。ES6標(biāo)準(zhǔn)對類的相關(guān)概念的定義中，并沒有私有屬性的概念，如果想實(shí)現(xiàn)私有屬性，需要使用一些方法hack（可以參考阮一峰的《ECMAScript 6 入門》- 私有方法和私有屬性）；但是TypeScript是支持私有屬性的，可以直接使用 private 指定一個私有屬性。雖然ECMAScript新的提案提供了定義私有屬性的方式，就是使用 # 來指定一個屬性是私有的，但是到目前為止現(xiàn)在還沒有編譯器支持這種語法。
以上便是對 TypeScript 的大致介紹，接下來我們來看下本小冊有哪些內(nèi)容。
本小冊共7大章節(jié)，7個章節(jié)的內(nèi)容主要為：
- 入門準(zhǔn)備：講解學(xué)習(xí) TypeScript 和使用 TypeScript 進(jìn)行開發(fā)的一些方法和技巧，是授你以魚之前的授你以漁，雖然后面章節(jié)會學(xué)習(xí) TypeScript 的所有語法，但是掌握自學(xué)TypeScript的方法技巧，可以幫助你更好更快地學(xué)習(xí) TypeScript，也方便你遇到問題時能夠快速找到解決方案。
- 基礎(chǔ)部分：這一章都是一些較為基礎(chǔ)的知識，只要你有JavaScript的基礎(chǔ)就能上手，學(xué)習(xí)起來不會有太大壓力；學(xué)習(xí)完本章后，你就可以自己使用 TypeScript 寫一些基本的日常開發(fā)中使用的邏輯了。
- 進(jìn)階部分：這一章你要做好心理準(zhǔn)備了。作為進(jìn)階知識，不僅內(nèi)容多一些，而且有些知識較為抽象，不好理解，需要你緊跟著 Lison 多練習(xí)多思考。這一章的知識有一些在平常的業(yè)務(wù)開發(fā)中很少用到，但是你也不可以掉以輕心，以免以后需要用到了，都不知道還有這高級內(nèi)容。
- 知識整合：這一章是對前面學(xué)習(xí)的基礎(chǔ)和進(jìn)階部分的知識的整合。學(xué)習(xí)這一章，需要前面章節(jié)的知識作為鋪點(diǎn)，所以一定要把前面章節(jié)的知識掌握好哦。
- 項(xiàng)目配置及書寫聲明文件：這一章會詳細(xì)講解項(xiàng)目的配置項(xiàng)，也就是對 tsconfig.json 里的配置逐條講解它的作用。之所以放到后面講，是因?yàn)槲覀兦懊鎸W(xué)習(xí)不需要用到這么多配置，但是學(xué)習(xí)所有配置，可以幫助你在開發(fā)自己項(xiàng)目時滿足自己的開發(fā)需求。書寫聲明文件需要用到前面的語法知識，學(xué)會書寫聲明文件，我們就可以在使用了一些冷門的沒有聲明文件的JS庫時，自行為它們書寫聲明文件，以便我們開發(fā)使用。
- 項(xiàng)目實(shí)戰(zhàn)：這一章是實(shí)戰(zhàn)部分，通過使用 TypeScript+Vue 開發(fā)一個簡單后臺。我會帶著你從零創(chuàng)建一個項(xiàng)目，并實(shí)現(xiàn)目錄中列出的功能，幫助你將學(xué)到的知識在實(shí)際開發(fā)中進(jìn)行運(yùn)用。即是對前面知識的復(fù)習(xí)，也是對理論知識到實(shí)踐的轉(zhuǎn)化，做完這個項(xiàng)目，相信你會對TypeScript項(xiàng)目開發(fā)有一個新的認(rèn)識，再去獨(dú)立開發(fā)項(xiàng)目，會輕松很多。
- 寫在最后：這一章是一個總結(jié)。相信學(xué)到這一章的時候，你已經(jīng)對 TypeScript 有了整體認(rèn)知了。我將會在本章分享一些我的開發(fā)經(jīng)驗(yàn)，幫助你在項(xiàng)目開發(fā)中少走彎路。
好了，在聽完 TypeScript 的自我介紹和發(fā)展趨勢的了解之后，讓我們一起愉快地進(jìn)入TypeScript 的學(xué)習(xí)中去吧。