C# 出身者のための tsconfig.json 最初の設定（strict と strictNullChecks から）

みなさんこんにちは！ヒロポンです！

C# 育ちの人が TypeScript を始めて、最初に「うっ」となるのが tsconfig.json じゃないですか？？

tsc --init で作ると、コメント付きで設定項目が100個くらいズラッと並ぶ。

C# の .csproj はもっと素っ気ないので、この量にまず怯む。「で、結局どれ入れればいいの？」ってなるやつです。

俺も TS を触り始めた頃、この tsconfig を頭から全部読もうとして、早々に力尽きました。

先に結論を言っておく。C# 出身者はまず strict を true にする。ぶっちゃけ、これだけで大枠 OK です。

今回はその strict と、中でも一番効く strictNullChecks（C# 8 の Nullable 参照型に相当するやつ）を軸に、tsconfig を C# 感覚でどこから触るかを段階で組み立てていきます。

tsconfig の strict を C# の型安全さに寄せておくと、TS でも「C# っぽい安心感」で書けるようになる。そこがゴールです。

忙しい人向けに最初にまとめ

• 新規なら "strict": true をまず入れる。複数の厳格チェックを一括で on にするスイッチ
• その中の strictNullChecks が C# 8 の Nullable 参照型（#nullable enable）に相当。null / undefined を型で追跡してくれる
• 後から strict を有効にすると既存コードが大量にエラーになる。だから最初から入れる
• 他に最低限効かせるのは target（出力する JS バージョン）、module、esModuleInterop（default import を素直にする）
• 既存プロジェクトへの後入れは、noImplicitAny → strictNullChecks と1つずつ上げる

完成形の tsconfig は Step 5 に丸ごと置いてます。まず、何ができるようになるかから。

完成イメージ — C# の型安全さを TypeScript でも効かせる

ゴールはシンプルです。「C# で当たり前にやってた型の守り」を TypeScript でも効かせること。

C# だと、string に null を代入したら、Nullable 参照型を有効にしていれば警告が出ますよね。

TypeScript も、設定次第で同じことができる。

逆に言うと、設定しないと null チェックが一切効かないゆるい言語にもなる。え、そんなにゆるいの？？って感じですが、そこは設定次第なんです。

その分かれ目が tsconfig.json の strict 系オプション。ここを最初に締めておけば、「C# なら弾いてくれたのに TS だと素通りして、本番で undefined エラー」みたいな事故が、コンパイル時に止まります。

ここまでで分かったこと: tsconfig の strict 系を入れると、C# の Nullable 参照型に近い「null を型で守る」状態を TypeScript でも作れる。

前提 — tsc か bun が入っていること

TypeScript をコンパイルできる環境があれば OK です。

npm install -g typescript で tsc を入れるか、bun を使うなら bunx tsc で動く。この記事のコードは、その tsc に相当するコンパイラで型チェックする前提です。

Step 1: tsc –init で tsconfig.json を作る

まず設定ファイルの雛形を生成します。

# プロジェクトのルートで実行
tsc --init

これで、コメントびっしりの tsconfig.json ができます。

C# 出身者はここで全部読もうとしないこと。触るのは数個でいいので、順に足していきます。

Step 2: まず strict を true にする

いちばん大事な1行がこれ。

{
  "compilerOptions": {
    "strict": true
  }
}

strict は単独のチェックじゃなくて、複数の厳格フラグを一括で有効にするスイッチです。strictNullChecks や noImplicitAny（型注釈のない暗黙の any を禁止）みたいな、型を厳しく見る設定がまとめて on になります。

C# で言えば、警告レベルを上げて「怪しい書き方を全部つつく」状態に近い。

最初はうるさく感じます。けど、これが TypeScript を「型のある言語」として使うための土台なんですよね。

ここまでで分かったこと: strict: true は複数の厳格チェックをまとめて有効にするスイッチ。TS を型安全に使う土台になる。

Step 3: strictNullChecks は C# 8 の Nullable 参照型に相当する

strict の中でも、C# 出身者に一番効くのが strictNullChecks です。

これを有効にすると、null と undefined は、他の型に勝手に代入できなくなる。

試しに、string に null を入れてみます。

// strictNullChecks が有効だとこれはエラーになる
let userName: string = null;
// error TS2322: Type 'null' is not assignable to type 'string'.

実行結果（型チェック）:

string 型に null は入らない、と怒られました！！ これ、C# 8 の Nullable 参照型とまったく同じ発想です。

C# で string name に null を入れると警告が出て、null を許すなら string? と書く。TypeScript も、null を許すなら型でそう書きます。

// null を許すなら、型に | null を足して明示する
let userName: string | null = null;   // OK

対応させるとこう。

• C# の string（非 null）↔ TS の string（strictNullChecks 有効）
• C# の string?（null 許容）↔ TS の string | null

C# で <Nullable>enable</Nullable> を入れるのと、tsconfig で strictNullChecks を入れるのは、ほぼ同じ意味だと思っていい。null の可能性を型で追跡する、という思想が共通してます。

ここまでで分かったこと: strictNullChecks は C# 8 の Nullable 参照型に相当。null を許すなら string | null と型で明示する。

Step 4: target / module / esModuleInterop の意味

型の守りは Step 3 までで固まりました。

あと最低限、出力まわりの3つだけ意味を押さえます。

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2020",
    "module": "commonjs",
    "esModuleInterop": true
  }
}

• target: どのバージョンの JavaScript を出力するか。C# の .csproj の TargetFramework（net8.0 等）に近い立ち位置。迷ったら ES2020 あたりで足ります
• module: 出力するモジュール方式。Node.js で動かすなら commonjs、モダンな環境なら ESNext。C# の名前空間・アセンブリ参照の解決方式に相当する、と思うと入りやすい
• esModuleInterop: true にしておくと、import express from "express" みたいな default import が素直に書けるようになる。付けないと古い形式で書く羽目になるので、実質必須です

ここまでで分かったこと: target は出力 JS バージョン、module はモジュール方式、esModuleInterop は default import を素直にする。この3つは実質定番。

C# の設定と tsconfig の対応（早見表）

ここまで出てきたものを、C# 感覚で対応させると、一枚でこうなります。

「C# のあれに相当するのはこれ」と紐づけておく。それだけで、tsconfig の項目が急に迷子じゃなくなります。

Step 5: C# 出身者向けの推奨初期設定

こんな感じで、ここまでを1つにまとめた、そのまま使える初期 tsconfig がこれです。新規プロジェクトなら、これをベースに始めれば大きく外しません。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}