TypeScript - 不止穩，並且快

前言

關於 TypeScript 是什麼，應該大部分人都已經知道了，可是在這兒，仍是摘抄一下知乎的回答：

TypeScript 是 JavaScript 的強類型版本。而後在編譯期去掉類型和特有語法，生成純粹的 JavaScript 代碼。因爲最終在瀏覽器中運行的仍然是 JavaScript，因此 TypeScript 並不依賴於瀏覽器的支持，也並不會帶來兼容性問題。

對於我我的而言， 使用 TypeScript 寫項目已經有半年多了，中間有被 TypeScript 的配置與升級折騰到想砸電腦的時候，也有提早發現錯誤時的暗自慶幸，同時也有由於找不到類型定義文件而本身手寫，提PR補全的時候。
總的來講使用 TypeScript 的這一年，什麼感受都有。但最後仍是依然堅持使用 TypeScript ，由於其帶來的效率提高是遠遠大於環境升級所帶來的開銷的。

穩定壓倒一切

做爲程序員，天然但願代碼上線以後能安安穩穩的跑着，而不是忽然報錯崩潰啥的。
因此 TypeScript 以前最被看重的就是靜態類型檢查功能。

至於靜態類型檢查的做用，在知乎的另外一個回答中有相關的回答：

靜態類型檢查能夠避免不少沒必要要的錯誤, 不用在調試的時候才發現問題 (其實有的時候根本調試不出問題, 只是默默地把坑挖了, 說不定埋的就是個炸彈, 以前用 TypeScript 重寫應用的服務器端程序, 寫完以後就發現了很多暫時沒有影響到運行的嚴重問題).

懶人的自我救贖

然而，我是個很「懶」的人，不肯在重複的事情上花上不少時間，也不喜歡像背書一下，背下來 Api 文檔。更但願本身的時間能專一於核心業務的開發，而非邊邊角角的事情。

去年十月，在由於實際學習須要，接觸愈來愈多前端框架時候，感受成天的開發，大半的時間都浪費在了查文檔上，特別是一些 React 的組件，props又多又長……每次寫的時候，都得回去翻文檔，簡直絕望。

在這種天天近乎絕望的重複勞動下，我開始嘗試去找解決方法，再到後來有一天接觸了 TypeScript ，感受到這就是本身想要的功能。
嗯……看中的不是 TypeScript 的穩定性，而是 TypeScript 的代碼提示。

好比寫 Node.js，使用 TypeScript 與 不使用的區別是這樣的：

不只不用手動翻閱 Api, 並且參數是什麼也都一清二楚了。

且TypeScript 的代碼提示是基於類型文件工做的，而相比於各個編輯器本身定義的代碼片斷來講，不只有大量的志願者去維護，更新及時，並且種類繁多，基本現有的流行框架類庫，都有相應的類型定義文件。

因此自打用上 TypeScript 後，就過上了不再用去費腦子記 Api 和參數的日子，開發效率與幸福感都獲得了大大的提高。

不止穩，更要快

而 TypeScript 的快，不只體如今代碼提示上，同時也體現於重構、可讀性和配套的編輯器上。

代碼重構

在重構上，這個本身是有實際體會的，若是寫JS，重構時候不當心改了啥，除了運行時候能發現，其餘時候每每難以察覺，且 ESLint 也只能是排查簡單的問題，因此出了BUG會很是麻煩。
而 TypeScript 不同，重構了，從新編譯一下就知道，哪裏錯了，哪裏改動了不該該改的。對於我本身這種時不時就會重構的人來講，省時又省力。

可讀性

可讀性上，TypeScript 明顯佔優，查看開源代碼時，若是註釋不是很完善，每每會看的雲裏霧裏，而 TypeScript 在同等條件下，至少有個類型，能讓本身更容易明白代碼的參數、返回值和意圖。

編輯器

這個是不得不提的部分，由於 VSCode 實在是太方便了，性能也高，且編輯器自身保持着一個高速的開發與迭代狀態，時不時就能感覺到 VSCode 開發團隊的誠意和其所帶來的驚喜。

由於都是微軟家產品的緣由，VSCode 對 TypeScript 的支持也至關完善。各類插件也層出不窮，基於 TypeScript 作的 Automatic Type Acquisition 功能使得 JavaScript 的用戶也能享受到詳細的代碼提示功能，這一點上比 Sublime 等編輯器方便了不少。

關於 VSCode 編輯器的上手與配置，能夠看閻王發表的這篇文章：如何快速上手一款 IDE - VSC 配置指南和插件推薦

解放本身，專一業務核心開發：TypeScript 編輯器插件推薦

固然，每次寫 TypeScript 時，依然會遇到一些煩心的問題和重複的勞動。
好比說，TypeScript的類型定義文件是須要手動下載相應的 @types 包的，雖然相比於以前的方式已經進化了不少，可是每次還要重複，依然會以爲繁瑣。
因此下面會推薦本身經常使用的幾個插件，把本身從繁瑣無趣零成長的工做中解放出來。

TypeScript Importer-告別手動重複寫import的日子

插件地址：TypeScript Importer

這個是我最喜歡的插件，具體的做用，一圖勝千言：

在長長的路徑裏，導入另外一個文件夾深處的模塊，那種感受是絕望……
每次都要重複的import，每次都要重複的判斷路徑，每次都要從新寫一遍import……

雖然工做量也不大，可是確實會影響心情和效率。

Types auto installer - 自動安裝相應的類型定義文件

插件地址：Types auto installer

在以前，你安裝一個模塊並在 TypeScript 運行兩段命令。
以lodash爲例：

npm i lodash --save
npm i @types/lodash --save

固然，你也能夠合併到一句話去寫。
雖然工做量不大……可是架不住量多啊……每開一個項目都得來這麼一次，簡直絕望……

因此當時就想着本身寫一個自動安裝類型定義文件的小工具，後面確實也寫出來了，只是再後來又發現 VSCode 有這個插件，功能也很完善，就用它的了。
插件的做用很簡單，就是當你運行：

npm install --save lodash

它會自動執行：

npm install --save @types/lodash

與此同時還有一鍵下載安裝全部 package.json 依賴類型定義文件的功能，能夠說是很是方便了。

Sort Typescript Imports-給你import的模塊們排序

插件地址：Sort Typescript Imports

一樣，話很少說，一圖勝千言：

這是一個看起來沒什麼做用的插件……由於其實 import順序是否整潔有序好像對開發效率啥的並無很大的提高。
但這是一個你接受了它的設定，就可能會以爲十分有趣的插件……

具體的做用就是，讓你的 imports 更有順序，相近文件夾的排列在一塊兒。看起來會更好看一些。

Emmm……若是必定要說做用的話，就是更好看一些吧……很符合我這種有輕微代碼潔癖的人的心態……

爲何要關注這個？

本身在知乎上有回答過一道問題：《最近一年前端技術棧哪些技術點最困擾你?》
個人回答是：

開發環境的搭建。
沒有官方的cli，或者本身要作一些拓展(好比用ts)真的很是煩人。
各類報錯，而這種在開發環境上積累的經驗和踩的坑是價值很是低的。(由於基本最後翻官方配置文檔都能解決)
耗時長，學習價值低，更新速度快。

在這兒，也是同理。
用 TypeScript 和相關插件所解決的問題，都是一些繁瑣、無趣、零成長的工做，並且還影響心情。
有這個時間，爲何很少陪陪女友，多學點東西，多解決一些有意思的問題呢？
因此這種可讓計算機解決的問題，就讓計算機去解決吧~

參考資料

• 如何評價 TypeScript？ - 王澤的回答
• flow.js/typescript 這類定義參數類型的意義何在？ - vilicvane的回答