【Vue.js, TypeScript】グローバル変数を拾いたい

webpackされたVue.js + TypeScriptのComponentからグローバル変数を拾うための備忘録です。

ページの一部要素をコンポーネント化し、値をサーバー側でレンダリングして渡したいという要件がありました。
その値を使いたいコンポーネントは複数に渡るため、propsにいちいち渡すのも面倒です。

Vue.js公式では

インスタンスプロパティの追加

多くのコンポーネントで使用したいデータ/ユーティリティがあるかもしれませんが、グローバルスコープを汚染したくはありません。
この場合は、プロトタイプに追加すれば全ての Vue インスタンスで使用できます

グローバルは汚染したくないので、以上のようにprototypeを生やして拾えればよさそうです。

TypeScriptではうまくいかない

生のJSであればうまくいくのですが、TypeScriptが絡むと

index.html

Vue.prototype.$config = {
    isLogon: true,
}

App.vue

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data(): {
    isLogon: boolean;
  } {
    return {
      isLogon: this.$config.isLogon, // ここで怒られる
    }
  }
})
</script>

そんなプロパティはないよって怒られてしまいました。

TypeScriptの定義ファイルを用意して解決

直接拾えないことがわかったので、定義ファイルを用意してあげました。

index.html

Vue.prototype.$config = {
    isLogon = true,
}

App.vue

<script lang="ts">
import Vue from "vue";
import Config from "../config"; // 定義ファイルをimport
export default Vue.extend({
  data(): {
    isLogon: boolean;
  } {
    return {
      isLogon: this.$config.isLogon,
    }
  }
})
</script>

config.d.ts

// 定義ファイルを用意
import Vue from "vue";
declare module "vue/types/vue" {
  interface Vue {
    $config: {
        isLogon: boolean,
    };
  }
}

無事グローバル変数を拾うことができました。