Nuxt.js + TypeScript で injectを利用した関数の呼び出しを定義する

Nuxt.jsでは inject を利用することで、コンポーネント間などで共通で使用できる関数を定義することができます。
参考： Nuxt.jsで異なるコンポーネントから共通で利用できる関数を定義する（inject編）

Javascriptでは、下記のように定義した関数（ 例：$hoge() ）を呼び出すことが可能です。

pages/index.vue

<script>
export default {
  methods: {
    hoge() {
      return this.$hoge();  // ここで呼び出し
    }
  }
}
</script>

しかし、Nuxt.js + TypeScript の環境では、そのまま this.$hoge() のように呼び出すことはできません。
(this as any).$hoge() というように this の型を any とするなどの方法がありますが、これはやりたくないですね。

TypeScriptでも this.$hoge() のように呼び出せるようにする方法をまとめておきます。

型定義ファイルを作成

今回は、injectを利用した $hoge() という関数を定義済みと想定します。
方法は下記を参考にしてください。
参考： Nuxt.jsで異なるコンポーネントから共通で利用できる関数を定義する（inject編）

まず、プロジェクトのルートに types というディレクトリを作成し、その中に下記のような vue.d.ts というファイルを作成します（ディレクトリとファイル名は例です）。

types/vue.d.ts

import Vue from 'vue';

declare module 'vue/types/vue' {
  interface Vue {
    $hoge(): void  // ここに ＄hoge を定義
  }
}

ここでは例として $hoge(): void としていますが、引数や戻り値によって $hoge(arg: string): string など型を適宜定義します。

型定義ファイルの読み込み

先程作成した型定義ファイル（types/vue.d.ts）を読み込むように、tsconfig.json に追記します。

tsconfig.json

{
  "compilerOptions": {
    "typeRoots" : [
      "./types"
    ]
  },
}

設定はこれだけです。

以上で、Nuxt.js + TypeScript の環境でも this.$hoge() のように関数を呼び出すことが出来ます。