如何在 Nuxt Typescript 中创建自己的类型？答案

【问题标题】：How to create own types in Nuxt Typescript?如何在 Nuxt Typescript 中创建自己的类型？
【发布时间】：2019-12-14 05:32:31
【问题描述】：

当我在 Nuxt 中使用 $_app 时，它显示 $_app 在 this 上不存在。我想在 Nuxt 类型中包含 $_app 作为我自己的类型。我试过这个：

import Vue from "vue"

interface AppMixin {
    user: any
}

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

我不知道它是否正确。我什至不知道在哪里导入此代码。请帮忙。

【问题讨论】：

标签： typescript vue.js nuxt.js

【解决方案1】：

以下是确保其正常工作的步骤。

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

/**
 * 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，并将其放入您的路径中，这些路径包含在 tsconfig.json 中的 include 中。

我一般在项目目录下创建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

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

文档

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

【讨论】：