Nuxt (3.0.0 stable)でTypeScriptのstrict:trueを開発中とその他で切り替える

いよいよバージョン3.0.0 stableがリリースされたNuxtですが、

nuxt.com

RC12までTypeScriptのcompilerOptionsのstrictがデフォルトfalseだったがRC13以降trueになりました。

詳細はこのリリースノート v3.0.0-rc.13 · Discussion #8687 · nuxt/framework · GitHub

これによってこれまでゆるゆるなチェックで開発してたコードが大量のエラーを吐くようになってしまい、すぐには直せない状態になってしまったので自戒を込めてメモ。

もちろんnuxt.configで上書きできますが、ただstrict:falseにしてしまうと今後も型ゆるゆるコードを書き続けてしまうことになります

nuxt.com

export default defineNuxtConfig({ 
  // 略
  typescript: {
    strict: false
  }
})

そこで、開発中のyarn devではtrueとし、それ以外ではfalseになるよう環境変数NODE_ENVをつかって切り替えるようにしました。

export default defineNuxtConfig({
  // 略
  typescript: {

    strict: process.env.NODE_ENV === 'development'
  }
})

process.env.NODE_ENVはyarn devは'development'、その他nuxi build, nuxi typecheckなどでは'production'となります。

これで開発中はVSCodeで赤線を見ながら己の未熟さを噛み締めながら開発し、CIで行っているTypeCheckでは最低限のチェックを行う、ということが可能になりました。