Question

我试图通过额外的映射来增强vue js。我跟着这个：https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

我在vue.d.ts下创建了一个文件./Definitions（相对于我的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"
        ]
    }
}

完成此操作后，请创建相对于typings/vue的{{1}}文件夹以及您提到的路径。在tsconfig.json文件夹中，创建typings/vue文件。通常，您的声明文件如下所示：

index.d.ts

将此方法优先于您尝试执行的方法，因为导入类型文件并不能很好地扩展。

此外，对于最新的Vue.js，您不需要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; } }声明。它们作为官方node_modules/@types/vue包的一部分发货。如果你这样做，那么你应该删除它们。

在typescript中扩充vue.js

1 个答案: