nuxt + TypeScriptでプラグインの定義を追加する

nuxt2.1.0, node10.11.0
2018.10.19現在

---

独自のプラグインを書いた場合、vueのTypeScript定義の拡張が必要になる。

単純なプロパティの追加は公式docに記載があるが、独自クラスのインスタンス等を設定したい場合はどうするのがベスト・プラクティスなのか。
https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

とりあえず作ってみた形のもの

~/plugin/some-plugin.ts

// plugin classの定義
export class SomePlugin {
  private someStatus: string = '';

  constructor(status: string) {
    this.someStatus = status
  }

  getStatus(): string {
    return this.someStatus
  }
}

// plugin
export default ({ app }, inject) => {
  // ... get status logic
  const st = 'hoge';

  inject('somePlugin', new SomePlugin(st));
};

pluginファイルでクラス定義して、、、

some.d.ts

declare module '*.vue' {
  import { SomePlugin } from '~/plugins/some-plugin.ts';

  module 'vue/types/vue' {
    interface Vue {
      $somePlugin: SomePlugin;
    }
  }
}

d.tsファイルでvue定義を拡張し、、、

some.vue

@Component
export default class SomeVue extends Vue {
  getSomeStatus(): string {
    return this.$somePlugin.getStatus()
  }
}

実際のvue componentで使う。

これで動きはしたけどもっといいやり方ありそう。