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:
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);
Similar Reads
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 TypeScriptPlain Objects: When parsing JSON data using the JS
3 min read
How to Convert an Array of Objects into Object in TypeScript ? Converting an array of objects into a single object is a common task in JavaScript and TypeScript programming, especially when you want to restructure data for easier access. In this article, we will see how to convert an array of objects into objects in TypeScript.We are given an array of objects a
3 min read
How to Create Objects with Dynamic Keys in TypeScript ? In TypeScript, objects with dynamic keys are those where the key names are not fixed and can be dynamically determined at runtime. This allows the creation of flexible data structures where properties can be added or accessed using variables, providing more versatile type definitions.These are the f
3 min read
How to Cast Object to Interface in TypeScript ? In TypeScript, sometimes you need to cast an object into an interface to perform some tasks. There are many ways available in TypeScript that can be used to cast an object into an interface as listed below: Table of Content Using the angle bracket syntaxUsing the as keywordUsing the spread operatorU
3 min read
How to Convert an Object to a JSON String in Typescript ? In TypeScript, an object is a collection of related data and functionality. Objects are made up of properties and methods. Properties describe the object, methods describe what it can do.Table of ContentUsing JSON.stringify()Using json-stringify-safe libraryUsing a Custom Serialization FunctionUsing
5 min read
How to Create an Object in TypeScript? TypeScript object is a collection of key-value pairs, where keys are strings and values can be any data type. Objects in TypeScript can store various types, including primitives, arrays, and functions, providing a structured way to organize and manipulate data.Creating Objects in TypescriptNow, let
4 min read