TS 在 Vue2 中的使用

1. 定义组件

说明：

• 使用 Vue.component 或 Vue.extend 可以获得类型提示

示例：

<template>
  <div>...</div>
</template>
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  // type inference enabled
})
</script>

2. 定义类风格的组件

示例：

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

// The @Component decorator indicates the class is a Vue component
@Component({
  // All component options are allowed in here
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // Initial data can be declared as instance properties
  message: string = 'Hello!'

  // Component methods can be declared as instance methods
  onClick (): void {
    window.alert(this.message)
  }
}
</script>

3. 自定义 Vue 实例属性

示例：

var vm = new Vue()

console.log(vm.$myProperty) // This should compile successfully

类型声明：(src/global.d.ts)

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare augmentation for Vue
  interface Vue {
    $myProperty: string
  }
}

4. 自定义 Vue 全局属性

示例：

// Global property
console.log(Vue.$myGlobal)

类型声明：(src/global.d.ts)

import Vue from 'vue'

declare module 'vue/types/vue' {
  // Global properties can be declared
  // on the `VueConstructor` interface
  interface VueConstructor {
    $myGlobal: string
  }
}

5. 自定义选项

示例：

// Additional component option
var vm = new Vue({
  myOption: 'Hello'
})

类型声明：(src/global.d.ts)

import Vue from 'vue'

// ComponentOptions is declared in types/options.d.ts
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    myOption?: string
  }
}

6. 参考

• https://v2.vuejs.org/v2/guide/typescript (opens new window)