如何在Nuxt打字稿中创建自己的类型？

Question

当我在Nuxt中使用$_app时，它说$_app在this上不存在。我想将$_app作为我自己的类型包括在Nuxt类型中。我试过了：

import Vue from "vue"

interface AppMixin {
    user: any
}

declare module "vue/types/vue" {
    interface Vue {
        $_app: AppMixin
    }
}

我不知道这是正确的。我什至不知道在哪里导入此代码。请帮助。

Answer 1

这里是确保其正常工作的步骤。

假设您需要提供$_app类型的AppMixin：

/**
 * Extends interfaces in Vue.js
 */

import Vue from "vue"

interface AppMixin {
   user: string
}

declare module "vue/types/vue" {
  interface Vue {
    $_app: AppMixin
  }
}

然后，您需要正确命名此文件：vue.d.ts并将其放在include中包含在tsconfig.json中的路径中。

我通常在项目目录中创建shims/子文件夹，如下所示：https://github.com/wemake-services/wemake-vue-template/tree/master/template/client/shims

并正确配置，例如：https://github.com/wemake-services/wemake-vue-template/blob/master/template/tsconfig.json#L43

如果操作正确，则在this.$_app.user组件内对vue的调用将显示string类型。

文档

• TypeScript中的声明文件：https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
• [Vue实例扩展示例：https://github.com/vuejs/vuex/blob/dev/types/vue.d.ts