摘要：中即將推出的變化輸入提升自發(fā)布以來，我們一直在收到更好的集成請(qǐng)求。然而，當(dāng)使用開箱即用的時(shí)，目前的集成有些缺乏。例如，不能輕易地推斷使用的基于對(duì)象的默認(rèn)中的類型。這也使得將現(xiàn)有代碼庫遷移到更具挑戰(zhàn)性。

自Vue 2.0發(fā)布以來，我們一直在收到更好的 TypeScript 集成請(qǐng)求。 自從發(fā)布以來，我們已經(jīng)為大多數(shù)核心庫（vue, vue-router, vuex)包含了官方的 TypeScript 類型聲明。 然而，當(dāng)使用開箱即用的 Vue API 時(shí)，目前的集成有些缺乏。 例如，TypeScript 不能輕易地推斷 Vue 使用的基于對(duì)象的默認(rèn) API 中 this 的類型。 為了使我們的 Vue 代碼可以很好地使用 TypeScript，我們必須使用 vue-class-component 裝飾器，這樣我們可以使用基于類的語法來創(chuàng)建 Vue 組件。

對(duì)于喜歡基于類的API的用戶來說，這可能已經(jīng)足夠好了，但對(duì)于僅僅為了類型推斷的用戶不得不使用不同的API是不幸的。 這也使得將現(xiàn)有 Vue 代碼庫遷移到 TypeScript 更具挑戰(zhàn)性。

今年早些時(shí)候，TypeScript 引入了許多新功能，這樣就可以改進(jìn)Vue的類型聲明從而使得 TypeScript 可以更好地理解基于對(duì)象字面量的 API。 來自 TypeScript 團(tuán)隊(duì)的 Daniel Rosenwasser 開始了一個(gè)雄心勃勃的PR（現(xiàn)在由核心團(tuán)隊(duì)成員 HerringtonDarkholme 在這維護(hù)），一旦合并，將提供：

使用默認(rèn)的 Vue API 時(shí)，對(duì)于 this 可以使用適當(dāng)?shù)念愋屯茢唷?它也可以在單文件組件中工作！

基于組件的 props 選項(xiàng)，對(duì)于 this 中的 props 輸入推斷。

最重要的是，這些改進(jìn)也使得純 JavaScript 用戶受益匪淺！ 如果你使用 VSCode 與超級(jí)棒的的 Vetur 擴(kuò)展，你將獲得大大改進(jìn)的自動(dòng)完成建議，甚至在Vue組件中使用純 JavaScript 時(shí)也能獲得輸入提示！ 這是因?yàn)関ue-language-server是負(fù)責(zé)分析 Vue 組件的內(nèi)部包，可以利用 TypeScript 編譯器來提取有關(guān)你的代碼的更多信息。 此外，任何支持語言服務(wù)器協(xié)議的編輯器都可以利用 vue-language-server來提供類似的功能。

對(duì)于那些好奇的人，你可以通過克隆這個(gè) playground 項(xiàng)目（確保獲取 new-types 的分支）并使用 VSCode + Vetur 打開它來嘗試一下！

輸入升級(jí)將在 Vue 2.5 中發(fā)布，目前計(jì)劃在10月初發(fā)布。 我們正在發(fā)布一個(gè)小版本，因?yàn)?JavaScript 公共 API 沒有任何突破性的變化，但是升級(jí)可能需要現(xiàn)有的 TypeScript + Vue 用戶采取一些操作。 這就是為什么我們現(xiàn)在宣布改變，以便你有足夠的時(shí)間來計(jì)劃升級(jí)。

新的輸入至少需要 TypeScript 2.4 版本，建議升級(jí)到最新版本的 TypeScript 以及 Vue 2.5。

之前，我們已經(jīng)推薦將 tsconfig.json 設(shè)為 “allowSyntheticDefaultImports”: true 從而在任何地方使用 ES 風(fēng)格的導(dǎo)入(import Vue from "vue")。 新的輸入將正式轉(zhuǎn)換為ES風(fēng)格的導(dǎo)入/導(dǎo)出語法，因此不再需要配置，并且用戶在所有情況下都需要使用ES風(fēng)格的導(dǎo)入。

為了配合導(dǎo)出語法的改變，以下依賴于 Vue 核心輸入的核心庫 vuex, vue-router, vuex-router-sync, vue-class-component 將會(huì)收到新的主要版本，并且應(yīng)與 Vue 核心 2.5 一起升級(jí)。

當(dāng)執(zhí)行自定義模塊擴(kuò)充時(shí)，用戶應(yīng)該使用 interface VueConstructor 而不是 namespace Vue。(example diff)

如果使用 ComponentOptions 對(duì)組件選項(xiàng)進(jìn)行注釋，則此類型的 computed，watch，render 和生命周期鉤子將需要手動(dòng)類型注解。

我們盡力減少所需的升級(jí)工作，這些類型的改進(jìn)與 vue-class-component 中使用的基于類的 API 兼容。 對(duì)于大多數(shù)用戶來說，只需升級(jí)依賴并切換到ES風(fēng)格的導(dǎo)入即可。 同時(shí)，我們還建議你將Vue 版本鎖定到2.4.x，直到你準(zhǔn)備升級(jí)為止。

2.5之后，我們計(jì)劃在下一個(gè)版本的 vue-cli 中引入對(duì)TypeScript 的官方支持，以便使 TS + Vue 用戶更輕松地啟動(dòng)新項(xiàng)目。 敬請(qǐng)關(guān)注！

這些更改不會(huì)以任何負(fù)面的方式影響非 TypeScript Vue 用戶; 根據(jù)公共JavaScript API，2.5 將完全向后兼容，并且TypeScript CLI集成將完全選擇加入。 但是如上所述，如果你使用vue-language-server強(qiáng)大的編輯器擴(kuò)展，則會(huì)注意到更好的自動(dòng)完成建議。

—

感謝 Daniel Rosenwasser, HerringtonDarkholme, Katashin 以及 Pine Wu 對(duì)于這些特性的工作以及對(duì)這篇文章的審閱。