How to Cast a JSON Object Inside of TypeScript Class?

Last Updated : 06 Dec, 2024

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:

JavaScript

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:

JavaScript

{ "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.

JavaScript

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.

JavaScript

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:

TypeScript

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

How to Convert an Object to a JSON String in Typescript ?

pranav1698

Improve

Article Tags :

How to Cast a JSON Object Inside of TypeScript Class?

Types of Objects in TypeScript

Example Scenario

1. Using Object.assign() Method

2. Using class-transformer

Note: Converting JSON to TypeScript Interfaces

Similar Reads