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

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:

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);

Output

GFG
22