title: JSON to Javascript Object with methods
body: <p>I have a Typescript class that has methods on it. I end up transferring these objects from the server to the browser through REST where the JSON representation of course loses the methods and prototype information. I want to turn the JSON back into the object with the methods so I can use them on the client side. I've been using a static method that will take in the JSON object and recreate my object but it's a pretty manual process. </p>
  
  <p>Is there a better way to do it?</p>
  
  <pre><code>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
              &amp;&amp; pojo.width !== undefined
              &amp;&amp; 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 = &lt;Rectangle&gt;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
  </code></pre>
  
  <p>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 get rid of the static fromPojo(pojo) method in favor of something more dependable/automatic.</p>
  
  <p><strong>Update:</strong>
  Here's the code working with Serializr, as suggested by Nick Uraltsev.  Much less error prone but loses the constructor params.  I would prefer to be able to keep the constructor params.</p>
  
  <pre><code>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
  </code></pre>