TypeScript decorators and their use?

Question

Aryan Kumar · Answer

TypeScript decorators are a language feature used for adding metadata to classes, methods, or properties in a concise and declarative manner. Decorators are often associated with Angular, but they are a part of the ECMAScript standard and can be used in any TypeScript project. They serve various purposes and are commonly used in modern web development frameworks and libraries. Here's an overview of TypeScript decorators and their common use cases:

Class Decorators:

Class decorators are applied to classes and modify their behavior. They take a class declaration as their target and are executed when the class is defined, but before any instances of the class are created.
Example use cases:
- @Component decorator in Angular for defining components.
- @Entity decorator in TypeORM for defining database entities.
- @Module decorator in NestJS for defining modules.

@Component({
    selector: 'app-root',
    template: '<h1>Hello World</h1>'
})
export class AppComponent {
    // ...
}

Method Decorators:

Method decorators are applied to methods and can modify or extend their behavior. They take three parameters: the target (either the class or the prototype of the class), the property key (the name of the method), and a property descriptor.
Example use cases:
- @Get decorator in NestJS for defining HTTP GET route handlers.
- @Action decorator in Vuex (with Vue) for defining state management actions.

class Example {
    @logMethod
    doSomething() {
        // ...
    }
}

Property Decorators:

Property decorators are applied to class properties and can be used to modify or enhance their behavior. They also take three parameters: the target, the property key, and a property descriptor.
Example use cases:
- @Input decorator in Angular for defining input properties in components.
- @JsonProperty decorator for mapping class properties to JSON fields in serialization.

class Example {
    @readonly
    data: string;
}

Parameter Decorators:

Parameter decorators are applied to the parameters of class constructor methods. They can be used to annotate the parameter or perform custom logic.
Example use cases:
- @Inject decorator in Angular for injecting dependencies into a component's constructor.
- Dependency injection decorators in NestJS for configuring the DI container.

class Example {
    constructor(@paramDecorator param: string) {
        // ...
    }
}

Using Multiple Decorators:

Multiple decorators can be used on the same target (e.g., a class, method, property) to add various metadata or behavior to the target.

@logMethod
@deprecated
doSomething() {
    // ...
}

Custom Decorators:

You can create custom decorators to add application-specific behavior or metadata to your code. This provides a way to abstract complex functionality and keep code clean and maintainable.

function customDecorator(target: any, key: string) {
    // Custom logic here
}

class Example {
    @customDecorator
    property: string;
}

Common use cases for decorators include adding routing information, authentication checks, logging, dependency injection, and more. TypeScript decorators offer a powerful way to organize and enhance your code and are widely used in modern web development frameworks and libraries to simplify and streamline common tasks.

forum

TypeScript decorators and their use?

Can you answer this question?

1 Answers