Cast JSON Object to TypeScript Class

In TypeScript, working with JSON data is a common scenario when interacting with APIs or handling data from external sources. Sometimes, you may want to convert a JSON object into an instance of a TypeScript class, allowing you to leverage the benefits of strong typing and class methods. In this blog, we'll explore various approaches to cast JSON objects to TypeScript classes, providing you with a solid foundation to tackle this common requirement.

Method 1: Manual Conversion

The simplest approach is to manually map the properties from the JSON object to the corresponding properties in the TypeScript class. Here's an example:

class MyClass {
    id: number;
    name: string;

    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }
}

const jsonObject = {"id": 1, "name": "John"};
const myInstance = new MyClass(jsonObject.id, jsonObject.name);

This method requires explicitly defining the mapping between the JSON properties and the class properties. While it works for smaller classes, it becomes cumbersome for larger classes with numerous properties.

Method 2: Object.assign()

Another option is to use the Object.assign() method, which allows you to merge the JSON object into an instance of the class. However, this approach doesn't perform any type-checking during the assignment.

class MyClass {
    id: number;
    name: string;

    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }
}

const jsonObject = {"id": 1, "name": "John"};
const myInstance = new MyClass();
Object.assign(myInstance, jsonObject);

This method provides a concise way to assign the properties but doesn't offer type safety or validation.

Method 3: Object.setPrototypeOf()

Using Object.setPrototypeOf(), you can set the prototype of the JSON object to be an instance of the desired TypeScript class. This approach allows you to access class methods and ensure type safety.

class MyClass {
    id: number;
    name: string;

    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }
}

const jsonObject = {"id": 1, "name": "John"};
const myInstance = Object.setPrototypeOf(jsonObject, MyClass.prototype);

By setting the prototype, you can now access class methods and benefit from strong typing. However, keep in mind that this method mutates the original JSON object, which might not always be desirable.

Method 4: Object Deserialization Libraries

To simplify the casting process and ensure consistent and reliable object deserialization, you can use external libraries like class-transformer or json-typescript-mapper. These libraries provide decorators or configuration options to map JSON properties to class properties automatically.

Here's an example using the class-transformer library:

import {Expose, Transform, Type} from 'class-transformer';

class MyClass {
    @Expose({name: 'id'})
    id: number;

    @Expose({name: 'name'})
    name: string;
}

const jsonObject = {"id": 1, "name": "John"};
const myInstance = plainToClass(MyClass, jsonObject);

Conclusion:

Casting JSON objects to TypeScript classes allows you to leverage the benefits of strong typing and class methods while working with JSON data. In this blog post, we explored several methods for achieving this, ranging from manual mapping to using object deserialization libraries like class-transformer. Each approach has its pros and cons, so choose the one that best fits your project's requirements and complexity. By understanding these methods, you'll be well-equipped to handle JSON-to-class conversions effectively in your TypeScript projects.