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 Content
- Using JSON.stringify()
- Using json-stringify-safe library
- Using a Custom Serialization Function
- Using TypeScript Decorators for Serialization
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.ts
const 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"
}
Contact Us