I have a Typescript class with methods that get lost when transferring objects from the server to the browser via REST in JSON format. I need to convert the JSON back into an object with methods to use on the client side. Currently, I am using a static method for this conversion, but it's a manual process.
Is there a more efficient way to achieve this?
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
If a property gets added to the object, I have to make sure I update the fromPojo() method, making this tactic error-prone. Ideally, I want to find a more reliable and automated solution to handle this.
Update: The code below demonstrates the usage of Serializr, as suggested by Nick Uraltsev. This approach is less error-prone, but it does not retain the constructor parameters. It would be preferable to keep the constructor parameters intact.
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