vue.js - Nuxt Typescript'te kendi tiplerimi nasıl oluşturabilirim?

Nuxt'te $_app kullandığımda, this üzerinde $_app mevcut değil diyor. $_app'i Nuxt tipi içinde kendi tipim olarak eklemek istiyorum. Şunu denedim:

import Vue from "vue"

interface AppMixin {
    user: any
}

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

Doğru olup olmadığını bilmiyorum. Bu kodu nereden içe aktaracağımı bile bilmiyorum. Lütfen yardım edin.

Cevap #1

İşte bunun çalıştığından emin olmak için adımlar.

Diyelim ki AppMixin türüne sahip $_app sağlamanız gerekiyor:

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

import Vue from "vue"

interface AppMixin {
   user: string
}

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

Sonra, bu dosyayı doğru şekilde adlandırmanız gerekir: vue.d.ts ve bunu tsconfig.json içindeki include bölümüne dahil edilen yollarınızın içine koyun.

Genellikle projenin dizininde shims/ alt klasörü oluştururum, şöyle: https://github.com/wemake-services/wemake-vue-template/tree/master/template/client/shims

Ve onu düzgün bir şekilde şu şekilde yapılandırın: https://github.com/wemake-services/wemake-vue-template/blob/master/template/tsconfig.json#L43

Doğru yapılırsa, vue bileşenleriniz içindeki this.$_app.user çağrılarınızın string türü açığa çıkacaktır.

Belgeler

• TypeScript'te bildirim dosyaları: https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
• Vue örneği genişletme örneği: https://github.com/vuejs/vuex/blob/dev/types/vue.d.ts