【徹底解説】 TypeScript で JSON を扱う：stringify、parse、型変換

TypeScript オブジェクトを JSON 文字列に変換する方法

このチュートリアルでは、TypeScript オブジェクトを JSON 文字列に変換する方法について説明します。

JSON とは、軽量なデータ交換形式で、構造化されたデータを人間と機械が読み書きしやすいように表現するために使用されます。 JavaScript や TypeScript などのプログラミング言語でよく使用されます。

方法

TypeScript オブジェクトを JSON 文字列に変換するには、JSON.stringify 関数を使用します。この関数は、オブジェクトを JSON 形式の文字列に変換します。

const obj: { name: string; age: number } = { name: 'Taro', age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // Output: {"name":"Taro","age":30}

オプション

• 置き換え関数: JSON.stringify 関数の第二引数に置き換え関数を渡すことで、オブジェクトの値をカスタマイズすることができます。この関数は、オブジェクトの各プロパティに対して呼び出され、その値を返すことができます。

const obj: { name: string; age: number } = { name: 'Taro', age: 30 };
const jsonString = JSON.stringify(obj, (key, value) => {
  if (key === 'age') {
    return value * 2;
  }
  return value;
});
console.log(jsonString); // Output: {"name":"Taro","age":60}

• 置き換え配列: JSON.stringify 関数の第三引数に置き換え配列を渡すことで、JSON 文字列に含めるプロパティを指定することができます。

const obj: { name: string; age: number; hobby: string } = { name: 'Taro', age: 30, hobby: 'programming' };
const jsonString = JSON.stringify(obj, ['name', 'age']);
console.log(jsonString); // Output: {"name":"Taro","age":30}

• toJSON メソッド: 一部のオブジェクトは、toJSON メソッドを実装している場合があります。このメソッドを呼び出すと、オブジェクトを JSON 形式に変換した文字列が返されます。

class Person {
  constructor(public name: string, public age: number) {}

  toJSON(): { name: string; age: number } {
    return { name: this.name, age: this.age };
  }
}

const person = new Person('Taro', 30);
const jsonString = JSON.stringify(person);
console.log(jsonString); // Output: {"name":"Taro","age":30}

• JSON.stringify 関数を使用して、オブジェクトを JSON 形式の文字列に変換することができます。
• 置き換え関数や置き換え配列を使用して、JSON 文字列をカスタマイズすることができます。
• 一部のオブジェクトは、toJSON メソッドを実装している場合があります。

基本的な例

const person: { name: string; age: number } = { name: 'Taro', age: 30 };
const jsonString = JSON.stringify(person);
console.log(jsonString); // Output: {"name":"Taro","age":30}

置き換え関数を使用した例

const person: { name: string; age: number } = { name: 'Taro', age: 30 };
const jsonString = JSON.stringify(person, (key, value) => {
  if (key === 'age') {
    return value * 2;
  }
  return value;
});
console.log(jsonString); // Output: {"name":"Taro","age":60}

const person: { name: string; age: number; hobby: string } = { name: 'Taro', age: 30, hobby: 'programming' };
const jsonString = JSON.stringify(person, ['name', 'age']);
console.log(jsonString); // Output: {"name":"Taro","age":30}

toJSON メソッドを使用した例

class Person {
  constructor(public name: string, public age: number) {}

  toJSON(): { name: string; age: number } {
    return { name: this.name, age: this.age };
  }
}

const person = new Person('Taro', 30);
const jsonString = JSON.stringify(person);
console.log(jsonString); // Output: {"name":"Taro","age":30}

説明

• 置き換え関数を使用した例では、JSON.stringify 関数の第二引数に置き換え関数を渡して、オブジェクトの値をカスタマイズしています。
• toJSON メソッドを使用した例では、toJSON メソッドを実装したクラスのインスタンスを JSON 文字列に変換しています。

このサンプルコードを参考に、さまざまな状況に合わせて TypeScript オブジェクトを JSON 文字列に変換してください。

TypeScript オブジェクトを JSON 文字列に変換するその他の方法

ライブラリを使用する

• @types/jsonstringify-pretty-print のようなライブラリを使用すると、JSON 文字列を整形して読みやすくすることができます。

import * as prettyPrint from 'jsonstringify-pretty-print';

const person: { name: string; age: number } = { name: 'Taro', age: 30 };
const jsonString = prettyPrint.stringify(person, { type: 'spaces' });
console.log(jsonString);

手動で変換する

• オブジェクトをプロパティ名と値のペアの配列に変換してから、その配列を JSON 形式の文字列に変換することができます。

const person: { name: string; age: number } = { name: 'Taro', age: 30 };
const jsonString = JSON.stringify(Object.entries(person));
console.log(jsonString); // Output: [["name","Taro"],["age",30]]

const person: { name: string; age: number } = { name: 'Taro', age: 30 };
const jsonString = JSON.stringify(await Promise.resolve(person));
console.log(jsonString); // Output: {"name":"Taro","age":30}

注意事項

• 上記の方法を使用する場合は、ライブラリのドキュメントまたはサンプルコードを確認してください。
• 手動で変換する場合は、変換ロジックが正しく動作していることを確認する必要があります。
• Promise.resolve を使用する場合は、非同期処理であることを考慮する必要があります。

状況に応じて、適切な方法を選択してください。