• 增强类型以配合插件使用

    增强类型以配合插件使用

    插件可以增加 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. })