{

Typescript Guide to Decorators with code examples


Typescript Decorators examples

What are decorators in TypeScript?

Typescript 1.5 version introduced decorators, that adds extra functionality to classes methods, properties. Decorators are one of the design patterns in an object-oriented program.

Decorators are attached to below entities

  • class declaration
  • methods
  • properties
  • arguments or parameters

How do you write a TypeScript decorator?

Typescript Decorators are functions declared with functionality. these are declared using @metadata at compile time. These are attached to different classes and it’s member entities. metadata is a function that execute at runtime and attach it’s behaviour to runtime

Declare a decorator print function

function print(constructor: Function) {
console.log("class decorator") 
}

}

Add it to class using @decorator.

 @print
class employee {
   
    calculate() { 
        return "calculation ";
    }
}
  • It calls print function during object creation and print console.log message

What is property decorator in TypeScript?

decorators are added to properties to add extra functionality during runtime. property functions are declared with target and propertyname. This executed during property initalization.

const printvariable = (target: any, propertyName: string) => {
  console.log(propertyName);
};

class Employee {
  @printvariable
  firstName: string = "Eric";
}

Output

firstName

typescript Decorator examples

Design patterns are solutions to repeated problems. This pattern allows adding functions and behavior to objects dynamically. It does affect the overall behavior of objects of a class.

Typescript decorators can be applied to

  • Methods
  • Classes
  • Properties
  • parameters
  • Accessor

These are experimental features, This might change in future versions. This will not be available to code normally.

To enable these decorators, Compiler configurations - experimentalDecorators property must be configured.

It can be done either via command line or tsconfig.json file in a project. Using command line:

tsc --target ES5 --experimentalDecorators  

For typescript projects, you can add “experimentalDecorators”: true in compilerOptions of tsconfig.json file.

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

Decorators syntax:

@metadata
class/function/property/variables

decorators declared with @symbole followed by name of metadata.

@metadata
``
metadata is an function

We will see the decorator examples in future posts  
**Class Decorator and Examples**

You can check usage of custom decorator for final keyword i.e  [Typescript final keyword](/typescript-final-keyword-example)
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.