How to use TypeScript Decorators for Serialization In JSON

Using a Custom Serialization Function

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:

JavaScript

{
    "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.

JavaScript

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.

JavaScript

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.

JavaScript

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"
}

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

Tags:

#JavaScript #TypeScript #Web Technologies

Using a Custom Serialization Function

How to use TypeScript Decorators for Serialization In JSON

How to Convert an Object to a JSON String in Typescript ?

Similar Reads

Contact Us