主要內容：
- JavaScript在官方的聲明及推薦配置
- 創建工程及編碼的開發工具推薦
- 基本用例演示
- 基於類風格的Vue組件
- 插件使用中的參數類型
- 註釋返回類型
Vue CLI提供了構建 TypeScript工具支持。在Vue的下一個主要版本（3.x）我們也計劃更多的提供我們對TypeScript的支持，使用基於類組件的API和TSX支持
在NPM包的官方聲明
一個靜態的系統能阻止許多潛在的運行時錯誤，尤其是隨着應用的不斷成長。這就是爲什麼在Vue core提供了TypeScript的official type declarations,還爲vue-router和vuex提供了相應聲明。
由於這些是被髮布在NPM，最新版本的TypeScript知道怎麼去在NPM包裏解析類型聲明，這意味着通過NPM安裝的時候，你不需要使用任何額外的工具，就可以在Vue使用TypeScript.
被推薦的配置
// tsconfig.json
{
"compilerOptions": {
// 與瀏覽器的支持保持一致
"target": "es5",
// 可以對'this'上的屬性數據進行更嚴格的推斷
"strict": true,
// 如果使用webpack 2+ 或 rollup， 可以利用tree shaking：
"module": "es2015",
"moduleResolution": "node"
}
}
注意你必須包含strict：true（或至少noImplicitThis: true,它是trict標記的一部分）去在this組件方法中啓用類型檢查，否則它總是被當做any對待。
更多的細節查看類型編譯器選項文檔（英）.
開發工具
創建工程
Vue CLI 3可以使用TypeScript生成新的工程。創建方式：
# 1. 安裝Vue CLI，如果它沒有被安裝過
npm install --global @vue/cli
# 2. 創建一個新的工程，而後選擇'手動選擇功能'選項
vue create my-Project-name
編輯器支持
對於使用Vue開發TypeScript，我們強烈建議使用Visual Studio Code，提供了很好的對TypeSript的’開箱即用‘的支持。如果你使用單文件組件(SFCs),可以使用Vetur extenstion，該插件提供了在SFCs的TypeScript推斷和和其他許多很棒的功能。
WebStorm也提供了對Vue和TypeScript的開箱即用的支持。
基本用例
去讓TypeScript在Vue組件操作項內做正確的類型推斷，你需要使用Vue.component或Vue.extend定義組件：
import Vue from 'vue'
const Component = Vue.extend({
// 能夠做類型推斷
})
const Component = {
// 這樣沒有類型推斷
// 因爲TypeScript不能確定這是Vue組件的操作項
}
基於類的Vue組件
如果你在聲明類的時候喜歡使用基於類的API，你可以使用官方維護的vue-class-component裝飾器。
import Vue form 'vue'
import Component from 'vue-class-component'
// @Component裝飾器表示類是一個Vue組件
Component({
// 所有的組件操作項在這都被允許
template: '<button @click=onClick>Click!</button>'
})
export default class MyComponent extends Vue {
// 初始化數據被作爲實例屬性聲明
message：string = 'Hello!'
// 組件方法被作爲實例方法聲明
onClick(): void {
window.alert(this.message)
}
}
擴展插件使用的類型
插件可以增加Vue的全局/實例屬性和組件操作項。在某些情況下，在TypeScript中編譯插件需要類型聲明。幸運的是，有一個TypeScript的特性去擴展已經存在的類型稱爲模塊擴展.
例如，使用類型string聲明一個實例屬性$myProperty:
// 1. 確保聲明增加類型前導入'vue'
import Vue from 'vue'
// 2.指定你想要擴充的文件類型
// 在types/vue.d.ts裏Vue有構造函數類型
declare module 'vue/types/vue' {
// 3. 爲Vue聲明增加類型
interface Vue {
$myProperty: string
}
}
在你的工程裏面包含以上代碼作爲聲明文件（像my-property.d.ts）之後,你能夠在Vue實例使用$myProperty.
var vm = new Vue()
console.log(vm.$myProperty) // 這裏應該編譯成功
你也能夠聲明額外的全局屬性和組件選項：
import Vue from 'vue'
declare module 'vue/types/vue' {
// 全局屬性被聲明
// 在'VueConstructor'接口
interface VueConstructor {
$myGlobal: string
}
}
// ComponentOptions 被聲明在 types/options.d.ts
declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue> {
myOption?: string
}
}
以上的聲明允許以下代碼被編譯：
// 全局屬性
console.log(Vue.$myGlobal)
// 新增的組件選項
var vm = new Vue({
myOption: 'Hello'
})
註釋返回類型
由於Vue的聲明文件是天生循環的，TypeScript去推斷特定方法的類型可能比較困難。因爲這個理由，你可能需要在像render方法和這些computed中註釋返回類型。
import Vue, { VNonde } from 'vue'
const Component = Vue.extend({
data () {
return {
msg: 'Hello'
}
}，
methods: {
// 由於返回類型中的'this'需要註釋
greeting(): string {
return this.msg + 'world'
}
},
computed: {
// 需要註釋
greeting(): string {
return this.greet() + '!'
}
},
// 'createElement'被推斷出來，但是'render'需要返回類型
render (createElement): VNode {
return createElement('div', this.greeting)
}
})
如果你發現類型推斷或成員補齊不起作用，標註某些方法可能幫助處理這些問題，可以使用 -- noImplicitAny操作項將幫助你發現這些未註釋的方法。