Question

我有一个Typescript类，上面有方法。我最终通过REST将这些对象从服务器传输到浏览器，其中JSON表示当然会丢失方法和原型信息。我想用方法将JSON转回到对象中，以便我可以在客户端使用它们。我一直在使用静态方法来接收JSON对象并重新创建我的对象，但它是一个非常手动的过程。

有更好的方法吗？

class Rectangle {
    constructor(public width: number, public height: number) { }
    public getArea(): number {
        return this.width * this.height;
    }

    public static fromPojo(pojo: any): Rectangle {
        if (pojo
            && pojo.width !== undefined
            && pojo.height !== undefined) {
                return new Rectangle(pojo.width, pojo.height);
            }
        throw new Error("Pojo is not a Rectangle");
    }
}

let rect = new Rectangle(10, 20);
console.log(rect.getArea()); // 200
let json = JSON.stringify(rect); // {"width":10,"height":20}

let rectFromJson = <Rectangle>JSON.parse(json);
console.log(rectFromJson.getArea()); // Error: rectFromJson.getArea is not a function

let rectFromPojo = Rectangle.fromPojo(JSON.parse(json));
console.log(rectFromPojo.getArea()); // 200

如果属性被添加到对象中，我必须确保更新fromPojo（）方法，使这种策略容易出错。理想情况下，我想摆脱静态的fromPojo（pojo）方法，转而使用更可靠/自动的东西。

更新这是使用Serializr的代码，正如Nick Uraltsev所建议的那样。更容易出错，但失去了构造函数的参数。我宁愿能够保留构造函数参数。

import { deserialize, serializable, serialize } from "serializr";
class Rectangle {
    @serializable
    public width: number;
    @serializable
    public height: number;

    public getArea(): number {
        return this.width * this.height;
    }
}

let rect = new Rectangle();
rect.width = 10;
rect.height = 20;

let serJson = serialize(rect);
console.log(serJson); // { width: 10, height: 20 }

let reconstructedRect = deserialize(Rectangle, serJson);
console.log(reconstructedRect.getArea()); // 200

Answer 1

看看Serializr。看起来它完全符合您的需求。

JSON到Javascript对象的方法

1 个答案: