---
title: "TypeScript decorators and their use?"  
description: "TypeScript decorators and their use?"  
author: "Steilla Mitchel"  
published: 2023-10-16  
updated: 2023-10-16  
canonical: https://www.mindstick.com/forum/160156/typescript-decorators-and-their-use  
category: "typescript"  
tags: ["scripting", "typescript"]  
reading_time: 3 minutes  

---

# TypeScript decorators and their use?

[TypeScript](https://www.mindstick.com/blog/303572/typescript-elevating-javascript-to-the-next-level-and-why) [decorators](https://www.mindstick.com/interview/34380/explain-the-python-decorators) and their use?

## Replies

### Reply by Aryan Kumar

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.

```plaintext
@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.

```plaintext
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.

```plaintext
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.

```plaintext
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.

```plaintext
@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.

```plaintext
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.


---

Original Source: https://www.mindstick.com/forum/160156/typescript-decorators-and-their-use

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.