TypeScript で JSON 文字列を解析する
Shuvayan Ghosh Dastidar
2023年1月30日
TypeScript
TypeScript JSON
-
JSON.parse()を使用して、JSON 文字列を TypeScript のオブジェクトに解析する - TypeScript で JSON 文字列からオブジェクトへの安全な変換のための Guards の使用
-
TypeScript のランタイムエラーを回避するには、
Partialキーワードを使用する
文字列はインターネットを介した通信手段であり、すべてのデータは JSON と呼ばれる非常に一般的な形式で転送されます。このデータの JSON 表現は、多くの場合、TypeScript のオブジェクトまたはクラスを表します。
このチュートリアルでは、JSON 文字列を安全に解析して TypeScript オブジェクトに戻す方法に焦点を当てます。
JSON.parse() を使用して、JSON 文字列を TypeScript のオブジェクトに解析する
TypeScript は JavaScript のスーパーセットであるため、JavaScript で使用される JSON.parse() 関数は TypeScript でも使用できます。ただし、次のメソッドは、オブジェクトに変換される JSON 文字列に、オブジェクトに関連付けられている必要なすべての属性があることを前提としています。
サンプルコード：
interface Person {
name : string;
age : number;
}
const personString = `{"name" : "david", "age" : 20}`;
const personObj : Person = JSON.parse(personString);
console.log(personObj);
出力：
{
"name": "david",
"age": 20
}
TypeScript で JSON 文字列からオブジェクトへの安全な変換のための Guards の使用
ユーザー定義のガードは、JSON 文字列に必要なプロパティのすべてまたは一部が含まれているかどうかを確認し、差し迫ったニーズに応じてさらに処理するか、拒否することができます。
サンプルコード：
interface Person {
name : string;
age : number;
}
function checkPersonType( obj : any ) : obj is Person {
return 'name' in obj && 'age' in obj;
}
const personString1 = `{"name" : "david"}`;
const personString2 = `{"name" : "david", "age" : 20 }`;
const personObj1 : Person = JSON.parse(personString1);
if ( checkPersonType(personObj1)) {
console.log(personObj1);
} else {
console.log(personString1 + ' cannot be parsed');
}
const personObj2 : Person = JSON.parse(personString2);
if ( checkPersonType(personObj2)) {
console.log(personObj2);
} else {
console.log(personString2 + ' cannot be parsed');
}
出力：
"{"name" : "david"} cannot be parsed"
{
"name": "david",
"age": 20
}
TypeScript のランタイムエラーを回避するには、Partial キーワードを使用する
JSON 文字列に一部のフィールドがない場合があります。その場合、オブジェクトの属性にいくつかのデフォルト値を入力できます。
TypeScript の Partial キーワードは、オブジェクトのすべての属性をオプションにすることでこれを実現するのに役立ちます。したがって、null チェック演算子を使用してデフォルト値を設定できます。
サンプルコード：
interface Person {
name : string;
age : number;
}
const personString = `{"name" : "david"}`;
const personObj : Partial<Person> = JSON.parse(personString);
console.log(personObj);
console.log( personObj.age ?? 30);
出力：
{
"name": "david"
}
30
したがって、JSON 文字列には Person インターフェイスで必要とされる age 属性がありませんが、null チェックまたは ?? 演算子は、age 属性のデフォルト値を設定するために使用されます。
チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
