くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Nuxt.js2.5.xで追加している型定義

Nuxt.jsの2.5からTypeScriptサポートが強化された!!
でもプラグインを使う場合は、型定義が足りない場合がある。。
足りない型定義を追加したときの備忘録。

拡張するのは、以下の3つ

  1. nuxt-i18n
  2. @nuxtjs/axios
  3. @nuxtjs/google-analytics

基本的には、

  1. tsconfig.jsonのtypesに追加するか
  2. Vueインターフェースを拡張して対応する
declare module "vue/types/vue" {
  interface Vue {
     // ここに書く
  }
}

tsconfig.jsonのtypesはこんな感じ

  {
    "compilerOptions": {
      "types": [
        "@types/node",
        "@nuxt/vue-app",
+       "nuxt-i18n/types",
+       "@nuxtjs/axios"
      ]
    },
  }
  • 追加しているプラグインの型定義を追加
  • nuxt-i18n@nuxtjs/axiosを使ってるので追加

nuxt-i18n$nuxtI18nSeo()

  • nuxt-i18n、型定義が一部のみなので、追加
interface NuxtI18nSeo {
  htmlAttrs: { [key: string]: string };
  link: { rel: string; href: string; [key: string]: any }[];
  meta: {
    vmid?: string;
    charset?: string;
    content?: string;
    "http-equiv"?: "content-security-policy" | "refresh";
    name?: string;
    [key: string]: any;
  }[];
}

declare module "vue/types/vue" {
  interface Vue {
    $nuxtI18nSeo(): NuxtI18nSeo;
  }
}

@nuxtjs/google-analyticsの$ga

  • @nuxtjs/google-analyticsにもvue-analytics自体に型定義がないみたい
import "vue-analytics";

interface VueAnalytics {
  event(...args: any): void;
}

declare module "vue/types/vue" {
  interface Vue {
    $ga: VueAnalytics;
  }
}

以上!!

参考にしたサイト様