strictNullChecks

strictNullChecksはnullやundefinedのチェックを厳しくするコンパイラオプションです。

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

`null`と`undefined`が代入できる危険性

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

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

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

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

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

strictNullChecksがtrueの場合、非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です。しかし、strictNullChecksがfalseの場合、戻り値が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

strictNullChecksがtrueの場合は、undefinedやnullが戻り値になる可能性をコンパイラが考慮します。そのため、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と型注釈したとしても、strictNullChecksがfalseの場合は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