Saya memiliki Vue mixin seperti:

const mixin = Vue.extend({
    methods: {
        $languages: function(): object {
            return {
                en: 'english'
            }
        }
    }
}


Vue.mixin(mixin)
new Vue({
    router,
    render: h => h(Frame)
}).$mount('#app')

... dan saya mencoba menggunakannya dalam komponen:

<template lang="pug">
    .languages
        a( v-for="language, code in $languages()" :key="code" @click="$root.$i18n.locale = code") {{ language }}&nbsp;
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    methods: {
        languages: function () {
            console.log(this.$languages)
        }
    }
})
</script>

Tapi saya mendapatkan kesalahan, mengatakan "Properti '$languages' tidak ada pada tipe 'CombinedVueInstance void; }, unknown, Readonly>>'"

Anehnya, jika saya hanya mencoba menggunakannya di template, itu berhasil. Nama bahasa muncul. Hanya kode TypeScript yang tidak mengenali fungsinya.

1
Zoltán Matók 20 Mei 2020, 19:55

1 menjawab

Jawaban Terbaik

Anda perlu menambah modul vue untuk memberikan pengetikan untuk $languages, perhatikan:

// vue-shim.d.ts

declare module 'vue/types/vue' {
  interface Vue {
    $languages: LanguageService
  }
}

Dan psuedo LanguageService

// language-service.d.ts

export interface LanguageService {
  $languages: () => Record<string, string>
}

Anda dapat membaca lebih lanjut tentang menambah Vue di sini

1
Ohgodwhy 20 Mei 2020, 17:00