Typescript - Nuxt.js Auth module における型エラーの修正

何が起こったか

Nuxt.js + Typescript 環境で、Nuxt.js - Auth Module を使おうとしたら、怒られた。

 ERROR  ERROR in /app/src/pages/index.vue(55,12):                                           nuxt:typescript 10:27:56
55:12 Property '$auth' does not exist on type 'CombinedVueInstance<Vue, unknown, { loginWithGitHub(): void; }, unknown, Readonly<Record<never, any>>>'.
    53 |   methods: {
    54 |     loginWithGitHub() {
  > 55 |       this.$auth.loginWith('github')
       |            ^
    56 |     }
    57 |   }
    58 | })

何をしたか

型定義ファイルが足らないのかなと思い、追加した。

$ yarn add -D @types/nuxtjs__auth

また、tsconfig.json に追記。

{
  "compilerOptions": {
    ...
    "types": [
      "@types/nuxtjs__auth"
    ]
  },
  ...
}

で？

error が消えなかった。

なので、npm - @types/nuxtjs__auth の Document を見に行くと、下記の記述があった。

Dependencies: @types/vue

最終的にどうしたか

@types/vue を追加した。

$ yarn add -D @types/vue

tsconfig.json への追記はなし。

-> なぜなら、@types/vue は、deprecated で必要なくなっているから。npm - @types/vue

-> でも、@types/nuxtjs__auth を使うためには、明示的に入れないといけなかったみたい。

結論

Typescript 何もわからん。