在 TypeScript 中解析 JSON 字串
Shuvayan Ghosh Dastidar
2023年1月30日
-
使用
JSON.parse()將 JSON 字串解析為 TypeScript 中的物件 - 在 TypeScript 中使用防護將 JSON 字串安全轉換為物件
-
在 TypeScript 中使用
Partial關鍵字避免執行時錯誤
字串是網際網路上的一種通訊方式，所有資料都以一種非常流行的格式傳輸，即 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 屬性設定預設值。
