vue.js - Hogyan készítsünk saját típusokat a Nuxt Typescript-ben?

Amikor a Nuxt-ban használom a $_app-et, azt írja, hogy a $_app nem létezik a this-en. Szeretném hozzáadni a $_app-et a saját típusomként a Nuxt típushoz. Ezt próbáltam:

import Vue from "vue"

interface AppMixin {
    user: any
}

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

Nem tudom, hogy ez helyes-e. Még azt sem tudom, hova kell importálni ezt a kódot. Kérlek, segíts.

Válasz #1

Itt vannak a lépések annak biztosítására, hogy működik.

Tegyük fel, hogy meg kell adnod a $_app-ot, amely AppMixin típusú:

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

import Vue from "vue"

interface AppMixin {
   user: string
}

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

Ezután helyesen kell elnevezned ezt a fájlt: vue.d.ts, és olyan útvonalakra kell tenned, amelyek szerepelnek a tsconfig.json include részében.

Általában létrehozok egy shims/ almappát a projekt könyvtárában, így: https://github.com/wemake-services/wemake-vue-template/tree/master/template/client/shims

És konfiguráld megfelelően, így: https://github.com/wemake-services/wemake-vue-template/blob/master/template/tsconfig.json#L43

Ha helyesen történik, a vue komponenseidben a this.$_app.user hívásai string típusként fognak megjelenni.

Dokumentumok

• Deklarációs fájlok a TypeScript-ben: https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
• Vue példány kiterjesztésének példája: https://github.com/vuejs/vuex/blob/dev/types/vue.d.ts