迹忆客 专注技术分享

互联网上的数据以字符串的形式流动，可以转换为一种非常流行的格式，称为 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"