在 typescript 中增强 vue.js

Question

我正在尝试通过附加映射来增强 vue js。我正在关注这个：https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

我在./Definitions 下创建了一个文件vue.d.ts（相对于我的main.ts） 我在我的main.ts 中引用了它：

require("./Definitions/vue.d.ts");

在vue.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
    }
}

但是这个：

var vm = new Vue()
console.log(vm.$myProperty);

无法解决。

我尝试将 declare module 'vue/types/vue' 更改为 declare module 'vue'。这给了我一个错误："Cannot augument module 'vue' because it resolves to a non-module entity"

原始的 vue 类型位于 {projectDir}\node_modules\@types\vue\index.d.ts 下。我正在使用 webpack。

我该如何正确操作？

Answer 1

假设你的项目有tsconfig.json，你应该设置compilerOptions：

{
    "compilerOptions": {

        "baseUrl": ".",

        // other options go here

        "typeRoots": [
            "./node_modules/@types",
            "./typings"
        ]
    }
}

完成后，创建相对于tsconfig.json 的typings/vue 文件夹和您提到的路径。在typings/vue 文件夹中，创建index.d.ts 文件。通常，您的声明文件如下所示：

import Vue from 'vue';
import { AppStore } from '../../src/store/store';

declare module 'vue/types/vue' {
    // Global properties can be declared
    // on the `VueConstructor` interface
    interface VueConstructor {
        // some more augmentation
    }

    // Properties added to Vue interface are added to Vue instance
    interface Vue {
        store$: AppStore;
    }
}

比您尝试使用的方法更喜欢这种方法，因为导入类型文件不能很好地扩展。

此外，使用最新的 Vue.js，您不需要 node_modules/@types/vue 声明。它们作为官方node_modules/vue 包装的一部分发货。如果你这样做，那么你应该删除那些。