A more efficient way to manage this situation is by utilizing Object.assign, which does require ECMAScript 2015.

Imagine having a class

class Pet {
    name: string;
    age: number;
    constructor(name?: string, age?: number) {
        this.name = name;
        this.age = age;
    }
    getDescription(): string {
        return "My pet " + this.name + " is " + this.age + " years old.";
    }
    static fromJSON(d: Object): Pet {
        return Object.assign(new Pet(), d);
    }
}

Serialization and deserialization can be done like this...

var p0 = new Pet("Fido", 5);
var s = JSON.stringify(p0);
var p1 = Pet.fromJSON(JSON.parse(s));
console.log(p1.getDescription());

To enhance this example further, let's delve into nested objects...

class Type {
    kind: string;
    breed: string;
    constructor(kind?: string, breed?: string) {
        this.kind = kind;
        this.breed = breed;
    }
    static fromJSON(d: Object) {
        return Object.assign(new Type(), d);
    }
}
class Pet {
    name: string;
    age: number;
    type: Type;
    constructor(name?: string, age?: number) {
        this.name = name;
        this.age = age;
    }
    getDescription(): string {
        return "My pet " + this.name + " is " + this.age + " years old.";
    }
    getFullDescription(): string {
        return "My " + this.type.kind + ", a " + this.type.breed + ", is " + this.age + " years old.";
    }
    static fromJSON(d: Object): Pet {
        var o = Object.assign(new Pet(), d);
        o.type = Type.fromJSON(o['type']);
        return o;
    }
}

Serialization and deserialization for this scenario would look like...

var q0 = new Pet("Fido", 5);
q0.type = new Type("dog", "Pomeranian");
var t = JSON.stringify(q0);
var q1 = Pet.fromJSON(JSON.parse(t));
console.log(q1.getFullDescription());

Therefore, unlike employing an interface, this method retains all the class methods.

In my experience, the most effective approach I have come across is utilizing "jackson-js". This project allows for the use of ts-decorators to define classes and then easily serialize and deserialize while preserving type information. It has robust support for arrays, maps, and more.

For a comprehensive guide on using jackson-js, check out:

Here's a simple example:

import { JsonProperty, JsonClassType, JsonAlias, ObjectMapper } from 'jackson-js';

class Book {
  @JsonProperty() @JsonClassType({type: () => [String]})
  name: string;
  @JsonProperty() @JsonClassType({type: () => [String]})
  @JsonAlias({values: ['bkcat', 'mybkcat']})
  category: string;
}

class Writer {
  @JsonProperty() @JsonClassType({type: () => [Number]})
  id: number;
  @JsonProperty() @JsonClassType({type: () => [String]})
  name: string;
  @JsonProperty() @JsonClassType({type: () => [Array, [Book]]})
  books: Book[] = [];
}

const objectMapper = new ObjectMapper();
// eslint-disable-next-line max-len
const jsonData = '{"id":1,"name":"John","books":[{"name":"Learning TypeScript","bkcat":"Web Development"},{"name":"Learning Spring","mybkcat":"Java"}]}';
const writer = objectMapper.parse<Writer>(jsonData, {mainCreator: () => [Writer]});
console.log(writer);
/*
Writer {
  books: [
    Book { name: 'Learning TypeScript', category: 'Web Development' },
    Book { name: 'Learning Spring', category: 'Java' }
  ],
  id: 1,
  name: 'John'
}
*/

While there are other similar projects available, such as -

• https://github.com/typestack/class-transformer
• https://github.com/JohnWeisz/TypedJSON
• https://www.npmjs.com/package/typescript-json-serializer
• https://www.npmjs.com/package/ts-serializer

From my personal experience, jackson-js stands out as the only one that successfully handled TypeScript Maps.

To start, you must define an interface for the source entity received from the API in JSON format:

interface UserEntity {
  name: string,
  age: number,
  country_code: string
};

Next, create a model with a constructor to customize (camelize) certain field names:

class User {
  constructor({ name, age, country_code: countryCode }: UserEntity) {
    Object.assign(this, { name, age, countryCode });
  }
}

Finally, instantiate your User model using a JavaScript object named "jsonUser":

const jsonUser = {name: 'Ted', age: 2, country_code: 'US'};

const userInstance = new User(jsonUser);

console.log({ userInstance })

https://i.stack.imgur.com/NdYVY.png

Click here for playground.

For those seeking a solution, I recommend utilizing ts-jackson

This library is specifically designed with TypeScript in focus and excels in resolving complex nested structures.

AQuirky's response serves as a solid starting point, however, as I mentioned in my previous comment, an issue arises regarding the necessity to permit the creation of objects with undefined fields that are then filled by his fromJSON method.

This contravenes the RAII principle and may lead to confusion for users of that particular class who might inadvertently create an incomplete Pet (it is not explicitly stated anywhere that invoking the constructor without arguments requires subsequent calls to fromJSON() to complete the object).

To expand upon his solution, here is one approach involving JavaScript's prototype chain, in order to retrieve an object of a class post-serialization/deserialization. The main technique revolves around reassigning the correct prototype object after these processes:

class Foo {}
foo1 = new Foo();
foo2 = JSON.parse(JSON.stringify(p1))
foo2.__proto__ = Foo.prototype;

https://i.stack.imgur.com/JSZQ0.png

To rectify AQuirky's example using this strategy, we could easily modify his fromJSON function as follows:

static fromJSON(d: Object): Pet {
    d.__proto__ = Pet.prototype;
    return p
}

When working with Typescript, the @badcafe/jsonizer library offers a more concise alternative to ts-jackson. With , you only need to define mappings when necessary, such as when dealing with instances of classes rather than basic JS types:

npm install @badcafe/jsonizer

For example :

import { Reviver, Jsonizer } from '@badcafe/jsonizer';

@Reviver<Book>({
    // 👆  bind the reviver to the class
    '.': Jsonizer.Self.assign(Book)
    // 👆  '.' key is the Self builder, that will assign each field
})
class Book {
  name: string;
  category: string;
}

@Reviver<Writer>({
  '.': Jsonizer.Self.assign(Writer),
  birthDate: Date,
  books: {
    '*': Book
  }
})
class Writer {
  id: number;
  name: string;
  birthDate: Date;
  books: Book[] = [];
}

// eslint-disable-next-line max-len
const jsonData = '{"id":1,"name":"John","birthDate":"1990-12-31","books":[{"name":"Learning TypeScript","bkcat":"Web Development"},{"name":"Learning Spring","mybkcat":"Java"}]}';

const writerReviver = Reviver.get(Writer);
// standard Javascript parse function :
const writer = JSON.parse(jsonData, writerReviver);
//     👆 it's an instance of Writer, and in the code, it's type is inferred to be a Writer (usually, it is TS any)

Here is another approach for handling variations:

import { Reviver } from '@badcafe/jsonizer';

interface BookDTO {
    name: string
    category?: string
    bkcat?: string
    mybkcat?: string
}

@Reviver<Book, BookDTO>({
    // 👇 this time, we have a custom builder
    '.': ({ name, category, bkcat, mybkcat}) => {
             const book = new Book();
             book.name = name;
             book.category = category ?? bkcat ?? mybkcat;
             return book;
         }
})
class Book {
  name: string;
  category: string;
}

Below, there is a variant for the Writer class:

1. The Writer class may be defined in another library and imported, but Jsonizer allows binding a reviver even on imported classes.
2. A constructor with fields arguments can be used instead.

Firstly, define the class:

export class Writer {
  constructor( 
    public id: number,
    public name: string,
    public birthDate: Date,
    public books: Book[] = []
  ) {}
}

import { Reviver, Jsonizer } from '@badcafe/jsonizer';
import { Writer, Book } from '...';

// 👇 it is no longer a decorator
Reviver<Writer>({
  '.': Jsonizer.Self.apply(Writer), // apply instead of assign
  birthDate: Date,
  books: {
    '*': Book
  }
})(Writer)

const jsonData = '{"id":1,"name":"John","books":[{"name":"Learning TypeScript","bkcat":"Web Development"},{"name":"Learning Spring","mybkcat":"Java"}]}';

const writerReviver = Reviver.get(Writer);
const writer = JSON.parse(jsonData, writerReviver);

With builders helpers like Jsonizer.Self.assign() and Jsonizer.Self.apply(), as well as custom builders, recreating other structures like a Map is straightforward. To serialize it, simply define the standard toJSON() function in your class.

@badcafe/jsonizer offers additional capabilities such as:

• In case of classes with the same name, assigning them a namespace to avoid clashes.
• Techniques in the documentation demonstrate how to dynamically select the right reviver, send the reviver with payload data, and revive a reviver.