How to Cast a JSON Object Inside of TypeScript Class ?

31 Mar, 2020
We use JSON objects to store and transport data between a server and a client application, or locally in a node project. In Typescript, there are two types of objects.
Plain objects: When we try to parse JSON data using JSON.parse() method then we get a plain object and not a class object.
Class(constructor) objects: A class object is an instance of a Typescript class with own defined properties, constructors and methods.
Example:
Data 1: Suppose, we have a Typescript class defined in the client-side:class Todo {    userId: number;    id: number;    title: string;    done: boolean;       getTitle() {        return this.title;    }       isDone() {        return this.done;    }}
class Todo {    userId: number;    id: number;    title: string;    done: boolean;       getTitle() {        return this.title;    }       isDone() {        return this.done;    }}
Data 2: We have a JSON object stored locally in our project:{    "userId": 1,    "id": 1,    "title": "Add Info about the new project",    "done": true}
{    "userId": 1,    "id": 1,    "title": "Add Info about the new project",    "done": true}
The above JSON object can be sent by a server to a web page or any other client-side application. If we clearly observe, the structure of the JSON object is equivalent to that of the Typescript class, but what if we want to access the methods of the Todo class for the JSON object! There are two ways we can accomplish this task, using the assign method of Object class, which essentially clones the JSON object to Todo class object. Another, is using the class-transformer tool which is used to transform Typescript objects into class objects.
Method 1: First, we will have to import the JSON object in our TypeScript file which can be done by using the import keyword in TypeScript, which will load the JSON object into a TypeScript variable. In my case, we have stored the JSON file in the same directory as that of my TypeScript file. Then, we can just use the Object.assign() the method, which will return a Todo class object and we can access methods defined in the Todo class.
Program 1:import jsonObhect from './todo.json';   // Defining our Todo classclass 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 variablelet newTodo = Object.assign(new Todo(), jsonData);   // Logging the output onto the consoleconsole.log(newTodo);console.log(newTodo.getTitle());
import jsonObhect from './todo.json';   // Defining our Todo classclass 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 variablelet newTodo = Object.assign(new Todo(), jsonData);   // Logging the output onto the consoleconsole.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

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

Method 2: Method one discussed here is easy and useful for simple JSON objects but things can go wrong if we have an object with a complex hierarchy or an array of complex JSON objects. We can use the class-transformer tool for this purpose, It can be easily installed in your local system or node-project using the Node Package Manager. In your local system, use the terminal or command window (depending on your operating system) to execute the following command.
Command: The -g flag is used for global install. We will use the plainToClass method of the class-transformer tool to convert our JSON object to a TypeScript class object.npm install -g class-transformer
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.
Program:import jsonObhect from './todo.json';import { plainToClass } from "class-transformer";   // Defining our Todo classclass 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 variablelet newTodo = plainToClass(Todo, jsonData);   // Logging the output to the consoleconsole.log(newTodo);console.log(newTodo.isDone());
import jsonObhect from './todo.json';import { plainToClass } from "class-transformer";   // Defining our Todo classclass 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 variablelet newTodo = plainToClass(Todo, jsonData);   // Logging the output to the consoleconsole.log(newTodo);console.log(newTodo.isDone());
Output:Todo {
  userId: 1,
  id: 1,
  title: 'Add Info about new project',
  done: true
}
true

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

Note: Another useful tool that we can use to convert JSON data to TypeScript interfaces is json2ts. If we test this tool for the above JSON object we will get the below TypeScript interface.
declare module namespace {

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

}

Then you use the generated interface to define the syntax that you want your typescript class to follow.
JavaScript-Misc
Picked
TypeScript
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?