javascript - Feil i Vue i18n med TypeScript: "Egenskapen '$t' finnes ikke på typen 'VueConstructor'.". Hvordan kan jeg fikse det?

I prosjektet er noen vanlige funksjoner i separate .ts-filer. Hvordan kan jeg bruke i18n i slike tilfeller:

// for i18n
import  Vue  from 'vue'
declare module 'vue/types/vue' {
  interface VueConstructor  {
    $t: any
  }
}
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    t?: any
  }
}

(()=>{
  const test = Vue.$t('auth.title');
  console.log( test )
})()

Returner en feil:

Property '$t' does not exist on type 'VueConstructor<Vue>"

Hvordan kan jeg fikse det?

Svar #1

vi kan oppnå det samme som nedenfor

Trinn 1: opprett en egen index.ts-fil inne i en i18n-mappe (du kan gjøre det på din egen måte - på rotnivå eller hvor som helst i appen din)

i18n/index.ts

import Vue from 'vue';
import VueI18n from 'vue-i18n';

// register i18n module
Vue.use(VueI18n);

const i18n = new VueI18n({
   locale: 'nb-NO', //if you need get the browser language use following "window.navigator.language"
   fallbackLocale: 'en',
   messages: {en, no},
   silentTranslationWarn: true
})

const translate = (key: string) => {
  if (!key) {
    return '';
  }
  return i18n.t(key);
};

export { i18n, translate}; //export above method

Trinn 2: sørg for å bruke (importere) ovenfor i main.ts

main.ts

import { i18n } from '@/i18n';

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

Etter ovennevnte konfigurasjon bør vi kunne bruke oversettelse hvor som helst vi ønsker i applikasjonen vår

Trinn 3: Hvordan bruke det i .ts- og .vue-filer

// first import it into the file
import { translate, i18n } from '@/i18n';

//this is how we can use translation inside a html if we need
<template>
  <h1>{{'sample text' | translate}}</h1>
</template>

//this is how we can use translation inside a .ts or .vue files
<script lang='ts'>    
  //normal scenario
  testFunc(){
    let test = `${translate('sample text')}`;
    console.log(test );
  }

  //in your case it should be like below
  (()=>{
    const test = `${translate('auth.title')}`;
    console.log( test )
  })()
</script>

Jeg håper at dette vil hjelpe deg med å løse problemet ditt.

Svar #2

Kanskje du trenger en egendefinert typspesifikasjon for ts-konfigurasjonen din;

// src/vue-i18n.d.ts
import 'vue-i18n'

declare module 'vue' {
  interface ComponentCustomProperties {
    $t: (typeof import('vue-i18n'))['t']
  }
}

Sørg for at tsconfig.json-filen din inkluderer src (eller en annen, f.eks. src/types) katalog for typekontroll.

// tsconfig.json
{
  "compilerOptions": {
    // other options...
    "typeRoots": ["./node_modules/@types", "./src"]
  }
}

Eller bruk I18n composable (mer vue3-aktig)

<script lang="ts" setup>
const { t } = useI18n()
</script>
...
<template>
  <span>{{t('your.key')}}</span>
</template

Relaterte artikler