vue-i18n を TypeScript で静的型付けする

最近の気づきをメモがわりに。

vue(正確にはNuxt.js) + TypeScriptのプロジェクトでvue-i18nを導入して国際化対応しました。

vue-i18nのセットアップは公式をご参照ください。
https://kazupon.github.io/vue-i18n/

内容は実際とは違いますが、
やろうとしたことの大筋はこんなです。

// テキトーに言語セットを用意しておく
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
};


// App.vue 
export default class App extends Vue {
  message!: string; // messageをstringで片付け (今回のような形だと!を付けないと別のエラーが起きるので!付けてます)
  mounted () {
    this.message = this.$t('message.hello') //  'こんにちは、世界'というstringが入ってくることを想定
  }
}

上記でError起きました

エラー見ればどうってことないのですが、型がstringじゃないんですね
以下のようにすれば大丈夫です

import { TranslateResult } from 'vue-i18n'

export default class App extends Vue {
  message!: TranslateResult;
  mounted () {
    this.message = this.$t('message.hello')
  }
}

最近、vueよりもReact + TypeScriptが楽しい