Programmingフロントエンド開発者

strictNullChecksパラメータはTypeScriptでnullとundefinedの厳密なチェックをどのように機能させますか?その有効化は日常のプログラミングにどのように影響しますか?

Hintsage AIアシスタントで面接を突破

回答

strictNullChecksパラメータは、TypeScriptがnullundefinedを別々の型として扱うかどうかを決定します。このパラメータがオフの場合(バージョン2.0以前のデフォルト)、任意の型の変数はコンパイルエラーなくnullundefinedの値を受け取ることができます。これがオンの場合(strictNullChecks: true)、これらの値は明示的に指定されている場合を除いて、他の型と互換性がないと見なされます。

例:

// strictNullChecks: false let name: string = null; // OK // strictNullChecks: true let title: string = null; // エラー! let title2: string | null = null; // OK, 明示的な型の結合

厳密なチェックを有効にすることで、関数/メソッドがnullundefinedを受け取る可能性を考慮していない場合に、開発の初期段階でエラーを回避するのに役立ちます。

トリッキーな質問

strictNullChecksが有効な場合、number型の変数にundefinedを割り当てることはできますか?

回答: いいえ、strictNullChecksが有効な場合、number型の変数にはundefinedを割り当てることはできません — 明示的に型をnumber | undefinedとして宣言しない限り。

例:

let count: number = undefined; // strictNullChecks: true の場合 TSエラー let count2: number | undefined = undefined; // OK

このテーマの詳細を知らないことによる実際のエラーの例。


物語

ある大規模なnode.jsプロジェクトで、開発者は「移行を容易にするため」にnull/undefinedの厳密なチェックを無効にしました。その結果、ローンチから1年後、APIの関数の1つが数値の代わりにundefinedを返しました。クライアント側のコードはこれに備えていなかったため、response.count + 1という単純な計算をしただけで、ユーザー側のアプリケーションが致命的にクラッシュしました。


物語

ecommerceプロジェクトで、商品コレクションがサーバーからnullとして届き、[]ではありませんでした。UIコンポーネントはこれらの商品に対してmapを実行し、各商品のプロパティを呼び出すとレンダリングエラーが発生しました。strictNullChecksを有効にすると、ほぼ40の類似の箇所がすぐに明るみに出ました。


物語

大規模なライブラリで、一部のコンポーネントAPIのプロップスに対する「許可された」値は、string | null | undefinedに時間とともに増えました。これが未処理のケースを多数引き起こしました。strictNullChecksを有効にすると、特定の構成でのインターフェイスのクラッシュに関する目に見えにくいバグを捕らえることができました。