ユーザーアイコン

mizuko

10日前

0
0

TypeScriptの型ナローイングがクロージャ内で失われる問題と解決方法

TypeScript
ts-pattern

TypeScriptでnullチェックを行った後でも、関数クロージャ内では型ナローイングが失われることがある。

問題のコード例:

if (section.value == null) { return "-"; } return match(reportDimension.aggregationSpan) .with("YEARLY", () => { // クロージャ内では型ナローイングが失われる section.value.from // エラー: 'section.value' is possibly 'undefined' })

原因: TypeScriptは関数クロージャ内でオブジェクトのプロパティが変更される可能性を考慮するため、nullチェック後でも型ナローイングが保持されない。

解決方法: nullチェック後に変数に代入することで解決できる。

if (section.value == null) { return "-"; } const { value } = section; // 変数に代入 return match(reportDimension.aggregationSpan) .with("YEARLY", () => { value.from // エラーなし })

変数は不変であることをTypeScriptが理解できるため、型ナローイングが保持される。非nullアサーション(!)を使う代わりに、この方法でより安全なコードが書ける。