Last Updated : 16 Jul, 2024
Summarize
Comments
Improve
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 Content
- Using JSON.stringify()
- Using json-stringify-safe library
- Using a Custom Serialization Function
- Using TypeScript Decorators for Serialization
- Using a Recursive Object Flattening Function
Using JSON.stringify()
- Define an interface Course that describes the shape of the object with the required properties and their types.
- Declare the course variable with the Course type. This ensures the object matches the interface shape.
- Assign the object literal to the course – TypeScript will check it matches the interface.
- Call JSON.stringify() on the typed object.
Example: The below code will explain the use of the JSON.stringify() method to convert an object to JSON string.
interface Course { courseName: string; courseFees: number;}const course: Course = { courseName: "Javascript", courseFees: 30000,};const jsonString = JSON.stringify(course);console.log(jsonString);
Output:
{
"courseName": "Javascript",
"courseFees": 30000
}
Using json-stringify-safe library
Steps to use JSON-stringify-safe library with TypeScript:
Step 1: Initialize a New Project
Open your terminal or command prompt and navigate to the directory where you want to create your TypeScript project. Then run the following command.
npm init
Step 2: Install TypeScript as a dev dependency
You need to install TypeScript as a dev dependency in your project using the below command.
npm install typescript --save-dev
Step 3: Create a tsconfig.json file
The tsconfig.json file contains TypeScript compiler options for your project. Run the following command.
npx tsc --init
Step 4: Install json-stringify-safe
Install the JSON-stringify-safe library using the below command.
npm install json-stringify-safe
Step 5: Install node types
Install the @types/node into your project directory using the below command.
npm install --save @types/node
Step 6: Compile TypeScript Code
Use below command to compile TypeScript code.
npx tsc index.ts
Step 7: Run Your Code
Use the below command to run the code.
node index
Project Structure:
project structure
Example: The below code uses JSON-stringify-safe library to convert an object into JSON string.
// index.tsconst stringifySafe = require('json-stringify-safe');interface Course { courseName: string; courseFees: number;}const course: Course = { courseName: 'Javascript', courseFees: 30000}const jsonString: string = stringifySafe(course);console.log(jsonString);
Output:
{
"courseName": "Javascript",
"courseFees": 30000
}
Using a Custom Serialization Function
In some cases, you may have complex objects with nested structures or non-serializable properties that need special handling when converting to JSON. In such scenarios, you can define a custom serialization function to handle the conversion process.
Example:
interface Course { courseName: string; courseFees: number; startDate: Date;}const course: Course = { courseName: "JavaScript", courseFees: 30000, startDate: new Date("2024-03-01"),};function customStringify(obj: any): string { return JSON.stringify(obj, (key, value) => { if (value instanceof Date) { // Serialize Date objects to ISO string return value.toISOString(); } return value; });}const jsonString = customStringify(course);console.log(jsonString);
Output:
{"courseName":"JavaScript","courseFees":30000,"startDate":"2024-03-01T00:00:00.000Z"}
Using TypeScript Decorators for Serialization
TypeScript decorators offer a declarative approach to modify the behavior of class declarations and members. For serialization, decorators can be utilized to annotate properties that require special handling or to automatically manage serialization without explicitly calling serialization logic in business code.
Step 1: Enable Decorators in TypeScript Configuration First, ensure your TypeScript project is set up to use decorators. Modify the tsconfig.json
file to enable the experimentalDecorators
option:
{ "compilerOptions": { "target": "ES5", "experimentalDecorators": true }}
Step 2: Define Serialization Decorators Create custom decorators to handle serialization logic for different types of properties. For example, you might have a decorator for formatting dates or excluding properties from the serialized output.
function SerializeDate(target: any, propertyKey: string) { let value: Date; const getter = function() { return value ? value.toISOString() : null; }; const setter = function(newVal: Date) { value = newVal; }; Object.defineProperty(target, propertyKey, { get: getter, set: setter, enumerable: true, configurable: true });}function ExcludeFromSerialization(target: any, propertyKey: string) { Object.defineProperty(target, propertyKey, { enumerable: false, configurable: true });}
Step 3: Define the Interface and Class Implement a class that uses these decorators, ensuring properties are handled according to the defined serialization rules.
interface Course { courseName: string; courseFees: number; startDate: Date;}class CourseImplementation implements Course { @ExcludeFromSerialization courseId: number; courseName: string; courseFees: number; @SerializeDate startDate: Date; constructor(courseId: number, name: string, fees: number, startDate: Date) { this.courseId = courseId; this.courseName = name; this.courseFees = fees; this.startDate = startDate; }}
Step 4: Create an Instance and Serialize Instantiate your class and serialize it using JSON.stringify, which will now respect the decorators’ behavior.
const course = new CourseImplementation(101, "JavaScript", 30000, new Date("2024-03-01"));const serializedCourse = JSON.stringify(course);console.log(serializedCourse);
Output:
{
"courseName": "JavaScript",
"courseFees": 30000,
"startDate": "2024-03-01T00:00:00.000Z"
}
Using a Recursive Object Flattening Function
In this approach, we define a recursive function to flatten complex objects into a simpler structure that can be easily serialized into JSON. This method is particularly useful for objects with nested structures, arrays, or non-serializable properties that require custom handling during serialization.
Example: The following example demonstrates how to use a recursive object flattening function to convert an object into a JSON string in TypeScript.
interface Course { courseName: string; courseFees: number; startDate: Date; additionalInfo?: { instructor: string; duration: string; };}const course: Course = { courseName: "JavaScript", courseFees: 30000, startDate: new Date("2024-03-01"), additionalInfo: { instructor: "John Doe", duration: "4 weeks" }};function flattenObject(obj: any, parent: string = '', res: any = {}): any { for (let key in obj) { const propName = parent ? `${parent}.${key}` : key; if (typeof obj[key] === 'object' && obj[key] !== null && !(obj[key] instanceof Date)) { flattenObject(obj[key], propName, res); } else { res[propName] = obj[key]; } } return res;}const flattenedCourse = flattenObject(course);const jsonString = JSON.stringify(flattenedCourse, (key, value) => { return value instanceof Date ? value.toISOString() : value;});console.log(jsonString);
Output:
{"courseName":"JavaScript","courseFees":30000,"startDate":"2024-03-01T00:00:00.000Z","additionalInfo.instructor":"John Doe","additionalInfo.duration":"4 weeks"}
Next Article
How to Convert String to JSON in TypeScript ?