Decorators

Decorators are a stage-2 proposal for JavaScript and are used extensively in TypeScript. They provide a way to add both annotations and a meta-programming syntax for class declarations and members. In essence, a decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter.

Understanding Decorators

In TypeScript, decorators are simply functions that are invoked with a prefixed @ symbol, and immediately followed by a class, method, or property. The decorator function is supplied information about the class, method or property, and the decorator function returns something that forms the behavior of the class or method.

In order to use decorators, you must enable the experimentalDecorators compiler option in your tsconfig.json file:

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

Types of Decorators

There are four main types of decorators:

1. Class Decorators: Applied to the constructor of the class and can be used to observe, modify, or replace a class definition.

2. Method Decorators: Applied to the property descriptor of the method and can be used to observe, modify, or replace a method definition.

3. Property Decorators: Applied to the property of a class.

4. Parameter Decorators: Applied to the parameter in a class constructor or method.

Class Decorators

A class decorator is declared before a class declaration. The class decorator is applied to the constructor of the class and can be used to observe, modify, or replace a class definition.

@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

In this example, @sealed is a class decorator.

Method Decorators

Method decorators are declared just before a method declaration. The decorator is applied to the Property Descriptor for the method and can be used to observe, modify, or replace a method definition.

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }

    @enumerable(false)
    greet() {
        return "Hello, " + this.greeting;
    }
}

In this example, @enumerable(false) is a method decorator.

Property Decorators

A Property Decorator is declared just before a property declaration. A property decorator cannot be used in a declaration file, or in any other ambient context.

class Greeter {
    @format("Hello, %s")
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return this.greeting;
    }
}

Parameter Decorators

A Parameter Decorator is declared just before a parameter declaration. The parameter decorator is applied to the function for a class constructor or method declaration.

class Greeter {
    greeting: string;
    constructor(@required name: string) {
        this.greeting = "Hello, " + name;
    }
}

In conclusion, decorators are a powerful way to modify classes, properties, methods, and parameters in TypeScript. They provide a way to add behavior or transform values in a declarative way.