やりたいこと

242:17 Property '$i8n' does not exist on type 'AccountSignupController'.
   240 | 
   241 |   get locale () {
 > 242 |     return this.$i8n.locale
       |                 ^
   243 |   }
   244 | 
   245 |   //head() {

もともとNuxt + VuetiryでJavaScriptを使って作っていたWebサイト（Coordinater）のFront部分をTypeScriptに書き換えています。

nuxt-i18nを使っているのですが、$i18nを使おうとした時にErrorが発生し、色々検索してもヒットせず解消に苦労したのでメモします。

やったこと

「does not exist」というメッセージとは裏腹に、console.logなどをすると分かりますが、$i18nは存在しますし、動いているようには見えます。でもエラーが出ているのは流石に何とかしたいですよね。

前に型が定義されてなかったことでこういう事象を見かけたことがあった気がするので定義してみたところ解消しました。

@/plugins/i18n.ts

import VueI18n, { IVueI18n } from "vue-i18n";

declare module 'vue/types/vue' {
 interface Vue {
   readonly $i18n: VueI18n & IVueI18n
 }
}​

nuxt.config.js

plugins: [
 '@/plugins/i18n.ts',
], 

これでエラーが出なくなります。

ただ、一つ気になるのが、Try & Errorで色々定義してた時に下記のようなメッセージが出てきまして、だから合わせてやったら解消したのですが、ということはバッチリ定義はされているということな訳で、何で事象が起こっていて、何で解消したのか分からなくなってきました。

 ERROR  ERROR in /ほげほげ/app/web/node_modules/vue-i18n/types/index.d.ts(216,14):                                                                                                                          nuxt:typescript 17:57:11
216:14 All declarations of '$i18n' must have identical modifiers.
   214 | declare module 'vue/types/vue' {
   215 |   interface Vue {
 > 216 |     readonly $i18n: VueI18n & IVueI18n;
       |              ^
   217 |     $t: typeof VueI18n.prototype.t;
   218 |     $tc: typeof VueI18n.prototype.tc;
   219 |     $te: typeof VueI18n.prototype.te;

まあ、解消したから良いんですが。。