TypeScript Academy · Pelajaran

TypeScript 5.0: Standar Dekorator dan Parameter Tipe const

Gunakan proposal dekorator baru dan parameter generik const.

Pelajaran 1 dari 413 langkah

TypeScript 5.0: Standar Dekorator dan Parameter Tipe const adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Gambaran Umum TypeScript 5.0

TypeScript 5.0 menghadirkan proposal dekorator TC39 yang telah distandardisasi (Tahap 3), parameter tipe const, sintaks modul verbatim baru, dan peningkatan kinerja yang signifikan.

// TS 5.0 release: March 2023
// npm install typescript@5

Dekorator Tahap 3

TS 5.0 menerapkan proposal dekorator TC39 Tahap 3 resmi—berbeda dari dekorator eksperimental lama. Anda tidak lagi memerlukan experimentalDecorators: true.

// New standard decorator — no experimentalDecorators flag needed
function logged(target: Function, ctx: ClassDecoratorContext) {
  return class extends (target as any) {
    constructor(...args: any[]) {
      console.log("Creating", target.name);
      super(...args);
    }
  };
}

@logged
class User { constructor(public name: string) {} }

Objek Konteks Dekorator

Dekorator baru menerima objek ClassDecoratorContext atau MethodDecoratorContext bertipe yang berisi metadata tentang elemen yang diberi dekorator.

function sealed(_: Function, ctx: ClassDecoratorContext) {
  ctx.addInitializer(function(this: any) {
    Object.seal(this);
  });
}

Dekorator Metode dalam TS 5.0

Dekorator metode menerima metode tersebut dan ClassMethodDecoratorContext, menggantikan tanda tangan lama (target, key, descriptor).

function measure(_: Function, ctx: ClassMethodDecoratorContext) {
  return function(this: any, ...args: any[]) {
    const start = performance.now();
    const result = (_.apply as any)(this, args);
    console.log(ctx.name, performance.now() - start, "ms");
    return result;
  };
}

Parameter Tipe const

const pada parameter tipe membuat TypeScript menyimpulkan tipe literal untuk argumen, bukan memperlebarnya menjadi tipe dasar.

function identity<const T>(val: T): T { return val; }
const a = identity("hello");      // type: "hello" (not string)
const b = identity([1, 2, 3]);    // type: readonly [1, 2, 3]

Generik const dibandingkan dengan as const

Parameter tipe const menerapkan efek penyempitan secara otomatis—pemanggil tidak perlu menambahkan as const pada setiap lokasi pemanggilan.

// Without const param: callers need as const
function makeRoute<T extends string>(path: T) { return path; }
const r1 = makeRoute("/home" as const); // "/home"

// With const param: automatic
function makeRoute2<const T extends string>(path: T) { return path; }
const r2 = makeRoute2("/home"); // "/home" — no as const needed

Resolusi Modul oleh Pembundel

TS 5.0 menambahkan moduleResolution: "bundler" untuk proyek yang menggunakan Vite, esbuild, atau pembundel serupa yang menangani resolusi modul sendiri.

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler"
  }
}

verbatimModuleSyntax

verbatimModuleSyntax: true mewajibkan impor yang hanya berisi tipe menggunakan import type, sehingga mencegah kebocoran impor saat runtime.

// tsconfig.json
{ "compilerOptions": { "verbatimModuleSyntax": true } }

// Now this errors: must be import type
import { User } from "./types"; // Error if User is only a type
import type { User } from "./types"; // OK

Peningkatan Kinerja

TS 5.0 meningkatkan penembolokan instansiasi tipe dan kinerja penyempitan, sehingga proyek besar menjadi lebih cepat tanpa perubahan kode.

# TS 5.0 compile benchmarks: ~10-15% faster on large projects

Migrasi dari Dekorator Lama

experimentalDecorators lama masih berfungsi, tetapi pada akhirnya akan ditandai usang. Bermigrasilah ke dekorator TC39 demi kompatibilitas di masa mendatang.

// Legacy: requires experimentalDecorators: true
@Component({ selector: "app-root" })
class AppComponent {}

// New TC39 decorator: no flag needed (but Angular/NestJS need updates)

Ringkasan: TypeScript 5.0

TypeScript 5.0 menghadirkan dekorator standar TC39, parameter tipe const untuk inferensi literal otomatis, moduleResolution: "bundler", verbatimModuleSyntax, dan peningkatan kinerja yang signifikan.

Pemeriksaan Singkat

Apa yang dilakukan const pada parameter tipe?

Jawab di pelajaran interaktif

Yang Anda Pelajari

TypeScript 5.0: dekorator standar TC39 menggantikan dekorator eksperimental, parameter tipe const secara otomatis menyempitkan argumen menjadi tipe literal, moduleResolution: "bundler" mendukung alat pembangunan modern, dan verbatimModuleSyntax mewajibkan import type.

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 101
Pelajaran: 352

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “TypeScript 5.0: Standar Dekorator dan Parameter Tipe const” gratis?

Ya — teks lengkap “TypeScript 5.0: Standar Dekorator dan Parameter Tipe const” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “TypeScript 5.0: Standar Dekorator dan Parameter Tipe const”?

Gunakan proposal dekorator baru dan parameter generik const. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “TypeScript 5.0: Standar Dekorator dan Parameter Tipe const” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

TypeScript 5.0: Standar Dekorator dan Parameter Tipe const
TypeScript 5.1–5.2: Inferensi yang Disempurnakan
TypeScript 5.3–5.4: Penyempitan Baru dan NoInfer
TypeScript 5.5+: Deklarasi Terisolasi dan Selanjutnya

← Kembali ke TypeScript Academy