列挙型パワーアップ！JSON から TypeScript 列挙型を生成する2つの必殺テクニック
TypeScript で JSON 文字列から列挙型を生成する方法
TypeScript で JSON 文字列から列挙型を生成することは、API や設定ファイルなどの外部データソースから型安全な方法でデータを読み込む際に役立ちます。
このチュートリアルでは、以下の2つの方法について説明します。
- 手動で列挙型を定義する
ts-enum-utilライブラリを使用する
以下の手順に従って、JSON 文字列から列挙型を手動で定義する方法を説明します。
ステップ 1: JSON データを解析する
JSON データを解析するには、JSON.parse() 関数を使用します。 例は以下のとおりです。
const jsonString = '{ "colors": ["red", "green", "blue"] }';
const jsonData = JSON.parse(jsonString);
ステップ 2: 列挙型を定義する
jsonData オブジェクトから列挙型メンバーのリストを取得し、列挙型を定義します。 例は以下のとおりです。
enum Color {
Red = jsonData.colors[0],
Green = jsonData.colors[1],
Blue = jsonData.colors[2]
}
列挙型メンバーを使用して、型安全な方法でデータにアクセスできます。 例は以下のとおりです。
const color: Color = Color.Red;
console.log(color); // Output: Red
ts-enum-util ライブラリを使用すると、JSON 文字列から列挙型を自動的に生成することができます。
ステップ 1: ts-enum-util をインストールする
以下のコマンドを使用して、ts-enum-util ライブラリをインストールします。
npm install ts-enum-util
ts-enum-util の fromJSONObject() 関数を使用して、JSON 文字列から列挙型を生成します。 例は以下のとおりです。
import { fromJSONObject } from 'ts-enum-util';
const enum Color = fromJSONObject<Color>({
red: 'red',
green: 'green',
blue: 'blue'
}, 'Color');
生成された列挙型は、手動で定義した列挙型と同じように使用できます。
const color: Color = Color.Red;
console.log(color); // Output: Red
どちらの方法を選択するべきか
- データソースが単純で、列挙型メンバーが事前にわかっている場合は、手動で列挙型を定義する方法がおすすめです。
- データソースが複雑で、列挙型メンバーが動的に変化する可能性がある場合は、
ts-enum-utilライブラリを使用することをおすすめします。
- TypeScript バージョン 4.7 以降では、
enum型に文字列リテラルを使用できるようになりました。 この機能を使用すると、ts-enum-utilライブラリを使用せずに、JSON 文字列から列挙型を直接生成することができます。
enum Color {
Red = "red",
Green = "green",
Blue = "blue"
}
const jsonString = '{ "colors": ["red", "green", "blue"] }';
const jsonData = JSON.parse(jsonString);
enum Color {
Red = jsonData.colors[0],
Green = jsonData.colors[1],
Blue = jsonData.colors[2]
}
const color: Color = Color.Red;
console.log(color); // Output: Red
import { fromJSONObject } from 'ts-enum-util';
const enum Color = fromJSONObject<Color>({
red: 'red',
green: 'green',
blue: 'blue'
}, 'Color');
const color: Color = Color.Red;
console.log(color); // Output: Red
説明
この例では、JSON 文字列 { "colors": ["red", "green", "blue"] } を解析し、Color という名前の列挙型を定義します。 列挙型メンバーは、jsonData.colors 配列から取得されます。
この例では、ts-enum-util ライブラリの fromJSONObject() 関数を使用して、JSON 文字列 { "red": "red", "green": "green", "blue": "blue" } から Color という名前の列挙型を自動的に生成します。
enum Color {
Red = "red",
Green = "green",
Blue = "blue"
}
JSON スキーマを使用して、JSON データの構造を定義し、その構造に基づいて TypeScript コードを自動生成することができます。 これにより、列挙型を含む複雑なデータ構造を処理することができます。
カスタム変換ロジックを使用する
JSON 文字列を解析し、手動で列挙型を生成することもできます。 この方法は、柔軟性がありますが、コード量が多くなる可能性があります。
ジェネリックライブラリを使用する
json2ts や ts-json などのジェネリックライブラリを使用して、JSON データから TypeScript コードを自動生成することができます。 これらのライブラリは、列挙型を含むさまざまなデータ構造を処理することができます。
最適な方法を選択する
使用する方法は、データソースの複雑性、要件、および個人的な好みによって異なります。
- データソースが複雑で、構造が動的に変化する可能性がある場合は、
JSON スキーマを使用することを検討してください。 - 柔軟性が重要で、コード生成を自分で制御したい場合は、
カスタム変換ロジックを使用します。 - 複雑なデータ構造を処理する必要がある場合は、
ジェネリックライブラリを使用します。
json enums typescript
