在 TypeScript 中解析 JSON 字串

Shuvayan Ghosh Dastidar 2023年1月30日 2022年5月26日
  1. 使用 JSON.parse() 將 JSON 字串解析為 TypeScript 中的物件
  2. 在 TypeScript 中使用防護將 JSON 字串安全轉換為物件
  3. 在 TypeScript 中使用 Partial 關鍵字避免執行時錯誤
在 TypeScript 中解析 JSON 字串

字串是網際網路上的一種通訊方式,所有資料都以一種非常流行的格式傳輸,即 JSON。這種資料的 JSON 表示通常表示 TypeScript 中的一個物件甚至一個類。

本教程將重點介紹如何安全地將 JSON 字串解析回 TypeScript 物件。

使用 JSON.parse() 將 JSON 字串解析為 TypeScript 中的物件

JavaScript 中使用的 JSON.parse() 函式也可以在 TypeScript 中使用,因為 TypeScript 是 JavaScript 的超集。但是,以下方法假定要轉換為物件的 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 字串安全轉換為物件

使用者定義的守衛可以檢查 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 屬性,但空值檢查或 ?? 運算子用於為 age 屬性設定預設值。

Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

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

相關文章 - TypeScript JSON