JSONからTypeScriptのオプショナル・Nullableフィールドを扱う

JSONをTypeScriptに変換する際のオプショナルプロパティとNullableプロパティの検出方法を学びます。undefined、null、キー欠如の違いを解説。

Type Refinements

詳細な説明

オプショナル vs Nullableプロパティ

JSONには「オプショナル」という概念はありません。キーは存在するか存在しないかのどちらかです。一方、TypeScriptはオプショナル(?)、Nullable(| null)、必須プロパティを区別します。

オプショナルの検出

複数のJSONサンプルを変換する際、コンバーターはオブジェクト間でキーを比較します:

[
  { "id": 1, "name": "Alice", "bio": "Developer" },
  { "id": 2, "name": "Bob" }
]

bioが2番目のオブジェクトに存在しないため、オプショナルになります:

interface User {
  id: number;
  name: string;
  bio?: string;
}

Null値の処理

値が明示的にnullの場合、コンバーターはnullユニオンを追加します:

{ "id": 1, "name": "Alice", "deletedAt": null }
interface User {
  id: number;
  name: string;
  deletedAt: string | null;
}

コンバーターはstring | nullを推論します。これはdeletedAtが存在する場合、通常は日付文字列だからです。サンプル値がnullのみの場合、型はunknown | nullにフォールバックするか、string | nullをデフォルトとして設定できます。

組み合わせ:オプショナルかつNullable

フィールドはオプショナルかつNullableにできます:

interface User {
  id: number;
  name: string;
  bio?: string | null;
}

これはbioがオブジェクトから欠如するか、明示的にnullであるか、文字列であることを意味します。APIドキュメントでフィールドが完全に省略される場合やnullに設定される場合に使用します。

strictNullChecks

tsconfig.jsonで必ずstrictNullChecksを有効にしてください。これがないと、nullundefinedはすべての型に代入可能になり、慎重に生成された型の安全性が失われます。

ユースケース

APIがユーザープロフィールを返し、bio、avatar、電話番号などのフィールドがユーザーの入力状況に応じて欠落またはnullになる場合に使用します。

試してみる — JSON to TypeScript

フルツールを開く