Fitur Baru TypeScript 5 — Panduan Lengkap

TypeScript 5 membawa serangkaian fitur baru yang signifikan, peningkatan performa, dan penyederhanaan sintaks. Artikel ini membahas semua yang perlu Anda ketahui sebagai developer TypeScript.

1. Decorator (Dekorator) Resmi — Fitur Terbesar TS5

Apa itu Decorator?

Decorator adalah fungsi khusus yang dapat diterapkan ke kelas, metode, properti, atau parameter untuk menambah atau memodifikasi perilaku mereka.

Sebelum TypeScript 5 (eksperimental, tidak stabil): ypescript // Perlu experimentalDecorators: true @Component({ template: '' }) class MyComponent { }

TypeScript 5 (dekorator resmi sesuai standar ECMAScript): ` ypescript // Dekorator resmi, tidak perlu flag eksperimental function logged(target: any, context: ClassMethodDecoratorContext) { return function (...args: any[]) { console.log(Calling ); return target.apply(this, args); }; }

class MyClass { @logged greet(name: string) { return Hello, !; } } `

Jenis Dekorator yang Didukung

Use Case Praktis

` ypescript // Decorator untuk validasi function minLength(min: number) { return function(target: any, context: ClassFieldDecoratorContext) { return function(value: string) { if (value.length < min) { throw new Error(Minimum length is ); } return value; }; }; }

class User { @minLength(3) name: string = ''; } `

2. Const Type Parameters

Fitur baru yang memungkinkan Anda menginfer tipe yang lebih spesifik (literal) dalam generic.

Sebelum TS5: ` ypescript function getValues(arr: T[]) { return arr; }

const values = getValues(['a', 'b', 'c']); // Tipe: string[] — terlalu lebar `

TypeScript 5 dengan const: ` ypescript function getValues(arr: T[]) { return arr; }

const values = getValues(['a', 'b', 'c']); // Tipe: readonly ["a", "b", "c"] — lebih presisi! `

Kapan Menggunakan const Type Parameters?

• Saat Anda ingin mempertahankan nilai literal
• Untuk konfigurasi dan routing yang type-safe
• Untuk API yang membutuhkan presisi tipe tinggi

` ypescript // Contoh praktis: routing type-safe function createRoute(path: T) { return { path, handler: (req: Request) => {} }; }

const route = createRoute('/users/:id'); // route.path tipenya adalah "/users/:id" bukan string `

3. Multiple Config File Extends

TS5 mendukung multiple inheritance dalam sconfig.json.

Sebelum TS5 (hanya satu extend): json { "extends": "@company/base-tsconfig" }

TypeScript 5 (multiple extends): json { "extends": [ "@company/base-tsconfig", "@company/strict-tsconfig", "./custom-paths.json" ] }

Manfaat dalam Monorepo

` packages/ tsconfig.base.json ← Konfigurasi dasar tsconfig.strict.json ← Aturan strict tsconfig.react.json ← Konfigurasi React

apps/web/tsconfig.json: { "extends": [ "../../tsconfig.base.json", "../../tsconfig.strict.json", "../../tsconfig.react.json" ] } `

4. Granular Access Modifiers

TS5 memperkenalkan kontrol akses yang lebih halus.

override Keyword (Diperkuat)

` ypescript class Animal { makeSound() { return "..."; } }

class Dog extends Animal { override makeSound() { return "Woof!"; } // Wajib jika method ada di parent } `

Private Class Fields (#)

TS5 lebih konsisten dengan private fields JavaScript native: ` ypescript class Counter { #count = 0; // Private field JavaScript native

increment() { this.#count++; }

get value() { return this.#count; } } `

5. Peningkatan Performa Signifikan

TypeScript 5 mengklaim peningkatan performa build hingga 10–70% di berbagai metrik:

Mengapa Bisa Lebih Cepat?

• Perbaikan di internal compiler (module resolution)
• Optimasi garbage collection
• Lazy loading modul
• Caching yang lebih efisien

6. satisfies Operator (Diperkuat dari TS4.9)

` ypescript type ColorMap = Record;

const palette = { red: [255, 0, 0], green: "#00ff00", blue: [0, 0, 255], } satisfies ColorMap;

// Sekarang TypeScript tahu palette.red adalah number[] // bukan string | number[] const red = palette.red; // Tipe: [number, number, number] red.map(v => v / 255); // ✅ Tidak ada error `

7. Bundler Module Resolution

Mode resolusi modul baru yang lebih cocok untuk bundler modern (Vite, webpack, esbuild).

json // tsconfig.json { "compilerOptions": { "moduleResolution": "bundler", "module": "preserve" } }

Manfaat:

• Tidak perlu menulis ekstensi .js dalam import
• Lebih kompatibel dengan cara bundler bekerja
• Pengurangan konfigurasi boilerplate

Cara Upgrade ke TypeScript 5

Instalasi

`ash npm install typescript@5 --save-dev

atau

yarn add -D typescript@5 `

Breaking Changes yang Perlu Diperhatikan

1. 1xperimentalDecorators — dekorator lama (eksperimental) dan baru tidak kompatibel
2. 2num perubahan — beberapa edge case enum berubah perilaku
3. 3Module resolution — jika menggunakan "moduleResolution": "node", pertimbangkan update ke "bundler" atau "node16"

tsconfig.json yang Direkomendasikan untuk TS5

json { "compilerOptions": { "target": "ES2022", "module": "ESNext", "moduleResolution": "bundler", "strict": true, "noUncheckedIndexedAccess": true, "exactOptionalPropertyTypes": true, "useUnknownInCatchVariables": true } }

Perbandingan: TypeScript 4 vs 5

FAQ

Apakah TypeScript 5 backward compatible dengan TS4?

Sebagian besar kode TS4 berjalan di TS5 tanpa perubahan. Namun jika menggunakan xperimentalDecorators, perlu evaluasi karena sistem dekorator baru tidak kompatibel dengan yang lama.

Framework mana yang sudah mendukung TS5?

Angular 16+, NestJS 10+, Next.js 13.2+, Vite 4.x, dan sebagian besar framework modern sudah mendukung TypeScript 5.

Apakah perlu migrasi semua decorator sekaligus?

Tidak. Anda bisa menggunakan "experimentalDecorators": true untuk mempertahankan decorator lama sambil bertahap migrasi ke sistem baru.

Bagaimana performa TS5 di proyek besar (>100k baris)?

Peningkatan performa paling signifikan terasa di proyek besar. Beberapa laporan menunjukkan pengurangan build time hingga 50% pada monorepo enterprise.

Apakah TypeScript 5 cocok untuk pemula?

Pemula sebaiknya mulai dengan TypeScript 5 langsung — konfigurasi lebih simpel, error message lebih jelas, dan ekosistem sudah mengadopsi TS5 sebagai standar.