在 TypeScript 中把 JSON 物件轉換為一個類

Shuvayan Ghosh Dastidar 2023年1月30日 2022年5月18日
  1. 在 TypeScript 中使用 Object.assign 從 JSON 轉換為類
  2. 在 TypeScript 中使用自定義方法將 JSON 字串轉換為類
在 TypeScript 中把 JSON 物件轉換為一個類

網際網路上的資料以字串的形式流動,可以轉換為一種非常流行的格式,稱為 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"
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