Question

在项目中，某些常用功能位于单独的.ts文件中。在这种情况下，我该如何使用i18：

// 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 )
})()

返回错误：

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

我该如何解决？

Answer 1

我们可以实现与以下相同的效果

第1步：在i18n文件夹中创建一个单独的index.ts文件（您可以用自己的方式进行操作-根级别或应用中的任何位置）

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

第2步：确保在main.ts中使用（导入）

main.ts

import { i18n } from '@/i18n';

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

完成上述配置后，我们应该能够在应用程序中所需的任何位置使用翻译

第3步：如何在.ts和.vue文件中使用

// 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>

我希望这将帮助您解决问题。

Vue i18n中带有TypeScript的错误：“类型'VueConstructor'上不存在属性'$ t'。”我该如何解决？

1 个答案: