モチベーション

毎週木曜日Slackのkey_frontチャンネルでハドル機能を使いお題に対してメンバー同士ディスカッションをする時間を15〜30分程度設けている
今回はtsconfig/basesについて取り上げる
ファシリテーターは筆者なので、事前に読み込んで気になった点などをスクラップに投げていく
開催日は〇〇/〇〇（木）で最終的に議事録として結論をまとめる

1zushun 2023/11/12に更新

背景

下記のLTに参加してtsconfig/basesの存在を知ったのでアウトプットする

tsconfig/bases

https://github.com/tsconfig/bases

1zushun 2023/11/12に更新

Strictest

インストール

npm install --save-dev @tsconfig/strictest
yarn add --dev @tsconfig/strictest

"strict": true

"allowUnusedLabels": false,

"allowUnreachableCode": false,

"exactOptionalPropertyTypes": true,

"noFallthroughCasesInSwitch": true,

"noImplicitOverride": true,

"noImplicitReturns": true,

"noPropertyAccessFromIndexSignature": true,

"noUncheckedIndexedAccess": true,

"noUnusedLocals": true,

"noUnusedParameters": true,

"isolatedModules": true,

"checkJs": true,

"esModuleInterop": true,

"skipLibCheck": true,

"forceConsistentCasingInFileNames": true

1zushun 2023/11/12に更新

Next.js

インストール

npm install --save-dev @tsconfig/next
yarn add --dev @tsconfig/next

※上記と同じオプションは省略する

"lib": ["dom", "dom.iterable", "esnext"],

"noEmit": true,

"module": "esnext",

"moduleResolution": "bundler",

"resolveJsonModule": true,

"jsx": "preserve",

特になし

"incremental": true,

"plugins": [ { "name": "next" } ]

1zushun 2023/11/12

補足

Denoのtsconfigのデフォルト設定

1zushun 2023/11/12

What about combined configs?

TypeScriptの構成拡張システムの以前の制約のため、このリポジトリはNode + ESM、Node + Strictestなどいくつかの共通ベースから結合された構成を提供していました。

しかし、TypeScript v5.0.0では複数の構成を一度に拡張できる機能が提供されており、この問題はもはや存在しません。例えば、Node 18 + Strictestベースの構成から始めたい場合、@tsconfig/node18と@tsconfig/strictestパッケージの両方をインストールし、それらの構成を次のように拡張できます：

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

なのでNext.jsでプロジェクトを始める際は下記で設定してあげるとより堅牢な実装ができる（スタックによってFWは異なると思うのでREADMEを見てください）

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

1zushun 2023/11/15に更新

create-next-app後のtsconfig.jsonの中身

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

@tsconfig/nextとの差分

{
  "extends": ["@tsconfig/next/tsconfig"],
  "compilerOptions": {
    "target": "es5",
    // "lib": ["dom", "dom.iterable", "esnext"],
    // "allowJs": true,
    // "skipLibCheck": true,
    // "strict": true,
    // "noEmit": true,
    // "esModuleInterop": true,
    // "module": "esnext",
    // "moduleResolution": "bundler",
    // "resolveJsonModule": true,
    // "isolatedModules": true,
    // "jsx": "preserve",
    // "incremental": true,
    // "plugins": [
    //   {
    //     "name": "next"
    //   }
    // ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  // "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  // "exclude": ["node_modules"]
}

@tsconfig/strictestも加えてカスタマイズする

{
  "extends": ["@tsconfig/strictest/tsconfig", "@tsconfig/next/tsconfig"],
  "compilerOptions": {
    "target": "es5",
    "exactOptionalPropertyTypes": false,
    "noImplicitOverride": false,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"] // @tsconfigだとみている場所が違う？
}