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的更多知識,在這里筆者就不在敘述過多。有興趣的讀者可以到http://www.typescriptlang.org/學習,本節要講的,是它的另一個特性:它編譯輸出的元數據信息文件(*.d.ts),它可以在不需要修改原有JavaScript文件的情況下,而給JavaScript添加元數據類型信息,而這些類型信息則可以輔助IDE,給出有智能的提示信息,以及重構的依據。

在TypeScript的開源社區,已經為很多的第三方庫實現了這類模板文件,我們可以很快的應用在我們的項目之中。當然這里所說的額第三方包含我們常用的:Angular、jQuery、underscore、lodash、jasmine等。

在官方同時也為我們提供了一個方便的工具叫TSD(全稱為:TypeScript Definition manager for DefinitelyTyped),它是借鑒NPM包管理工具的思想,實現了一個類似的包管理工具,我們不需要任何的學習成本,只管像使用NPM一樣使用它。

這里是TSD主頁:http://definitelytyped.org/tsd/,你可以在這里深入了解它,或者是查詢你所需要的模板庫是否存在於TSD倉庫。

TSD也是一個Nodejs的工具,所以我們安裝它非常容易,只需要在命令行中輸入(對於有些Linux用戶需要sudo):

npm install tsd -g

安裝我們需要的模板庫,也很簡單,如jQuery和Angular的安裝:

tsd install jquery angular --save

這樣TSD就會幫助我們下載jQuery和Angular的d.ts文件,並存放在當前目錄的typings獨立子目錄下,並且它會將我們需要的依賴信息保存在一個叫tsd.json的文件,如NPM的package.json一樣,方便於我們的版本管理,以及團隊之間的共享。我們只需要共享這個tsd.json文件給其他同事,然后

tsd install

一切都可以滿意就緒了。

tsd.json文件的格式如下:

tsd文件目錄

同時候TSD工具還會為我們在typing目錄下生產一個tsd.d.ts文件,它會為我們引入這些模板文件,使得IDE能夠識別出這樣模板文件:

/// <reference path="angularjs/angular.d.ts" />
/// <reference path="jquery/jquery.d.ts" />

下面是我們在Intellij中得到的智能感知圖:

tsd智能感應

目前能夠很好支持TypeScript這一特性的工具有:Intellij家族、微軟自家的VS工具、Sublime。有了TSD這一工具,也許我們雖然還不能嘗試TypeScript的特性,但我們仍然可以利用它來幫助我們的普通JavaScript開發。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM