Search⌘ K
AI Features
Home
Courses
Rediscovering JavaScript: ES6, ES7 & ES8

Introspecting the Decorated Class

Explore how to introspect classes decorated with Angular-style decorators by accessing metadata using Reflect methods. Understand how Babel transpiles decorator syntax for Node.js compatibility and learn to verify metadata injection in classes. Gain foundational insights into dynamic class behavior modification through decorators.

We'll cover the following...

Once a class is decorated with Angular decorators like @Component, @Pipe, @Directive, and so on, Angular can read the metadata to figure out what to do with them.

In our example, where we simulated the Angular @Component decorator, we stored the properties given to the decorator into the metadata.

Verification by example

Let’s verify that the decoration actually worked.

{ 
    "presets": ["es2016"],
    "plugins": [
      "transform-decorators-legacy"
    ]
}
src/index.mjs

Explanation

  • We import SampleComponent and query for its metadata keys by calling Reflect.getMetadataKeys(); this method is added to the Reflect class by the reflect-metadata library that we imported earlier.

  • Then we obtain the metadata for the annotations property using the Reflect.getMetadata() method.

Files in src folder

Let’s summarize the effect of all the decorator-related ...