Nuxt3 で @tsconfig/strictest を有効にする方法

@tsconfig/strictest を extendしたい

TypeScriptにおける型チェックには段階があり、strict: true だけではオンにならないオプションがいくつかあります。

（代表例としては arr[index] が undefined になる可能性を指摘してくれないなど）

https://zenn.dev/yuta_ura/articles/introduce-tsconfig-bases

こちらの記事で、そういったオプションを最大限に強化する方法として @tsconfig/strictest の導入が紹介されています。

tsconfig.json

{
    "extends": "@tsconfig/strictest/tsconfig.json",
}

この存在を知ると、今後のプロジェクトでは常にこのオプションを導入しておきたい気持ちに駆られることでしょう。

Nuxt3 の tsconfig.extends は埋まっている

ところが、Nuxt 3 の tsconfig.json のページによると、Nuxt3 では、以下のようにNuxtが自動生成する tsconfig をextendsに指定することが推奨されています。

tsconfig.json

{
  "extends": "./.nuxt/tsconfig.json"
}

さて、tsconfig.json は extends で配列などでの複数ファイルの指定をサポートしていないので、どちらかを選ぶことになってしまいます。

https://github.com/microsoft/TypeScript/issues/29118

どうすれば良いでしょうか？

.nuxt/tsconfig.json で strictest を extend させる

実は nuxt.config.ts のオプションとして、Nuxtで自動生成する tsconfig.json の記述をカスタマイズする方法が提供されています。

https://nuxt.com/docs/api/configuration/nuxt-config#tsconfig

nuxt.config.ts

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      extends: "@tsconfig/strictest/tsconfig.json",
    },
  },
});

このように書くことで、自動生成される .nuxt/tsconfig.json に "extends": "@tsconfig/strictest/tsconfig.json" という記述が追加されます。

あとはプロジェクトファイルの tsconfig.json で .nuxt/tsconfig.json を extend するだけで、 Nuxt3 の設定も @strictest の設定 もどちらも含まれた状態になります。

これで Nuxt3 でも最も厳格な型設定を簡単に適用できるようになりました。

皆さんの型安全なNuxt3ライフの助けになれば幸いです。