天天看點

tsd-提升IDE對JavaScript智能感覺的能力

在編寫前端javascript代碼時,最痛苦的莫過于代碼的智能感覺(intelli sense)。

追其根源,是因為javascript是一門弱類型的動态語言。對于弱類型的動态語言來說,智能感覺就是ide工具的一個“軟肋”。intellij等ide所用智能感覺方式,是一種折中的方式:全文搜尋,然後展示出已經使用過的對象成員。這種方式的缺點是,其智能感覺的的能力并不精準,經常會顯示出很多無關的代碼提示。

在很多現代化開發方式中,ide的強大支援和子產品化組織這種“工程化”的思想是我們應對大規模開發的方式之一,這也已經被業界所認同。是以在最近兩年,javascript的世界也提出了大規模開發的方案,其中有google的dart和微軟的typescript。随着angular2.0放棄了自家的dart,而選擇了typescript,也标志着typescript的逐漸成熟。typescript是微軟總架構師anders hejlsberg設計的新語言,他是軟體界的傳奇人物,是delphi和.net的設計者。typescript是一種可以編譯成傳統javascript的語言,它并不是完全的創造了一門新語言,而typescript是javascript語言的超集,它最大的特點就是引入了類型系統。并在編譯為javascript檔案後,可以輸出“.ts”的類型中繼資料資訊,為我們ide的智能感覺和重構提供了重要的依據。

在typescript的開源社群,已經為很多的第三方庫實作了這類模闆檔案,我們可以很快的應用在我們的項目之中。當然這裡所說的額第三方包含我們常用的:angular、jquery、underscore、lodash、jasmine等。

在官方同時也為我們提供了一個友善的工具叫tsd(全稱為:typescript definition manager for definitelytyped),它是借鑒npm包管理工具的思想,實作了一個類似的包管理工具,我們不需要任何的學習成本,隻管像使用npm一樣使用它。

tsd也是一個nodejs的工具,是以我們安裝它非常容易,隻需要在指令行中輸入(對于有些linux使用者需要sudo):

安裝我們需要的模闆庫,也很簡單,如jquery和angular的安裝:

這樣tsd就會幫助我們下載下傳jquery和angular的d.ts檔案,并存放在目前目錄的typings獨立子目錄下,并且它會将我們需要的依賴資訊儲存在一個叫tsd.json的檔案,如npm的package.json一樣,友善于我們的版本管理,以及團隊之間的共享。我們隻需要共享這個tsd.json檔案給其他同僚,然後

一切都可以滿意就緒了。

tsd.json檔案的格式如下:

tsd-提升IDE對JavaScript智能感覺的能力

同時候tsd工具還會為我們在typing目錄下生産一個tsd.d.ts檔案,它會為我們引入這些模闆檔案,使得ide能夠識别出這樣模闆檔案:

下面是我們在intellij中得到的智能感覺圖:

tsd-提升IDE對JavaScript智能感覺的能力

目前能夠很好支援typescript這一特性的工具有:intellij家族、微軟自家的vs工具、sublime。有了tsd這一工具,也許我們雖然還不能嘗試typescript的特性,但我們仍然可以利用它來幫助我們的普通javascript開發。