Missing methods in TypeScript class

Question

I have a TypeScript model which contains properties and functions like:

class Person {
name: string
sayHello(){ console.log(name); }
}

When creating its instance I can make use of this sayHello() method as expected.

The problem comes when I store and get the object from the local storage or an external web service. While the properties are still present the methods have disappeared. (obviously because it’s just text).

Is there any way to restore the completeness of the object to be able to use its functions?

Or otherwise, is there any other technique? For instance, helper class that can work with type.

perhaps you are looking for something like https://stackoverflow.com/questions/36517173/how-to-store-a-javascript-function-in-json — Suraj Rao, Jul 13 '18 at 13:05
for Titian answer below, Object assign does not deep copy items, is there a better way to bring back methods with something like lodash ngdeep? https://medium.com/better-programming/deep-and-shallow-copy-in-javascript-110f395330c5 — , Mar 16 '20 at 03:57

score 3 · Accepted Answer · edited Mar 08 '20 at 06:51

3

When you save to a local storage, you will save a JSON representation of the class data; when you get the object back from the local storage, it will be just an object, not an instance of the original class.

You can look for an external library that will help you with this, but the simple solution is to create a new instance of the class and assign the field values to the class using Object.assign:

class Person {
    public constructor(public name?: string){}
    sayHello() { console.log(name); }
}
let p = new Person("Test");
let data = JSON.stringify(p);
let p2 = new Person()
Object.assign(p2, JSON.parse(data));

edited Mar 08 '20 at 06:51

Kate Orlova

3,225
5
11
35

answered Jul 13 '18 at 13:16

Titian Cernicova-Dragomir

230,986
31
415
357

hi, Object assign does not deep copy items, is there a better way to bring back methods with something like lodash ngdeep? https://medium.com/better-programming/deep-and-shallow-copy-in-javascript-110f395330c5 – Mar 16 '20 at 03:56

Missing methods in TypeScript class

1 Answers1