Search⌘ K
Home
Courses
Mastering TypeScript

Decorators Metadata

Explore how to activate and utilize the emitDecoratorMetadata compiler flag in TypeScript. Learn to retrieve runtime type information using the reflect-metadata library, enabling enhanced class, method, and parameter introspection for advanced programming techniques.

We'll cover the following...

The TypeScript compiler includes experimental support for decorators to carry extra metadata when they are used. This metadata provides us with a little more information with regard to how a decorator is used. In order to activate this feature, we will need to set the emitDecoratorMetadata flag in our tsconfig.json file to true as follows:

TypeScript 4.9.5
{
 "compilerOptions": {
 // other compiler options
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true
 }
}
Enabling the emitDecoratorMetadata flag

Let’s now take a closer look at the effect that this compile option has on our generated JavaScript.

Consider the following parameter decorator:

TypeScript 4.9.5
function metadataParameterDec(
 target: any,
 methodName: string,
 parameterIndex: number
) {}
// Define a class called `ClassWithMetadata`.
class ClassWithMetadata {
 // Define a method called `print`.
 print(
  // Apply `metadataParameterDec` decorator on `id` parameter.
  @metadataParameterDec id: number, name: string
 ) {}
}
Decorating a method parameter with metadata

Here, we have a parameter decorator named metadataParameterDec. This decorator is being applied to the id parameter of the print method of the ClassWithMetadata class definition on line 11.

If the emitDecoratorMetadata flag of our tsconfig.json file is set to false or is not present, then the compiler will emit the following JavaScript:

Javascript (babel-node)
function metadataParameterDec(target, methodName, parameterIndex) {
}
var ClassWithMetadata = /** @class */ (function () {
    function ClassWithMetadata() {
    }
    ClassWithMetadata.prototype.print = function (id, name) {
    };
    __decorate([
        __param(0, metadataParameterDec)
    ], ClassWithMetadata.prototype, "print", null);
    return ClassWithMetadata;
}());
Transpiled JavaScript code with emitDecoratorMetadata disabled

Here, the generated JavaScript defines a standard JavaScript closure for our class named ClassWithMetadata. The code that is ...