@dwayne29legrand

Frontend Tips 2 — Wrapping a class method using decorators with TypeScript

In this tip I want to share how to wrap your class methods using decorators, to create, for example, a log where you can see when a method is executed.

Decorators are in EcmaScript proposals but I think that will be easier to do the exercise with CodeSandbox and TypeScript.

Preparing the exercise

First we need to create a new CodeSandbox using TypeScript template.

Example creating a sandbox for TS

Now it’s time to modify tsconfig.json file and add experimental support for decorators.

"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6"

We can create an Example class that will be useful to test our decorator.

class Example {
  public myMethod(): void {
    console.log("This is a method");
  }
}
const example = new Example();
example.myMethod();

Example class

Creating our Property…