大半夜的JavaScript Weekly發(fā)來(lái)賀電：TypeScript 2.0 Final Released!

沒(méi)錯(cuò)，繼Angular2發(fā)布之后，TypeScript今天也發(fā)布了2.0版本，這不禁讓我浮想一番。如果要說(shuō)TS和JS最明顯的差別，我想一定是Type System，所以今天我們就聊聊類(lèi)型系統(tǒng)在前端發(fā)展歷程中，到底扮演了怎樣的角色。

歷史斗爭(zhēng)

如果要你把PV上***別的Web Application用一門(mén)在10天內(nèi)擼出來(lái)的編程語(yǔ)言來(lái)開(kāi)發(fā)，我想你肯定不會(huì)放心的。然而事實(shí)上我們現(xiàn)在都是這樣干的，JS已經(jīng)成為了***的編程語(yǔ)言。JS現(xiàn)在所承擔(dān)的使命已經(jīng)完全超出了當(dāng)年設(shè)計(jì)的初衷，雖然TC39一直在填坑，并且發(fā)展到如今的ES6已經(jīng)相當(dāng)成熟了，但仍然留下了一些歷史包袱，并不能改變這是一門(mén)動(dòng)態(tài)弱類(lèi)型腳本語(yǔ)言的實(shí)質(zhì)。

因此在前端工程化不斷壯大的過(guò)程中，為了避免踩坑，人類(lèi)同JS***編碼實(shí)踐方式展開(kāi)了曠日持久的戰(zhàn)爭(zhēng)。

最開(kāi)始，大家都只是取其精華，去其糟粕，如《JavaScript語(yǔ)言精粹》一書(shū)所說(shuō)：你們只需要用我說(shuō)的就好了，其他的垃圾都不要學(xué)，并且千萬(wàn)不要在項(xiàng)目里面用。

一般情況下每個(gè)公司都會(huì)出一套***實(shí)踐的編碼規(guī)范，程序員需要統(tǒng)一代碼風(fēng)格，按約定編寫(xiě)代碼。但規(guī)范的約束力很低，結(jié)果在項(xiàng)目趕著上線的情況下還是寫(xiě)出了翔一樣的代碼，所以更好的方式是用工具來(lái)規(guī)范代碼，發(fā)現(xiàn)一些潛在問(wèn)題，通過(guò)工具來(lái)強(qiáng)制約定編碼。比如JSLint，JSHint，以及ESLint，都是設(shè)定了一系列編碼約定，讓你避免寫(xiě)出一些糟糕的代碼。

另外一種思路，就是拋棄使用JS作為開(kāi)發(fā)語(yǔ)言，或者只是把他當(dāng)成“JVM”,然后采用另外一種設(shè)計(jì)更加嚴(yán)謹(jǐn)，不容易采坑的語(yǔ)言來(lái)編程，比如CoffeeScript和TypeScript,開(kāi)發(fā)完后再轉(zhuǎn)譯成JS來(lái)運(yùn)行。

如果覺(jué)得這種方式過(guò)于激進(jìn)，那么可以采用漸進(jìn)的方式，比如Flow。Flow可以在開(kāi)發(fā)時(shí)對(duì)代碼進(jìn)行靜態(tài)類(lèi)型分析，用寫(xiě)強(qiáng)類(lèi)型的方式來(lái)寫(xiě)弱類(lèi)型的JS。實(shí)質(zhì)上這有很多好處：

1. 強(qiáng)制聲明類(lèi)型，IDE和編輯器可以通過(guò)靜態(tài)類(lèi)型分析發(fā)現(xiàn)代碼隱藏缺陷，同時(shí)也能夠提供更強(qiáng)大的自動(dòng)補(bǔ)全，智能代碼提示和糾錯(cuò)，達(dá)到Java/C++級(jí)別的開(kāi)發(fā)體驗(yàn)。
2. 可避免類(lèi)型隱式轉(zhuǎn)換帶來(lái)的消耗，提高運(yùn)行效率。實(shí)際上JS引擎在運(yùn)行時(shí)很大的開(kāi)銷(xiāo)都花在類(lèi)型分析上。
3. 可讀性/可維護(hù)性增強(qiáng)。一眼就能看出這個(gè)變量是String還是Number，代碼維護(hù)也更清晰，并且通過(guò)注釋工具生成的代碼注釋也會(huì)更加詳細(xì)，后面換人維護(hù)時(shí)也更容易上手。

這些優(yōu)勢(shì)，其實(shí)都是類(lèi)型系統(tǒng)所帶來(lái)的強(qiáng)類(lèi)型語(yǔ)言所具有的開(kāi)發(fā)優(yōu)勢(shì)，無(wú)論是在開(kāi)發(fā)體驗(yàn)還是后期項(xiàng)目維護(hù)上，都要優(yōu)于目前的JavaScript。

接下來(lái)，我們就以漸進(jìn)的方式，來(lái)感受一下類(lèi)型系統(tǒng)帶給我們的好處。

類(lèi)型系統(tǒng)

Flow.js

很多情況下我們都是在維護(hù)項(xiàng)目，不可能為了增加類(lèi)型檢查來(lái)修改老的項(xiàng)目代碼。Flow可以在不修改代碼的情況下，通過(guò)注釋的方式來(lái)進(jìn)行靜態(tài)類(lèi)型分析，這為我們提供了一個(gè)很好的過(guò)渡方式。你可以隨時(shí)在任一個(gè)項(xiàng)目里面集成Flow。

/* 
* @flow  
* 只需要在文件頭部添加flow注釋?zhuān)現(xiàn)low就會(huì)認(rèn)為這個(gè)文件需要靜態(tài)分析并檢查 
*/ 
 
function foo(x) { 
  return x * 10; 
} 
 
// 這樣調(diào)用Flow就會(huì)給出錯(cuò)誤提示：string和number類(lèi)型不兼容 
foo('Hello, world!');   

這種無(wú)侵入式的集成，可以檢測(cè)出一些比較低級(jí)的錯(cuò)誤，如果要支持更多強(qiáng)大的分析，就需要寫(xiě)侵入代碼了，比如手動(dòng)類(lèi)型注釋?zhuān)?/p>

/*  
* @flow  
* var : [type] 指定變量類(lèi)型 
*/ 
 
function add(num1: number, num2: number): number { 
  return num1 + num2; 
} 
 
// 這樣調(diào)用就會(huì)報(bào)錯(cuò)，因?yàn)閰?shù)2已經(jīng)被聲明為number了 
var x: number = add(3, '0');  

這樣的代碼是不能直接運(yùn)行的，還是需要Flow工具轉(zhuǎn)譯成原生JS才能執(zhí)行。這種方式就更適合新的項(xiàng)目，一旦新項(xiàng)目直接集成了Flow套餐，就可以直接使用Flow支持的更多功能，并且配合IDE給出更好的開(kāi)發(fā)體驗(yàn)。

以Mac下的VSC為例，首先安裝本地Flow環(huán)境：

brew update 
 
brew install flow  

然后在VSC中安裝啟用vscode-flow插件, ⌘+' 打開(kāi)用戶配置，禁用VSC自帶的JavaScript校驗(yàn)功能(設(shè)置javascript.validate.enable為 false)，并設(shè)置好flow的安裝目錄：

 剩下的套路就跟Babel，ESLint一樣了，在項(xiàng)目根目錄下面建立一個(gè).flowconfig文件，配置一些校驗(yàn)規(guī)則：

vscode-flow插件檢測(cè)到.flowconfig配置后就會(huì)啟動(dòng)flow服務(wù)去實(shí)時(shí)分析項(xiàng)目代碼，當(dāng)你開(kāi)發(fā)的時(shí)候就能感受到比原生編輯器更加強(qiáng)大的自動(dòng)補(bǔ)全和智能提示了。比如當(dāng)你require一個(gè)util模塊時(shí)，flow能分析出util模塊內(nèi)結(jié)構(gòu)，并且當(dāng)你調(diào)用util方法不當(dāng)時(shí)給出提示：

 以上只是介紹簡(jiǎn)單流程，并且還是無(wú)侵入式的校驗(yàn)，如果再加上手動(dòng)類(lèi)型聲明的話，還能提供更多功能。

TypeScript

TS的做法更徹底，如果有一個(gè)全新的項(xiàng)目可以自由選擇技術(shù)方案的話，我一定會(huì)選TypeScript而不是Flow.js。可惜的是，在公司里面大部分時(shí)候都依賴(lài)公司自身的技術(shù)體系，在做技術(shù)選型的時(shí)候都要依賴(lài)團(tuán)隊(duì)的技術(shù)棧。就比如大家都用ES6，你選擇TypeScript，那么之后別人來(lái)維護(hù)你的代碼成本就非常高，除非你能煽動(dòng)整個(gè)團(tuán)隊(duì)，整個(gè)集團(tuán)使用：)一般情況下這是不可能的，我想這也是TS難以普及的重要原因。

但是，這并不妨礙TypeScript成為一門(mén)優(yōu)雅的前端開(kāi)發(fā)語(yǔ)言。ES6有的它都有，ES6沒(méi)有他也有(泛型/枚舉/類(lèi)型推導(dǎo)等只有強(qiáng)類(lèi)型語(yǔ)言才有的一些特性)，而這些特性恰恰更加適合日益壯大的工程化的前端，適合編寫(xiě)出可維護(hù)性代碼。再配合微軟自家的VSC，開(kāi)發(fā)體驗(yàn)妥妥的：

 至于TypeScript 2.0帶來(lái)了哪些新特性，請(qǐng)直接戳GitHub：

https://github.com/Microsoft/...

未來(lái)趨勢(shì)

前幾日GitHub 發(fā)布了2016開(kāi)源報(bào)告，JavaScript眾望所歸的榮登榜首，讓眾前端激動(dòng)不已：

 然而讓我意外的不是排在***的JavaScript，而是***的TypeScript：

 看這增長(zhǎng)趨勢(shì)，微軟是要協(xié)TypeScript在開(kāi)源之路上越走越遠(yuǎn)了。

私認(rèn)為，無(wú)論***是不是TypeScript，類(lèi)型系統(tǒng)都帶來(lái)了更好的開(kāi)發(fā)體驗(yàn)，代碼質(zhì)量，代碼可讀性和可維護(hù)性，這正是一個(gè)大型或長(zhǎng)期項(xiàng)目所必須的，也是現(xiàn)在和未來(lái)的前端工程所需要的。所以實(shí)在是沒(méi)有不學(xué)的理由，如果你覺(jué)得TypeScript像極了C#更適合后端程序員，那么學(xué)習(xí)它或許是你邁向全棧的一小步哈哈。