在 TypeScript 中把 JSON 物件轉換為一個類
Shuvayan Ghosh Dastidar
2023年1月30日
網際網路上的資料以字串的形式流動，可以轉換為一種非常流行的格式，稱為 JSON。這種資料的 JSON 表示通常表示 TypeScript 中的一個物件甚至一個類。
TypeScript 提供了將物件轉換為類的功能。本文將討論如何將接收到的物件轉換為 TypeScript 類，以使型別支援、IDE 完成和其他功能可訪問。
在 TypeScript 中使用 Object.assign 從 JSON 轉換為類
Object.assign 方法提供了一種將 JSON 物件轉換為 TypeScript 類的簡單方法，以便與該類關聯的方法也可以訪問。
以下程式碼段顯示瞭如何使用 Object.assign 方法將 JSON 物件轉換為 TypeScript 類。
程式碼：
class Animal{
name : string;
legs : number;
eyes : number;
constructor(name? : string, legs? : number, eyes? : number){
this.name = name ?? 'Default name';
this.legs = legs ?? 0;
this.eyes = eyes ?? 0;
}
getName(){
return this.name;
}
getEyes(){
return this.eyes;
}
}
var jsonString : string = `{
"name" : "Tiger",
"legs" : 4,
"eyes" : 2
}`
var animalObj = new Animal();
console.log(animalObj.getEyes());
Object.assign(animalObj, JSON.parse(jsonString));
console.log(animalObj.getEyes());
輸出：
0
2
在上面的例子中，getEyes() 方法返回 0，這是預設值，當解析的 JSON 物件被分配給 animalObj 物件時，它返回 2，JSON 字串中的值。
在 TypeScript 中使用自定義方法將 JSON 字串轉換為類
可以使用諸如 fromJSON 之類的自定義方法將 JSON 物件轉換為 TypeScript 中的相應類。這種方法更有用，因為它為使用者提供了更多的權力。
程式碼：
class Animal{
name : string;
legs : number;
eyes: number;
constructor(name : string, legs : number, eyes: number){
this.name = name;
this.legs = legs;
this.eyes = eyes;
}
getName(){
return this.name;
}
toObject(){
return {
name : this.name,
legs : this.legs.toString(),
eyes : this.eyes.toString()
}
}
serialize() {
return JSON.stringify(this.toObject());
}
static fromJSON(serialized : string) : Animal {
const animal : ReturnType<Animal["toObject"]> = JSON.parse(serialized);
return new Animal(
animal.name,
animal.legs,
animal.eyes
)
}
}
var jsonString : string = `{
"name" : "Tiger",
"legs" : 4,
"eyes" : 2
}`
var animalObj : Animal = Animal.fromJSON(jsonString);
console.log(animalObj)
// this will work now
console.log(animalObj.getName());
輸出：
Animal: {
"name": "Tiger",
"legs": 4,
"eyes": 2
}
"Tiger"
