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