くらげになりたい。

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

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

Nuxt.js Vue.js TypeScript

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

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

nuxt-i18n
@nuxtjs/axios
@nuxtjs/google-analytics

基本的には、

tsconfig.jsonのtypesに追加するか
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;
  }
}

以上！！

参考にしたサイト様