JavaScript powered by TypeScript

概述

本文是對 https://github.com/Microsoft/TypeScript/issues/4789 的翻譯。后續(xù)文章譯者會持續(xù)跟進(jìn)后續(xù)進(jìn)展并給出自己的評論厢漩。

術(shù)語定義

此文章用到了不少專業(yè)術(shù)語须鼎,為了閱讀方便卧惜,羅列部分關(guān)鍵術(shù)語如下:

  • 智能感知:指的是IDE代碼提示、重構(gòu)等技術(shù)的底層架構(gòu)支持
  • 基于可執(zhí)行程序的智能感知:譯者猜測應(yīng)該指一種使用獨立運行程序(exe)來實現(xiàn)的智能感知系統(tǒng)。
  • JavaScript 語言服務(wù):一種微軟開發(fā)的基于可執(zhí)行程序的智能感知躁锁,被應(yīng)用于 Visual Studio中。
  • TypeScript 語言服務(wù):TypeScript的一個模塊卵史,實現(xiàn)功能類似 JavaScript語言服務(wù)战转,依托于 TypeScript 類型系統(tǒng),并不基于可執(zhí)行程序以躯。
  • 庫定義文件:指的是 TypeScript Definition File槐秧,即 .d.ts 文件

通過 TypeScript 完善 JavaScript

這個方案概述了通過使用和擴(kuò)展 TypeScript 的能力,從而提供完善的JavaScript開發(fā)體驗忧设。

當(dāng)前問題

  • JavaScript 智能感知在如今是一個大雜燴刁标。不同的產(chǎn)品的體驗有很大區(qū)別,并且經(jīng)常是不一致或者不準(zhǔn)確的址晕。比如:

    • 基于可執(zhí)行程序( Execution )的智能感知會在大量動態(tài)代碼中失效(比如代碼依賴于一個外部資源或者用戶交互)膀懈,行為會在不同的硬件上不同(因為達(dá)到了可執(zhí)行程序的超時限制),并且是不可預(yù)知的(有時候是否可以正常工作取決于看似無關(guān)的編輯)

    • 靜態(tài)分析引擎會進(jìn)行深度代碼分析谨垃,比如跟蹤調(diào)用地點和條件分支启搂,這通常會消耗大量的資源(特別是大型代碼庫)并且需要大量的代碼去維護(hù)和適配各種在長尾的類庫和模塊中用到的 JavaScript 模式。

  • 類型支持是 TypeScript 中很棒的特性刘陶,并且提供了準(zhǔn)確且一致的智能感知胳赌。但是很多開發(fā)者想繼續(xù)直接編寫 JavaScript 代碼,或者不想在他們已經(jīng)存在的 JavaScript 項目中 處理所有的 TypeScript 錯誤匙隔。因此:

    • 一些最好的 JavaScript 類庫已經(jīng)擁有了 TypeScript 庫定義文件疑苫。但這對 JavaScript 開發(fā)者來說是無法使用的。

    • 即使他們想把項目移植到 TypeScript 上也有很大的挑戰(zhàn)。如果只是簡單的把 .js 文件改名為 .ts 文件缀匕,會遭遇很多 TypeScript語法錯誤纳决。

  • 類型在 JavaScript 中可以通過其他方式建模,比如 JSDoc注釋格式乡小。但是 IDE 支持和現(xiàn)存類庫的建模方式是?參差不齊的阔加。

  • 當(dāng)前版本的 Visual Studio 對 JavaScript 的支持很差,對開發(fā)來說并不是一流的體驗满钟。

    • 基于可執(zhí)行程序的JavaScript 語言服務(wù)胜榔,基于分析引擎的 Node Tools for Visual Studio ,擁有一個靜態(tài)類型系統(tǒng)的 TypeScript 工具湃番,當(dāng)在這些項目類型中編寫代碼時夭织,上述內(nèi)容并沒有集成起來。

    • 除了不能跨越上下文理解代碼之外吠撮,這會導(dǎo)致不同的編碼體驗尊惰,比如 ES6 語法支持,自動格式化泥兰,智能感知行為等等弄屡。這三種方式都彼此略有不同。(更不用說這在編寫新特性鞋诗、修復(fù)BUG時需要在三種實現(xiàn)中帶來很多重復(fù)的工作量)

機(jī)會

如果 TypeScript語言服務(wù)可以增強(qiáng) JavaScript 開發(fā)體驗的話:

  • TypeScript 生態(tài)系統(tǒng)中提供的大量庫定義是可以被利用的膀捷,可以為這些類庫提供豐富的智能感知。

  • 許多基于可執(zhí)行程序或者分析引擎的智能感知系統(tǒng)的挑戰(zhàn)可以被避免削彬。(還是有一些會出現(xiàn)全庸,下文會進(jìn)一步概述)

  • 通過在 JavaScript 中利用 TypeScript的類型定義, TypeScript 可以理解(在某種程度上)JavaScript代碼融痛。

  • 這提供了一種在一個項目中混合編寫 TypeScript 和 JavaScript 代碼的能力壶笼,并且可以在必要的情況下逐步遷移既有的 JavaScript 代碼。

  • TypeScript 將 ES6+ 結(jié)構(gòu)(比如類雁刷,箭頭函數(shù)拌消,模塊等等)編譯成 ES5代碼的能力可以應(yīng)用到 JavaScript 中。(允許編寫 JavaScript ES6代碼并運行在 ES5的引擎中)安券。這也適合于其他的 TypeScript特性(比如提供了通過 TypeScript TSX來提供對 JSX 的支持)

  • 不同項目類型的代碼可以共享上下文(比如支持 ES5的瀏覽器中的代碼可以理解使用ES6編寫的Node模塊墩崩,并且都可以利用 TypeScript 接口定義)。

  • 編碼體驗和設(shè)置是一致的(以 Visual Studio 為例侯勉,不再需要付出維護(hù)三套實現(xiàn)的工程成本鹦筹,取而代之的是只改善其中一個)。

  • 基于當(dāng)前 TypeScript代碼庫可以讓 JavaScript開發(fā)體驗脫離出 VisualStudio址貌。( TypeScript語言服務(wù)可以被非常簡單的應(yīng)用在其他地方铐拐,比如 Sublime 插件徘键,VS Code編輯器等)

挑戰(zhàn)

  • 如何在 JavaScript 內(nèi)聲明和使用類型(比如 JSDoc,lib.d.ts , node.d.ts 遍蟋,第三方庫定義吹害,定制代碼,類型推論虚青,等等)

  • 如何支持一些在 TypeScript 中現(xiàn)在不支持的通用 JavaScript 模式它呀。(比如 RequireJS和 CommonJS 模塊,構(gòu)造函數(shù)和原型屬性等等)

  • 如何將 JavaScript 提供給 TypeScript 編譯過程中(比如那些文件需要被選取棒厘,編譯器參數(shù)等)

  • 假設(shè)上述問題可以解決纵穿,由此產(chǎn)生的 JavaScript 開發(fā)者體驗( 比如讓 TypeScript 對只對JavaScript感興趣的開發(fā)者透明,當(dāng)類型推斷失敗時候的智能感知體驗奢人,對不同的項目類型設(shè)置不同的示例項目結(jié)構(gòu)和設(shè)置谓媒,如何混合代碼或者集成到現(xiàn)有代碼中。

  • 上述挑戰(zhàn)會在下面的內(nèi)容中單獨的提及到何乎。

JavaScript types in TypeScript
JavaScript module systems in TypeScript
JavaScript in TypeScript compilations
JavaScript developer experience

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末句惯,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子支救,更是在濱河造成了極大的恐慌抢野,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件搂妻,死亡現(xiàn)場離奇詭異蒙保,居然都是意外死亡辕棚,警方通過查閱死者的電腦和手機(jī)欲主,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來逝嚎,“玉大人扁瓢,你說我怎么就攤上這事〔咕” “怎么了引几?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長挽铁。 經(jīng)常有香客問我伟桅,道長,這世上最難降的妖魔是什么叽掘? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任楣铁,我火速辦了婚禮,結(jié)果婚禮上更扁,老公的妹妹穿的比我還像新娘盖腕。我一直安慰自己赫冬,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布溃列。 她就那樣靜靜地躺著劲厌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪听隐。 梳的紋絲不亂的頭發(fā)上补鼻,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天,我揣著相機(jī)與錄音遵绰,去河邊找鬼辽幌。 笑死,一個胖子當(dāng)著我的面吹牛椿访,可吹牛的內(nèi)容都是我干的乌企。 我是一名探鬼主播,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼成玫,長吁一口氣:“原來是場噩夢啊……” “哼加酵!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起哭当,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤猪腕,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后钦勘,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體陋葡,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年彻采,在試婚紗的時候發(fā)現(xiàn)自己被綠了腐缤。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡肛响,死狀恐怖岭粤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情特笋,我是刑警寧澤剃浇,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站猎物,受9級特大地震影響虎囚,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蔫磨,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一淘讥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧质帅,春花似錦适揉、人聲如沸留攒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽炼邀。三九已至,卻和暖如春剪侮,著一層夾襖步出監(jiān)牢的瞬間拭宁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工瓣俯, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留杰标,地道東北人。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓彩匕,卻偏偏與公主長得像腔剂,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子驼仪,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容