Typescript Decorators Examples

Since there's no place that I've found to easily copy/paste function signatures whenever I want to implement a decorator, I've composed this repo with code examples and links. All credit goes to this stackoverflow answer.

Note: decorators were implemented in typescript 1.5

Contents

• Class Decorator
• Property Decorator
• Method Decorator
• Static Method Decorator
• Parameter Decorator

Class Decorator

Example use: Using the metadata api to store information on a class.

No parameters:

function ClassDecorator(
    target: Function // The class the decorator is declared on
    ) {
    console.log("ClassDecorator called on: ", target);
}

@ClassDecorator
class ClassDecoratorExample {
}

ClassDecorator called on:  function ClassDecoratorExample() {
 }

[playground]

With parameters:

function ClassDecoratorParams(param1: number, param2: string) {
    return function(
        target: Function // The class the decorator is declared on
        ) {
        console.log("ClassDecoratorParams(" + param1 + ", '" + param2 + "') called on: ", target);
    }
}

@ClassDecoratorParams(1, "a")
@ClassDecoratorParams(2, "b")
class ClassDecoratorParamsExample {
}

ClassDecoratorParams(2, 'b') called on:  function ClassDecoratorParamsExample() {
 }
ClassDecoratorParams(1, 'a') called on:  function ClassDecoratorParamsExample() {
 }

[playground]

Property Decorator

Example use: Creating a @serialize("serializedName") decorator and adding the property name the a list of properties to serialize.

function PropertyDecorator(
    target: Object, // The prototype of the class
    propertyKey: string | symbol // The name of the property
    ) {
    console.log("PropertyDecorator called on: ", target, propertyKey);
}

class PropertyDecoratorExample {
    @PropertyDecorator
    name: string;
}

PropertyDecorator called on:  {} name

[playground]

Method Decorator

function MethodDecorator(
    target: Object, // The prototype of the class
    propertyKey: string, // The name of the method
    descriptor: TypedPropertyDescriptor<any>
    ) {
    console.log("MethodDecorator called on: ", target, propertyKey, descriptor);
}

class MethodDecoratorExample {
    @MethodDecorator
    method() {
    }
}

MethodDecorator called on:  { method: [Function] } method { value: [Function],
  writable: true,
  enumerable: true,
  configurable: true }

[playground]

Restrict to a certain function signature:

function TypeRestrictedMethodDecorator(
    target: Object, // The prototype of the class
    propertyKey: string, // The name of the method
    descriptor: TypedPropertyDescriptor<(num: number) => number>
    ) {
    console.log("TypeRestrictedMethodDecorator called on: ", target, propertyKey, descriptor);
}

class TypeRestrictedMethodDecoratorExample {
    @TypeRestrictedMethodDecorator
    method(num: number): number {
        return 0;
    }
}

TypeRestrictedMethodDecorator called on:  { method: [Function] } method { value: [Function],
  writable: true,
  enumerable: true,
  configurable: true }

[playground]

Static Method Decorator

function StaticMethodDecorator(
    target: Function, // the function itself and not the prototype
    propertyKey: string | symbol, // The name of the static method
    descriptor: TypedPropertyDescriptor<any>
    ) {
    console.log("StaticMethodDecorator called on: ", target, propertyKey, descriptor);
}

class StaticMethodDecoratorExample {
    @StaticMethodDecorator
    static staticMethod() {
    }
}

StaticMethodDecorator called on:  function StaticMethodDecoratorExample() {
  }

[playground]

Parameter Decorator

function ParameterDecorator(
    target: Function, // The prototype of the class
    propertyKey: string | symbol, // The name of the method
    parameterIndex: number // The index of parameter in the list of the function's parameters
    ) {
    console.log("ParameterDecorator called on: ", target, propertyKey, parameterIndex);
}

class ParameterDecoratorExample {
    method(@ParameterDecorator param1: string, @ParameterDecorator param2: number) {
    }
}

ParameterDecorator called on:  { method: [Function] } method 1
ParameterDecorator called on:  { method: [Function] } method 0

[playground]