TypeScriptのnull/undefinedチェック方法
2024-08-23
TypeScriptでnullとundefinedを同時にチェックする方法
TypeScriptでは、nullとundefinedはどちらもnullish値として扱われます。つまり、両者を同時にチェックする必要はありません。
オプショナルチェイニング (?.)
- 値が
nullまたはundefinedの場合、プロパティアクセスや関数呼び出しを安全にスキップします。
const obj = { name: 'John' };
const name = obj?.name; // nameは'John'またはundefinedになります
null合体演算子 (??)
- 値が
nullまたはundefinedの場合、デフォルト値を返します。
const name = obj?.name ?? 'Unknown'; // nameは'John'または'Unknown'になります
typeof演算子
- 値のデータ型を文字列で返します。
if (typeof value === 'undefined' || value === null) {
// valueはnullまたはundefinedです
}
カスタムガード関数
- 独自のガード関数を作成して、特定の条件をチェックします。
function isNotNullOrUndefined<T>(value: T | null | undefined): value is T {
return value !== null && value !== undefined;
}
if (isNotNullOrUndefined(obj)) {
// objはnullまたはundefinedではありません
}
これらの方法を使用することで、TypeScriptでnullとundefinedを効率的にチェックし、エラーを防止することができます。
注意
- カスタムガード関数は、複雑な条件や再利用可能なロジックが必要な場合に便利です。
- オプショナルチェイニングとnull合体演算子は、TypeScriptの型システムと連携して、より安全なコードを書くことができます。
const obj = { name: 'John' };
const name = obj?.name; // nameは'John'またはundefinedになります
const name = obj?.name ?? 'Unknown'; // nameは'John'または'Unknown'になります
if (typeof value === 'undefined' || value === null) {
// valueはnullまたはundefinedです
}
function isNotNullOrUndefined<T>(value: T | null | undefined): value is T {
return value !== null && value !== undefined;
}
if (isNotNullOrUndefined(obj)) {
// objはnullまたはundefinedではありません
}
各方法の解説
- カスタムガード関数
- 独自のガード関数を作成することで、より複雑な条件や再利用可能なロジックを実装できます。
- ジェネリック型を使用することで、さまざまな型の値に対応できます。
- typeof演算子
typeof演算子を使用することで、値のデータ型を取得できます。typeof value === 'undefined'で値がundefinedかどうかをチェックし、value === nullで値がnullかどうかをチェックします。
- null合体演算子
??演算子を使用することで、値がnullまたはundefinedの場合にデフォルト値を設定できます。- 値が
nullまたはundefinedでない場合は、元の値が返されます。
- オプショナルチェイニング
?.演算子を使用することで、プロパティやメソッドが存在しない場合にエラーが発生するのを防ぎます。- 値が
nullまたはundefinedの場合は、undefinedが返されます。
Non-null Assertion Operator (!)
- 注意
誤った使用によりエラーが発生する可能性があります。 - 値が
nullまたはundefinedでないことをアサートします。
const obj: { name: string | null } = { name: null };
const name = obj!.name; // nameは'John'またはエラーになります
Type Guard
- カスタム関数を使用して、特定の型かどうかを判定します。
function isString(value: unknown): value is string {
return typeof value === 'string';
}
const name = obj.name;
if (isString(name)) {
// nameはstring型です
}
Template Literal Type
- 文字列テンプレートを使用して、型を指定します。
type NameType = string | null;
function getName(name: NameType): string {
return name || 'Unknown';
}
Optional ChainingとNullish Coalescing Operatorの組み合わせ
- 複数のチェックを同時に実行します。
const obj: { name: string | null } = { name: null };
const name = obj?.name ?? 'Unknown'; // nameは'Unknown'になります
TypeScriptの型システムの活用
- 型注釈やジェネリック型を使用して、nullとundefinedの可能性を制限します。
type Name = string;
function getName(name: Name): string {
return name;
}
- TypeScriptの型システムを積極的に活用することで、nullとundefinedの可能性を最小限に抑えることができます。
- Optional ChainingとNullish Coalescing Operatorの組み合わせは、複数のチェックを同時に実行するのに便利です。
- Template Literal Typeは、型定義を簡潔に記述するのに役立ちます。
- Non-null Assertion Operatorは、慎重に使用してください。誤った使用によりエラーが発生する可能性があります。
typescript null-check
