チュートリアル
Python 3 Basic
Tkinter
Python Modules
Python Numpy
JavaScript
Git
Matplotlib
PyQt5
Data Structure
Algorithm
プログラミングのヒント
Python Scipy
Python Pygame
Python
Python Tkinter
Batch
PowerShell
Python Pandas
Numpy
Python Flask
Django
Matplotlib
Docker
Plotly
Seaborn
Matlab
Linux
Git
C
Cpp
HTML
JavaScript
jQuery
TensorFlow
TypeScript
Angular
React
CSS
PHP
Java
Go
Kotlin
Node.js
Csharp
Rust
Ruby
Arduino
MySQL
MongoDB
Postgres
SQLite
R
VBA
Scala
Raspberry Pi
関数参照
Python Pandas
Numpy
Scipy
文字列はインターネットを介した通信手段であり、すべてのデータは 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"
したがって、JSON 文字列には Person インターフェイスで必要とされる age 属性がありませんが、null チェックまたは ?? 演算子は、age 属性のデフォルト値を設定するために使用されます。
Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.
LinkedIn
Website
