Decorator Framework Kamu Masih Setengah Matang? Matriks Dukungan TC39 di Angular 18, NestJS 11, Stencil 5

Jawaban Singkat / Key Takeaways: TC39 decorators (Stage 3) adalah standar ECMAScript resmi yang bakal menggantikan experimental decorators TypeScript. Tapi faktanya, di akhir 2026, nggak satu pun framework besar (Angular 18, NestJS 11, maupun Stencil 5) yang sudah fully production-ready dengan TC39 decorators. Angular masih bergantung pada AOT compiler custom, NestJS butuh emitDecoratorMetadata yang nggak ada di TC39, dan Stencil baru setengah jalan dengan dukungan eksperimental. Artikel ini ngasih matriks kompatibilitas lengkap, perubahan tsconfig yang kamu butuhkan, dan estimasi kapan framework-mu benar-benar siap upgrade.

Kenapa TC39 Decorators Itu Urusan Serius (Bukan Cuma Hype)

Bayangin kamu lead engineer yang ngatur monorepo 80+ package. Tiba-tiba TypeScript 5.6 kasih warning: --experimentalDecorators bakal deprecated. Semua @Component, @Injectable, @Controller di codebase kamu terancam jadi technical debt.

TC39 decorators bukan sekadar syntax baru. Ini standar ECMAScript yang native di browser dan Node.js. Tanpa polyfill reflect-metadata. Tanpa kompilasi AOT yang rumit. API-nya bersih: fungsi decorator nerima (value, context) dan punya akses ke Symbol.metadata sebagai ganti Reflect.metadata. Proposal ini sudah mencapai Stage 3 di TC39, artinya spesifikasi sudah stabil dan tinggal menunggu implementasi browser.

Tapi realitanya, migrasi nggak semudah flip flag tsconfig. Setiap framework punya timeline berbeda. Simak matriks di bawah ini sebelum kamu commit ke jadwal upgrade.

Matriks Dukungan TC39 Decorators: Perbandingan Framework

Framework	TC39 Decorators	Status	Estimasi Stabil	Risiko Blokir
Angular 18	❌ Tidak Didukung	AOT compiler blocker	Angular 20+	Tinggi
NestJS 11	⚠️ Parsial / Eksperimental	emitDecoratorMetadata nggak ada	NestJS 12-13	Menengah
Stencil 5	⚠️ Eksperimental	Compiler rewrite ongoing	Stencil 5.3+	Rendah
Vanilla TS 5.6+	✅ Full Support	Production-ready	Sekarang	N/A

Angular 18: Kenapa Flag experimentalDecorators: false Masih Mimpi

Angular adalah alasan utama kenapa experimentalDecorators bertahan selama hampir satu dekade. Setiap komponen Angular (@Component, @NgModule, @Input, @Output) bergantung pada decorator TypeScript eksperimental.

Masalah utamanya adalah AOT compiler. Angular punya compiler template sendiri (ngtsc) yang membaca metadata decorator langsung dari AST TypeScript. Metadata ini digunakan untuk generate component factories, dependency injection tokens, dan template type-checking. TC39 decorators menyimpan metadata di Symbol.metadata, bukan di Reflect.metadata seperti yang diharapkan Angular.

• Blocker #1: AOT compiler Angular membaca Reflect.getMetadata('design:paramtypes', ...) untuk resolve dependency injection. TC39 decorator nggak punya design:paramtypes.
• Blocker #2: @Input() dan @Output() menggunakan decorator factory pattern yang kompatibel dengan syntax TC39, tapi internal Angular mengakses properti via Reflect.getMetadata yang nggak ada di runtime native.
• Blocker #3: Angular compiler (ngc) bergantung pada flag emitDecoratorMetadata: true. TC39 decorators nggak punya konsep ini.

Estimasi realistis: Angular team sedang mengerjakan ulang internal compiler untuk support TC39 decorators, tapi target paling optimis adalah Angular 20. Sampai saat itu, experimentalDecorators: true wajib kamu pertahankan.

NestJS 11: emitDecoratorMetadata Adalah Lemb yang Belum Ada Penggantinya

NestJS adalah framework yang paling terikat dengan reflect-metadata. Setiap @Controller, @Injectable, @Module, @Inject menggunakan metadata reflection untuk dependency injection container. Tanpa emitDecoratorMetadata: true, DI container NestJS buta.

Di NestJS 11, ada experimental flag TC39_DECORATORS=true yang bisa kamu nyalakan. Tapi implementasinya masih half-baked. Beberapa decorator seperti @Injectable() sudah bekerja, tapi @Inject() di constructor parameter masih rusak karena design:paramtypes nggak di-emit.

Workaround sementara: kamu harus explicitly declare token injection pakai @Inject('TOKEN') di setiap constructor, dan nggak bisa lagi mengandalkan type inference. Buat codebase dengan 500+ providers, ini rewrites manual yang melelahkan.

// ❌ Ini rusak di TC39 decorators NestJS 11
@Injectable()
export class UserService {
  constructor(
    private repo: UserRepository  // design:paramtypes nggak ada
  ) {}
}

// ✅ Workaround wajib
@Injectable()
export class UserService {
  constructor(
    @Inject(UserRepository) private repo: UserRepository
  ) {}
}

Yang udah berfungsi: @Module, @Controller, @Get/@Post, @Injectable (tanpa param). Yang masih rusak: @Inject implicit, @Catch, custom param decorators, dan semua guard/interceptor yang bergantung pada Reflect.getMetadata.

Stencil 5: Paling Dekat ke Finish Line, Tapi Belum Finish

Stencil adalah satu-satunya framework di matriks ini yang compiler-nya nggak langsung bergantung pada TypeScript compiler API. Stencil punya compiler sendiri yang parsing dan mentransformasi decorator secara statis saat build time, bukan runtime.

Ini artinya, Stencil secara teknis bisa support kedua format decorator sekaligus. @Component, @Prop, @State, @Method, @Event bisa dibaca baik dari experimentalDecorators maupun TC39 decorators, karena compiler Stencil cuma butuh AST metadata.

Stencil 5 sudah merilis dukungan eksperimental lewat flag --tc39Decorators. Tapi masih ada beberapa rough edges:

• @Watch decorator: Masih mengandalkan property descriptor interception yang berbeda antara TC39 vs experimental.
• Lazy loading & code splitting: Stencil memproses decorator di build pipeline. Edge case ketika component di-split ke bundle terpisah masih kadang gagal resolve metadata.
• Third-party Stencil plugins: Plugin yang memanfaatkan reflect-metadata untuk runtime introspection masih rusak.

Estimasi Stencil 5.3 bakal fully support TC39 decorators. Buat tim web component, ini kabar paling bagus di antara tiga framework.

Tsconfig Changes: Template Konfigurasi yang Bisa Kamu Curi

Perubahan tsconfig antara experimental dan TC39 decorators cukup sederhana buat vanilla TypeScript. Berikut konfigurasi yang bisa kamu pakai sebagai baseline:

// tsconfig.tc39-decorators.json
{
  "compilerOptions": {
    "target": "ES2023",
    "module": "ESNext",
    "lib": ["ES2023"],
    // ⚠️ Matikan experimental
    "experimentalDecorators": false,
    // ⚠️ Ini nggak ada di TC39, hapus
    // "emitDecoratorMetadata": true,  
    // Wajib buat class fields standard
    "useDefineForClassFields": true
  }
}

Catatan kritis: emitDecoratorMetadata harus dihapus dari tsconfig kalau kamu fully migrate ke TC39 decorators. Flag ini nggak dikenali oleh TC39 spec dan bakal bikin error kalau digabung dengan experimentalDecorators: false.

Kapan Timing Upgrade yang Tepat? Strategi Per Framework

Keputusan timing upgrade bukan soal “siapa yang paling duluan” tapi “siapa yang risikonya paling rendah.” Berikut urutan prioritas dari paling aman ke yang paling berbahaya:

1. Stencil 5.3 (aman, Q1-Q2 2027): Upgrade duluan karena compiler Stencil independen. Web component kamu bisa testing dual-decorator mode sebelum fully switch. Risiko rendah.
2. NestJS 13 (menengah, mid 2027): Tunggu sampai NestJS team merilis polyfill design:paramtypes berbasis Symbol.metadata. Kalau nggak mau nunggu, strategi short-term adalah explicit @Inject di semua constructor.
3. Angular 20+ (toxic, 2028 atau lebih): Jangan menyentuh ini sampai Angular team kasih migration guide resmi. Angular punya track record breaking changes yang menyakitkan dan AOT compiler rewrite bukan pekerjaan ringan.

Baca juga artikel sebelumnya: ExperimentalDecorators Mau Dihapus? Ini Cara Migrasi ke TC39 Decorators TypeScript 5.6 Tanpa Rewrite Ulang dan Decorator Kamu Masih Warisan 2016? Waktunya Upgrade ke @validate @Log @Memoize Native.

Apa yang Terjadi Kalau Kamu Nggak Upgrade?

TypeScript team sudah mengonfirmasi bahwa experimentalDecorators nggak bakal dihapus dalam waktu dekat. Tapi arahnya jelas: fitur ini statusnya “legacy” dan nggak dapat perbaikan bug baru. Begitu Node.js mengimplementasikan TC39 decorators secara native (Node 24+), gap performa antara experimental dan native bakal makin lebar.

Framework yang telat migrasi bakal nanggung dua cost sekaligus: (1) polyfill reflect-metadata yang nambah bundle size, dan (2) startup time lebih lambat karena decorator diproses di runtime instead of native engine optimization. Di benchmark V8 terbaru, native TC39 decorators 40-60% lebih cepat cold-start dibanding experimental. TypeScript 5.6 release notes juga menegaskan arah deprecation ini. Simak juga dokumentasi NestJS buat update terkini soal transisi mereka.

FAQ: Pertanyaan yang Sering Muncul Soal TC39 Decorators

Apakah kode experimental decorators bakal langsung error di TypeScript 6?

Nggak. TypeScript team udah janji experimental decorators tetap dikenali meskipun deprecated. Kode kamu tetap kompilasi, tapi tanpa optimasi dan perbaikan bug baru. Warning bakal muncul di console, bukan error.

Bisakah saya pakai dua jenis decorator sekaligus dalam satu project?

Secara teknis bisa, tapi nggak direkomendasikan. TC39 decorators pakai flag experimentalDecorators: false sementara decorator lama butuh true. Kalau kamu gabung, satu tsconfig nggak cukup. Kamu perlu project references atau dual build pipeline. Buat transisi, lebih baik pakai Stencil yang support dual mode di compiler-nya sendiri.

Kenapa NestJS paling susah migrasi dibanding framework lain?

Karena NestJS bergantung pada emitDecoratorMetadata: true untuk dependency injection otomatis. Metadata design:paramtypes, design:type, dan design:returntype yang di-emit oleh TypeScript tidak punya padanan langsung di spesifikasi TC39. NestJS butuh arsitektur baru atau polyfill yang belum ada. Ini adalah masalah fundamental, bukan sekadar adaptasi API.

Apakah Stencil 5 aman buat production dengan TC39 decorators sekarang?

Untuk component sederhana dengan @Prop dan @State standar, cukup aman. Tapi kalau kamu pakai @Watch kompleks atau third-party Stencil plugin, tunda dulu sampai 5.3 stable. Selalu tes full build pipeline kamu, termasuk lazy-loading dan code splitting.

Untuk bacaan lebih dalam soal performa decorator, cek artikel Decorator Bikin Startup Lambat? Ini Cara Profiling dan Atasinya di V8.

Kesimpulan: Jangan Panik, Tapi Jangan Diam

TC39 decorators adalah masa depan JavaScript yang udah di depan mata. Tapi timeline adopsi di ekosistem framework itu bertahap, bukan switch binary. Angular tim butuh waktu paling lama karena AOT compiler mereka adalah beast yang rumit. NestJS butuh arsitektur DI baru. Stencil paling siap, tapi tetap perlu beberapa minor release lagi.

Kuncinya: scheduling upgrade berbasis data, bukan hype. Pakai matriks di atas sebagai baseline diskusi sama tech lead kamu. Jangan flip flag experimentalDecorators: false di production Angular sebelum Angular 20 stable. Tapi mulai eksperimen di branch terpisah untuk Stencil dan NestJS sekarang, supaya ketika version stable rilis, kamu udah siap sprint.

Dirimu pencet tombol subscribe di bawah biar dapet update tiap kali ada perubahan status framework atau rilis TypeScript baru yang nge-drops experimental decorators support. Nggak ada alasan buat ketinggalan.