TypeScript 是一個 JavaScript 型別化的超集 (“typed superset”)，講『超集』兩字，要是沒有 google 我自己也都無法理解...，這裡有百度的解釋，若用那個網址的解釋圖來理解第一句話，大概是這個樣子: (BTW 我真的很認真在校正這一段，如果有畫錯請告訴我 QQ，我個人以前念書的時候就很沒自信看什麼子集, 超集...)
換句話說，TypeScript 可以用的東西，JavaScript 不一定會有，但 JavaScript 可以用的，TypeScript 也可以用。另外 TypeScript 也... : (以目前到 1.8的版本來說)
- 支援最新的 ECMAScript 標準.
- 可以把 TypeScript 轉換為 ES3, ES5, ES6, 也可以 Enables experimental support for ES7 decorators. (透過 TypeScript 的 command-lint 指令 -t， 指定輸出 ES 版本，"Specify ECMAScript target version: 'ES3' (default), 'ES5', or 'ES2015' (experimental)").
- 解析 JSX.
雖然命名為一個 Script，但它不會被直接拿來使用，最終，TypeScript 還是會編譯成一般的 JavaScript 來使用。既然中間需要經過一段轉換，聰明的你應該就知道，也有一些工具需要安裝來使用，幫你把你寫的 TypeScript 轉換為 JavaScript，也就是接下來我要介紹的編譯的部分。
TypeScript compiler
Visual Studio
如果你 IDE 是用 Visual Studio，那就不用麻煩了 XD，Visual Studio 2015/2013 Update 2 預設就有 TypeScript 編譯的工具. 如果你的 vs 還是沒有，也可以自己安裝 (https://www.typescriptlang.org/#download-links)。
Node.js Command-line
如果你也沒有在用 Visual Studio，編譯 TypeScript 請透過下載 npm (Node Package Manager)上面的 typescript 套件，並且安裝在全域的範圍:
npm install -g typescript當你安裝完成後，就可以使用
tsc 的指令，編譯某隻 TypeScript 的檔案為 JavaScript.tsc FILENAME
你也可直接在 command-line 輸入 tsc，查看相關的指令有哪些。
示範: 在 /tmp 底下 touch 一隻
company.ts 檔案，(注意 TypeScript 檔案的副檔名為 ts) 一個 Company 的類別:接著來編譯這隻 ts 為 JavaScript:
tsc company.ts
在目錄下看到產生 company.js 檔案:
-rw-r--r-- 1 win wheel 250 7 25 21:01 company.js -rw-r--r-- 1 win wheel 256 7 25 20:58 company.ts
到這裡，也許你會發現你打開 company.js 之後與之前寫的 company.ts 並無任何不同，是的，另外一個疑點是，我們目前也沒有使用任何跟 TypeScript 有關的語法在 company.ts 裡面，這也是一個 TypeScript 的優點，既可以讓你使用 TypeScript 的語法來寫程式，也兼容原本的 JavaScript，如果你的團隊根本還不太會寫 TypeScript，也可以直接把原本的 .js 檔案檔名換成 .ts，之後再慢慢轉換與上手，減少大家對於 TypeScript 熟悉度的磨合。
(跟 scss 很像，你可以寫 scss，但不會寫 scss 就繼續在裡面使用 CSS 也不會怎樣)
目前，只是大概介紹編譯的工作，事實上，做為前端的這幾年，會發現類似的語言工具層出不窮，從 CoffeeScript, Babel 都是，最終都是要編譯成 JavaScript。
型別很重要嗎 ?
TypeScript 一個主要的功能就是約束你對於型別的定義 (我想也算是一種代碼約束吧)，如果你對 "Type" 這件事情不是很在意，那麼 TypeScript 對你來說還真的可有可無。JavaScript 是個動態類型的語言，只有在程式在運行被賦予某個值的時候，他才知道是什麼型別，優點就是，程式碼寫起來，可能俐落很多，宣告變數不難，然後花更多心思在撰寫業務邏輯上，缺點也就是沒有型別的時候，當你的應用越來越複雜的時候，就會顯得越來越難維護。
當你接手一個你不熟悉的 Legacy Code, 我最花費的時間就在一直瘋狂的 console.log('變數名稱', 變數名稱)，或是 console.dir()...，慢慢的 debug 了解每個變數到底裡面裝的是什麼東西，要嘛 Array 要嘛 Object? 這邊用 for in 那邊用 for loop? 是數字還是字串? 我是要自己轉換型別嗎? 還是怎樣? 然後還要放到另一個變數嗎? 但也都是時間成本。這也是為什麼我要花時間特別瞭解一下 TypeScript，雖然限制自己要把一個如此自由的語言，拉回走向較為嚴謹的限制變數類型的編程風格，我認為後期是可以受益的，讓自己更了解每個變數存在的意義，是一種不錯的訓練。
另外現在的編輯器對於 TypeScript 的支援還不錯，不論你是使用 Atom, Sublime，Visual Studio Code, 都有相關的語法高亮, 語法檢查的 package，透過這些工具，當你在寫 TypeScript 時，若有任何型別上的問題，也會直接透過 IDE 告訴你。
話說回來，還是要介紹一些 TypeScript 的語法，大部分情況，都一直依賴
: 型別宣告 這樣的形式。而有些只是比較新的 ES6 的語法，本身跟 TypeScript 沒有直接的關係。 (其實如果你只是想要寫 ES6 的話，不一定要使用 TypeScript XD)這是一隻介紹一些基本常用的型別範例 basic.ts，相關介紹都在註解上:
你也可以比較編譯成 js 的樣子 (連結):
這是 class.ts 範例: (編譯後的結果我寫在 comment)
這是 interface.ts 範例: (編譯後的結果我寫在 comment)
TypeScript 有很多定義可以參考:
Classes, Interface, Generics, Function, Enums, Type Interface
Type Compatibility, Symbols, Iterators and Generators
Modules, Namespaces, Declaration Merging, JSX
Decorators, Mixins ...
使用 tsconfig.json
通常你也不可能只寫一隻 ts 吧!? 整個專案下的 TypeScript 都要受到管理，tsconfig.json 可以用來設定一些編譯 TypeScript 的選項，設定要被編譯的檔案，以及輸出的地方，sourceMap，排除哪些檔案... 等等。詳細的設定，請參考 https://www.typescriptlang.org/docs/handbook/tsconfig-json.html。
參考文章
- TypeScript Handbook 中文版，幾個蠻重要的章節，例如 TypeScript 的編碼規範 (不要使用I作為 Interface 的 prefix，這要是我沒有看到這一篇，... 很有可能這樣做...)。
- http://pinggod.com/2016/Typescript/
- TypeScript 官方網站
- [影片] Anders Hejlsberg: Introducing TypeScript
- 快速瞭解 TypeScript 是什麼東西
- mva.microsoft.com - 更好的 JavaScript 用 TypeScript 让你的项目高大上！
- angular2要用typescript，是不是现在该提前做好准备了，开撸typescript？
- flow.js/typescript 这类定义参数类型的意义何在？
一個還蠻奇怪的開端，其實我是在看 Angular 2 介紹文時，得知整個 Angular 2 底子也都是用 TypeScript 寫的，官方也推薦用 TypeScript (但也接受 Dart, JavaScript)。若真的要用起這類的語法，沒有一個專案上的動機，單純看官方文件是還蠻悶的一件事情... 所以，如果可以找個實際應用的 example 或是 Angular 2 玩玩看吧! 而且 TypeScript 好像 2012 年開始就出現了，只是我一直也沒什麼機會去看他。
最重要的一點，TypeScript 是微軟釋出的，還蠻驚訝的 :)
前面若有寫錯的地方，也麻煩讓我知道，謝謝幫忙!
沒有留言:
張貼留言
若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD