はじめに
TypeScript を使っていると、ESLint の設定の中で
parserOptions.project という項目を見かけることがあります。
しかし、
- これは何のための設定なのか？
- true にすると急にエラーが増えるのはなぜか？
- どんなときに必要で、どんなときは不要なのか？
と疑問に思う方は多いと思います。
結論から言うと、parserOptions.project は
ESLint に「TypeScript の型情報を読ませるためのスイッチ」です。
これを有効にすると、通常の JavaScript だけでは検知できない
- 型の間違い
- Promise の誤った扱い
- null/undefined 判定のミス
といったバグを、ESLint が検出できるようになります。
この記事では、
-
parserOptions.projectが具体的に何をしているのか - 有効化すると lint がどう強力になるのか
- 実際に動く代表的な lint ルール
- それぞれのルールがどんなバグを防いでくれるのか
を、初学者向けにわかりやすく解説します。
「TypeScript の型チェック lint をもっと活用したい」
「ESLint の設定がよくわからないまま使っている」
という方の参考になれば幸いです。
対象読者
- eslint.config.mjsの
parserOptions.projectが具体的に何をしているのか理解を深めたい方
代表的な ESLint ルール4つと実例
🔹 1. no-unnecessary-type-assertion（不要な型アサーション禁止）
意味
TypeScript がすでに型を理解できているのに、
as string のような 不要な型アサーションを書いてしまうミスを防ぐルール。
例
const name = "John" as string; // ← TypeScriptがstringと推論できるので不要
メリット
- 無駄な
asを減らせる - 型の意図がより明確になる
🔹 2. no-misused-promises（Promise の誤使用を検出）
意味
Promise を 真偽値として使う など、誤った使い方を防ぐルール。
間違った例
if (fetchData()) { ... } // fetchData() は Promise！true/false にはならない
メリット
- 非同期処理のバグを早期に防げる
- Promise の扱いミスにすぐ気づける
※ JSX の onClick={() => ...} などは今回の設定で許可済み。
🔹 3. prefer-nullish-coalescing（?? を優先して使う）
意味
|| より安全な ?? を使うことを推奨するルール。
（null / undefined のときだけ補完される）
例
const value = input || "default"; // 0 や "" でも defaultになってしまう
const value = input ?? "default"; // null/undefined のときだけ default
メリット
- 0 や空文字を意図せず「false扱い」してしまうバグを防げる
- 意図した値補完ができる
🔹 4. no-floating-promises（放置された Promise を禁止）
意味
Promise を await せずに放置すると、エラーが握りつぶされてしまう。
これを防ぐルール。
悪い例
fetchData(); // ← 何も待たず、エラーも拾わずで危険
正しい例
await fetchData();
または
fetchData().catch(handleError);
メリット
- 非同期処理のエラーを確実に処理できる
- 意図しないタイミングでコードが進むバグを防止
まとめ
-
parserOptions.projectは ESLint に TypeScript の型情報を読ませる設定 - 有効にすると “型を理解した lint” が動くようになる
- その結果、
-
Promise の扱い
-
null / undefined 判定
-
不要な型アサーション
-
放置された非同期処理
など、実務でよく起こるバグを自動で防げる
-
TypeScript をしっかり活かしたいなら、
parserOptions.project の理解は避けて通れない重要ポイントです。
最後に
記事を読んでくださった方は、是非弊社開発課のXもフォローしてください。
毎日エンジニアに向けた情報発信を行っています。