What are decorators in TypeScript and how can you use them?

Decorators in TypeScript are special kind of declarations that can be attached to classes, methods, accessor, property, or parameter. Decorators use the form ‘@expression‘, where ‘expression‘ must evaluate to a function that will be called at runtime with information about the decorated declaration. They provide a flexible way to modify or extend the behavior of a class or its members without altering their original source code.

To use decorators in TypeScript, you need to enable the ‘experimentalDecorators‘ compiler option either through the ‘tsconfig.json‘ configuration file or by passing
‘–experimentalDecorators‘ flag to the ‘tsc‘ command.

Here’s an overview of common types of decorators:

1. Class decorator:

Applied to the class constructor, can be used to observe, modify, or replace a class definition.

Example:

function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class MyClass {
    // ...
}

2. Method decorator:

Applied to the property descriptor for a method, can be used to observe, modify, or replace a method definition.

Example:

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
        console.log(`Called ${propertyKey} with args:`, args);
        return originalMethod.apply(this, args);
    };

    return descriptor;
}

class MyClass {
    @log
    myMethod(arg1: number, arg2: string) {
        // ...
    }
}

3. Accessor decorator:

Applied to the property descriptor for an accessor, can be used to observe, modify, or replace an accessor’s getter or setter.

Example:

function readonly(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.writable = false;
    return descriptor;
}

class MyClass {
    private _field: number;

    @readonly
    get field(): number {
        return this._field;
    }

    set field(value: number) {
        this._field = value;
    }
}

4. Property decorator:

Applied to a property’s prototype, used to observe that a property has been declared for an instance.

Example:

function required(target: any, propertyKey: string) {
    // Add propertyKey to required properties for the target class
}

class MyClass {
    @required
    propertyName: string;
}

5. Parameter decorator:

Applied to the function of a class constructor or method declaration.

Example:

function validate(target: any, propertyKey: string, parameterIndex: number) {
    // Add parameter validation logic
}

class MyClass {
    myMethod(@validate arg1: number, arg2: string) {
        // ...
    }
}

Keep in mind that decorators in TypeScript are still an experimental feature and may change in future releases. Always refer to the official TypeScript documentation for the latest information on using decorators.