Add a decorator to all functions in a TypeScript class to list all available methods

Question

Add a decorator to all functions in a TypeScript class to list all available methods

How can I apply a decorator function to all methods within a class in order to streamline the code like this:

class User {
    @log
    delete() {}

    @log
    create() {}

    @log
    update() {}
}

and have it transformed into:

@log
class User {
    delete() {}
    create() {}
    update() {}
}

javascript typescript decorator

Answer 1

Answer №1

To enhance a class with a decorator, iterate through the properties on its prototype.

Follow these steps for each property:

Retrieve the property descriptor.
Confirm that it pertains to a method.
Wrap the method's value in a new function that logs details about the method call.
Reassign the modified property descriptor to the property.

Adapting the property descriptor is crucial to ensure compatibility with other decorators affecting it.

function log(target: Function) {
    for (const propertyName of Object.keys(target.prototype)) {
        const descriptor = Object.getOwnPropertyDescriptor(target.prototype, propertyName);
        const isMethod = descriptor.value instanceof Function;
        if (!isMethod)
            continue;

        const originalMethod = descriptor.value;
        descriptor.value = function (...args: any[]) {
            console.log("The method args are: " + JSON.stringify(args));
            const result = originalMethod.apply(this, args);
            console.log("The return value is: " + result);
            return result;
        };

        Object.defineProperty(target.prototype, propertyName, descriptor);        
    }
}

Enhancing Base Class Methods

If you wish to affect base class methods as well, consider implementing something along these lines:

function log(target: Function) {
    for (const propertyName in target.prototype) {
        const propertyValue = target.prototype[propertyName];
        const isMethod = propertyValue instanceof Function;
        if (!isMethod)
            continue;

        const descriptor = getMethodDescriptor(propertyName);
        const originalMethod = descriptor.value;
        descriptor.value = function (...args: any[]) {
            console.log("The method args are: " + JSON.stringify(args));
            const result = originalMethod.apply(this, args);
            console.log("The return value is: " + result);
            return result;
        };

        Object.defineProperty(target.prototype, propertyName, descriptor);        
    }

    function getMethodDescriptor(propertyName: string): TypedPropertyDescriptor<any> {
        if (target.prototype.hasOwnProperty(propertyName))
            return Object.getOwnPropertyDescriptor(target.prototype, propertyName);

        // create a new property descriptor for the base class' method 
        return {
            configurable: true,
            enumerable: true,
            writable: true,
            value: target.prototype[propertyName]
        };
    }
}

Answer 2

To enhance a class with a decorator, iterate through the properties on its prototype.

Follow these steps for each property:

Retrieve the property descriptor.
Confirm that it pertains to a method.
Wrap the method's value in a new function that logs details about the method call.
Reassign the modified property descriptor to the property.

Adapting the property descriptor is crucial to ensure compatibility with other decorators affecting it.

function log(target: Function) {
    for (const propertyName of Object.keys(target.prototype)) {
        const descriptor = Object.getOwnPropertyDescriptor(target.prototype, propertyName);
        const isMethod = descriptor.value instanceof Function;
        if (!isMethod)
            continue;

        const originalMethod = descriptor.value;
        descriptor.value = function (...args: any[]) {
            console.log("The method args are: " + JSON.stringify(args));
            const result = originalMethod.apply(this, args);
            console.log("The return value is: " + result);
            return result;
        };

        Object.defineProperty(target.prototype, propertyName, descriptor);        
    }
}

Enhancing Base Class Methods

If you wish to affect base class methods as well, consider implementing something along these lines:

function log(target: Function) {
    for (const propertyName in target.prototype) {
        const propertyValue = target.prototype[propertyName];
        const isMethod = propertyValue instanceof Function;
        if (!isMethod)
            continue;

        const descriptor = getMethodDescriptor(propertyName);
        const originalMethod = descriptor.value;
        descriptor.value = function (...args: any[]) {
            console.log("The method args are: " + JSON.stringify(args));
            const result = originalMethod.apply(this, args);
            console.log("The return value is: " + result);
            return result;
        };

        Object.defineProperty(target.prototype, propertyName, descriptor);        
    }

    function getMethodDescriptor(propertyName: string): TypedPropertyDescriptor<any> {
        if (target.prototype.hasOwnProperty(propertyName))
            return Object.getOwnPropertyDescriptor(target.prototype, propertyName);

        // create a new property descriptor for the base class' method 
        return {
            configurable: true,
            enumerable: true,
            writable: true,
            value: target.prototype[propertyName]
        };
    }
}

Answer 3

Answer №2

If you happen to come across this message at some point down the road:

After being inspired by David's response, I decided to put my own spin on it and eventually turned it into an npm package: https://www.npmjs.com/package/decorate-all

In the original poster's situation, the usage would look something like this

@DecorateAll(log)
class User {
    delete() {}
    create() {}
    update() {}
}

Answer 4

If you happen to come across this message at some point down the road:

After being inspired by David's response, I decided to put my own spin on it and eventually turned it into an npm package: https://www.npmjs.com/package/decorate-all

In the original poster's situation, the usage would look something like this

@DecorateAll(log)
class User {
    delete() {}
    create() {}
    update() {}
}

Answer 5

Answer №3

If you prefer not to add extra dependencies, here is a concise version based on @Papooch's code

function ApplyDecorators(decorator: MethodDecorator) {
    return (target: any) => {
        const properties = Object.getOwnPropertyDescriptors(target.prototype);
        for (const [propName, descriptor] of Object.entries(properties)) {
            const isFunction =
                typeof descriptor.value == "function" &&
                propName != "constructor";
            if (!isFunction) {
                continue;
            }
            decorator(target, propName, descriptor);
            Object.defineProperty(target.prototype, propName, descriptor);
        }
    };
}

function Throttle(
    target: any,
    propertyKey: string | symbol,
    descriptor: PropertyDescriptor
) {
    const original = descriptor.value;
    descriptor.value = function () {
        console.log("throttle");
        return original.call(this);
    };
}

@ApplyDecorators(Throttle)
class APIHandler {
    async call1() {    }
    async call2() {    }
}

Answer 6

If you prefer not to add extra dependencies, here is a concise version based on @Papooch's code

function ApplyDecorators(decorator: MethodDecorator) {
    return (target: any) => {
        const properties = Object.getOwnPropertyDescriptors(target.prototype);
        for (const [propName, descriptor] of Object.entries(properties)) {
            const isFunction =
                typeof descriptor.value == "function" &&
                propName != "constructor";
            if (!isFunction) {
                continue;
            }
            decorator(target, propName, descriptor);
            Object.defineProperty(target.prototype, propName, descriptor);
        }
    };
}

function Throttle(
    target: any,
    propertyKey: string | symbol,
    descriptor: PropertyDescriptor
) {
    const original = descriptor.value;
    descriptor.value = function () {
        console.log("throttle");
        return original.call(this);
    };
}

@ApplyDecorators(Throttle)
class APIHandler {
    async call1() {    }
    async call2() {    }
}

Add a decorator to all functions in a TypeScript class to list all available methods

Answer №1

Answer №2

Answer №3

Similar questions

Encountering an issue with a Discord bot causing it to malfunction and deviate from its intended

Performing an API GET request in a header.ejs file using Node.js

Ensure that the jQuery ajax function triggers only after the images or iframes have completely loaded

Deliver asynchronous requests using Web Components (Model-View-Controller)

Enhancing functionality with jQuery: updating multiple input fields at

How to stop a checkbox from being selected in Angular 2

React Intersection Observer not functioning properly

I am experiencing an issue with my d3 force directed graph where the links are not

Updating NPM packages versions is currently restricted

Intellisense in VS Code is failing to work properly in a TypeScript project built with Next.js and using Jest and Cypress. However, despite this issue,

Seeking a window-adjustable table with stationary headers

Show mistakes using source mapping (TypeScript combined with Node/Express)

Displaying Grunt Command-Line Output in Browser

Secret method to successfully reach a function designated within the load scope

The specified "ID" type variable "$userId" is being utilized in a positional context that is anticipating a "non-null ID" type

Navigate to a precise section of the webpage, positioned at a specific distance from the top

Tips for redirecting JavaScript requests to the target server using curl on a server

Tips for reverting from Angular 7 to Angular 6

How about beginning a JavaScript count with a randomly generated number?

Tips for retrieving a cropped image with Croppr.js