メインコンテンツまでスキップ

strictNullChecks

strictNullChecksnullundefinedのチェックを厳しくするコンパイラオプションです。

  • デフォルト: strictが有効の場合はtrue、それ以外はfalse
  • 追加されたバージョン: 2.0
  • TypeScript公式が有効化推奨

nullundefinedが代入できる危険性

TypeScriptではstrictNullChecksfalseの場合、nullundefinedの代入がチェックされません。非null型や非undefined型の変数にも、nullundefinedが代入できます。

strictNullChecksがfalseの場合
ts
const date: Date = null; // OK
const error: Error = undefined; // OK
strictNullChecksがfalseの場合
ts
const date: Date = null; // OK
const error: Error = undefined; // OK

nullundefinedにはプロパティが存在しません。そのため、JavaScript実行時にエラーになります。

ts
date.getDay();
Cannot read properties of null (reading 'getDay')
ts
date.getDay();
Cannot read properties of null (reading 'getDay')

strictNullCheckstrueの場合、非Null型へのnullの代入、非undefined型へのundefinedの代入それぞれがコンパイルエラーになります。

strictNullChecksがtrueの場合
ts
const date: Date = null;
Type 'null' is not assignable to type 'Date'.2322Type 'null' is not assignable to type 'Date'.
const error: Error = undefined;
Type 'undefined' is not assignable to type 'Error'.2322Type 'undefined' is not assignable to type 'Error'.
strictNullChecksがtrueの場合
ts
const date: Date = null;
Type 'null' is not assignable to type 'Date'.2322Type 'null' is not assignable to type 'Date'.
const error: Error = undefined;
Type 'undefined' is not assignable to type 'Error'.2322Type 'undefined' is not assignable to type 'Error'.

関数の戻り値の型への影響

strictNullChecksの設定によって、関数の戻り値の型が変わることがあります。配列のfindメソッドの戻り値の型は、要素の型もしくはundefinedです。しかし、strictNullChecksfalseの場合、戻り値がundefinedになる可能性をコンパイラが考えなくなります。戻り値にnullが入る可能性がある関数、たとえばgetElementByIdの場合も同様です。

strictNullChecksがfalseの場合
ts
const result = [1, 2, 3].find((x) => x == 1);
const result: number
const element = document.getElementById("main");
const element: HTMLElement
strictNullChecksがfalseの場合
ts
const result = [1, 2, 3].find((x) => x == 1);
const result: number
const element = document.getElementById("main");
const element: HTMLElement

strictNullCheckstrueの場合は、undefinednullが戻り値になる可能性をコンパイラが考慮します。そのため、findなら要素の型とundefinedのユニオン型に、getElementByIdならHTMLElement | nullになります。

strictNullChecksがtrueの場合
ts
const result = [1, 2, 3].find((x) => x == 1);
const result: number | undefined
const element = document.getElementById("main");
const element: HTMLElement | null
strictNullChecksがtrueの場合
ts
const result = [1, 2, 3].find((x) => x == 1);
const result: number | undefined
const element = document.getElementById("main");
const element: HTMLElement | null

この設定の効果は、ユーザー定義の型ガード関数にも及びます。たとえば、関数の戻り値をstring | undefinedと型注釈したとしても、strictNullChecksfalseの場合はstring型になります。

strictNullChecksがfalseの場合
ts
// ユーザー定義の型ガード関数
function getStringOrUndefined(): string | undefined {
return undefined;
}
const value = getStringOrUndefined();
const value: string
strictNullChecksがfalseの場合
ts
// ユーザー定義の型ガード関数
function getStringOrUndefined(): string | undefined {
return undefined;
}
const value = getStringOrUndefined();
const value: string

strictNullChecksは有効にしよう

nullundefinedを期待しない変数にそれらが代入できるのは危険です。また、関数の戻り値にnullundefinedが入る可能性が見えなくなることも、思わぬバグを生む原因になります。strictNullCheckstrueを設定するのがお勧めです。

学びをシェアする

😱TypeScriptデフォルトでnullとundefinedの代入チェックをしない(どんな型にも代入できる)
✅コンパイラオプションstrictNullChecksをtrueにすると、nullとundefinedの代入がチェックされる
👍strictNullChecksは有効にしよう

『サバイバルTypeScript』より

この内容をツイートする

関連情報

📄️ strict

strict系のオプションを一括で有効化する

📄️ null型

JavaScriptのnullは値がないことを示す値です。

📄️ undefined型

JavaScriptのundefinedは未定義を表すプリミティブな値です。変数に値がセットされていないとき、戻り値が無い関数、オブジェクトに存在しないプロパティにアクセスしたとき、配列に存在しないインデックスでアクセスしたときなどに現れます。
  • 質問する ─ 読んでも分からなかったこと、TypeScriptで分からないこと、お気軽にGitHubまで🙂
  • 問題を報告する ─ 文章やサンプルコードなどの誤植はお知らせください。