How to Initialize a TypeScript Object with a JSON-Object ?

Last Updated : 23 Apr, 2024

To initialize a TypeScript Object with a JSON-Object, we have multiple approaches. In this article, we are going to learn how to initialize a TypeScript Object with a JSON-Object.

Below are the approaches used to initialize a TypeScript Object with a JSON-Object:

Table of Content

Approach 1: Object.assign

Object.assign method copies the values of all enumerable properties from one or more source objects to a target object.

Example: In this example, the JSON string is parsed, and Object.assign is used to copy the properties into a new object. This creates a separate object with the same properties as the parsed JSON.

JavaScript

let jsonString = '{"name": "John", "age": 25}'; let user = Object.assign({}, JSON.parse(jsonString)); console.log(user.name); // Output: John console.log(user.age); // Output: 25

Output:

John 25

Approach 2: Type Assertion

Type assertion is a way to tell the TypeScript compiler about the specific type of a variable when the type cannot be inferred automatically.

Example: In this example, we use type assertion to inform TypeScript about the expected structure of the object. The resulting 'user' object is then accessible with the specified properties.

JavaScript

let jsonString = '{"name": "John", "age": 25}'; let user = JSON.parse(jsonString) as { name: string; age: number }; console.log(user.name); // Output: John console.log(user.age); // Output: 25

Output:

John 25

Approach 3: Spread Operator

The spread operator (...) is used for copying the properties of one object into another object.

Example: In this example, the spread operator (...) is utilized to spread the properties of the parsed JSON object into a new object. It provides a concise way to achieve the same result as Object.assign.

JavaScript

let jsonString = '{"name": "John", "age": 25}'; let user = { ...JSON.parse(jsonString) }; console.log(user.name); // Output: John console.log(user.age); // Output: 25

Output:

John 25

Approach 4: Class Initialization

You can create a class with a constructor that takes a JSON object as a parameter and initializes the class properties.

Example: In this example, we define a User class with a constructor that takes a structured data object. An instance of the User class is then created by passing the parsed JSON data.

JavaScript

class User { name: string; age: number;  constructor(data: { name: string; age: number }) {     this.name = data.name;     this.age = data.age; } }  let jsonString = '{"name": "John", "age": 25}'; let user = new User(JSON.parse(jsonString)); console.log(user.name); // Output: John console.log(user.age); // Output: 25

Output:

John  25

Approach 5: Using Object Destructuring

Object destructuring in TypeScript allows you to directly extract properties from an object and assign them to variables. You can use this technique to initialize a TypeScript object with a JSON object.

Example: In this example we parses a JSON string into an object, then extracts username and userAge using object destructuring, logging them.

JavaScript

let jsonString =     '{"username": "GFG", "userAge": 22}'; let { username, userAge } =     JSON.parse(jsonString);  console.log(username); console.log(userAge);