How to Cast a JSON Object Inside of TypeScript Class?

Casting a JSON object to a TypeScript class involves converting a plain JSON object (which lacks methods and proper typing) into an instance of a class that includes all the defined methods and type safety of that class.

Types of Objects in TypeScript

• Plain Objects: When parsing JSON data using the JSON.parse() method, we get a plain object, not a class instance.
• Class Objects: A class object is an instance of a TypeScript class with defined properties, constructors, and methods.

Example Scenario

Data 1: TypeScript Class Definition

Suppose we have a TypeScript class defined on the client-side:

class Todo {
    userId: number;
    id: number;
    title: string;
    done: boolean;
 
    getTitle() {
        return this.title;
    }
 
    isDone() {
        return this.done;
    }
}

Data 2: JSON Object

We have a JSON object stored locally in our project:

{
    "userId": 1,
    "id": 1,
    "title": "Add Info about the new project",
    "done": true
}

1. Using Object.assign() Method

First, we import the JSON object in our TypeScript file. We can then use the Object.assign() method to clone the JSON object into a Todo class object.

import jsonObhect from './todo.json';
 
// Defining our Todo class
class Todo {
    userId: number;
    id: number;
    title: string;
    done: boolean;
 
    getTitle() {
        return this.title;
    }
 
    isDone() {
            return this.done;
    }
}
 
// Object.assign() will clone jsonData into
// Todo class object Storing the new class
// object in a typescript variable
let newTodo = Object.assign(new Todo(), jsonData);
 
// Logging the output onto the console
console.log(newTodo);
console.log(newTodo.getTitle());

Output

Todo {
  userId: 1,
  id: 1,
  title: 'Add Info about new project',
  done: true
}
Add Info about new project

2. Using class-transformer

For more complex JSON objects or arrays of complex JSON objects, the class-transformer tool is more robust. It can transform plain JSON objects into TypeScript class instances.

Installation: Install the class-transformer package using npm:

npm install -g class-transformer

This method will take two parameters, the first parameter will be an instance of the Todo class and the second parameter is the JSON object imported from our local project. First, we will have to import the method from the class-transformer tool in our TypeScript file, so that TypeScript knows which method to use. Again, we have stored my JSON file in the same directory as that of my TypeScript file.

import jsonObhect from './todo.json';
import { plainToClass } from "class-transformer";
 
// Defining our Todo class
class Todo {
    userId: number;
    id: number;
    title: string;
    done: boolean;
 
    getTitle() {
        return this.title;
    }
 
    isDone() {
        return this.done;
    }
}
 
// plainToClass method will convert
// JSON data to Todo class object
// Storing the new class object in
// a typescript variable
let newTodo = plainToClass(Todo, jsonData);
 
// Logging the output to the console
console.log(newTodo);
console.log(newTodo.isDone());

Output

Todo {
  userId: 1,
  id: 1,
  title: 'Add Info about new project',
  done: true
}
true

Note: Converting JSON to TypeScript Interfaces

Another useful tool for converting JSON data to TypeScript interfaces is json2ts. This tool generates TypeScript interfaces from JSON objects. For the given JSON object, we can generate the following TypeScript interface:

declare module namespace {
    export interface RootObject {
        userId: number;
        id: number;
        title: string;
        done: boolean;
    }
}