Lesson 12 / 30

Decorators and Advanced Features

Transform decorators, class properties, and experimental JavaScript features.

Decorators: metadata and class enhancement

Decorators (like @Component) are experimental. Babel and SWC need plugins to transform them into metadata or function calls.

TypeScript decorators to function calls

@Component becomes a function call that wraps or modifies the class. Requires @babel/plugin-proposal-decorators.

// TypeScript + Decorators
@Component({ selector: 'app' })
class AppComponent {}

// Transformed by Babel plugin
var AppComponent = __decorate([
  Component({ selector: 'app' })
], AppComponent);

Use plugin options for decorator version

Decorators have multiple proposals (legacy vs new). Specify version: '2023-05' or similar in plugin config to control which standard Babel follows.