增强类型以配合插件使用

插件可以增加 Vue 的全局/实例属性和组件选项。在这些情况下,在 TypeScript 中制作插件需要类型声明。庆幸的是,TypeScript 有一个特性来补充现有的类型,叫做模块补充 (module augmentation)

例如,声明一个 string 类型的实例属性 $myProperty

  1. // 1. 确保在声明补充的类型之前导入 'vue'
  2. import Vue from 'vue'
  3. // 2. 定制一个文件,设置你想要补充的类型
  4. // 在 types/vue.d.ts 里 Vue 有构造函数类型
  5. declare module 'vue/types/vue' {
  6. // 3. 声明为 Vue 补充的东西
  7. interface Vue {
  8. $myProperty: string
  9. }
  10. }

在你的项目中包含了上述作为声明文件的代码之后 (像 my-property.d.ts),你就可以在 Vue 实例上使用 $myProperty 了。

  1. var vm = new Vue()
  2. console.log(vm.$myProperty) // 将会顺利编译通过

你也可以声明额外的属性和组件选项:

  1. import Vue from 'vue'
  2. declare module 'vue/types/vue' {
  3. // 可以使用 `VueConstructor` 接口
  4. // 来声明全局属性
  5. interface VueConstructor {
  6. $myGlobal: string
  7. }
  8. }
  9. // ComponentOptions 声明于 types/options.d.ts 之中
  10. declare module 'vue/types/options' {
  11. interface ComponentOptions<V extends Vue> {
  12. myOption?: string
  13. }
  14. }

上述的声明允许下面的代码顺利编译通过:

  1. // 全局属性
  2. console.log(Vue.$myGlobal)
  3. // 额外的组件选项
  4. var vm = new Vue({
  5. myOption: 'Hello'
  6. })