TypeScript Academy · Pelajaran

TypeScript 5.1–5.2: Inferensi yang Disempurnakan

Pelajari independensi tipe setter/getter dan deklarasi using.

Pelajaran 2 dari 413 langkah

TypeScript 5.1–5.2: Inferensi yang Disempurnakan adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.1

TypeScript 5.1 (dirilis pada Juni 2023) meningkatkan kemandirian tipe penyetel/pengambil, fleksibilitas tipe elemen JSX, kursor tertaut dalam penyunting, dan optimalisasi kinerja.

// npm install typescript@5.1

Kemandirian Tipe Penyetel/Pengambil

Sebelum 5.1, penyetel dan pengambil harus menggunakan tipe yang sama. Sekarang, pengambil dapat mengembalikan tipe yang lebih luas daripada yang diterima penyetel—berguna untuk pola koersi.

class Temperature {
  get celsius(): string { return this._c + "°C"; } // string
  set celsius(value: string | number) {             // string | number
    this._c = Number(value);
  }
  private _c = 0;
}

undefined sebagai Anak JSX

TS 5.1 memungkinkan komponen mengembalikan undefined secara langsung (selain null) dari fungsi perenderannya, sesuai dengan perilaku React 18.

// TS 5.1+: OK
function Widget(): undefined { return undefined; }
// Before 5.1: had to return null or JSX element

Fleksibilitas Tipe Elemen JSX

Kendala JSX.ElementType yang baru memberikan fleksibilitas lebih besar untuk pabrik JSX khusus, yang berguna di lingkungan non-React.

// Custom JSX element types supported more naturally in 5.1

Ikhtisar TypeScript 5.2

TypeScript 5.2 (dirilis pada Agustus 2023) memperkenalkan deklarasi using (Manajemen Sumber Daya Eksplisit), metadata dekorator, dan metode penyalinan larik.

// npm install typescript@5.2

Deklarasi using

using menerapkan proposal Manajemen Sumber Daya Eksplisit — metode [Symbol.dispose]() milik sumber daya dipanggil saat sumber daya tersebut keluar dari cakupan.

// Requires lib: ["es2022", "esnext.disposable"]
function getConnection(): Disposable {
  const conn = openDb();
  return { [Symbol.dispose]() { conn.close(); } };
}

{
  using conn = getConnection();
  // conn.close() called automatically at block end
}

Pembersihan Asinkron dengan await using

await using bekerja seperti using, tetapi memanggil metode asinkron [Symbol.asyncDispose](), sehingga pembersihan asinkron dapat dilakukan.

async function run() {
  await using db = await connectDb();
  // db[Symbol.asyncDispose]() called on exit
}

Metadata Dekorator

TS 5.2 menerapkan proposal metadata dekorator TC39, sehingga dekorator dapat melampirkan metadata melalui Symbol.metadata.

function meta(value: string) {
  return (_: unknown, ctx: DecoratorContext) => {
    ctx.metadata[ctx.name] = value;
  };
}

@meta("service")
class MyService {}
console.log((MyService as any)[Symbol.metadata]); // { "MyService": "service" }

Metode Penyalinan Larik

TS 5.2 menambahkan tipe untuk Array.prototype.toSorted, toReversed, toSpliced, dan with — operasi larik yang tidak dapat diubah dari ES2023.

const arr = [3, 1, 2];
const sorted = arr.toSorted(); // [1, 2, 3] — new array, arr unchanged
const reversed = arr.toReversed(); // [2, 1, 3]

Menggunakan using di tsconfig untuk 5.2

Untuk menggunakan deklarasi using, sertakan pustaka esnext.disposable dalam tsconfig Anda.

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "ESNext.Disposable"]
  }
}

Ringkasan: TS 5.1–5.2

TS 5.1: tipe pengambil/penyetel independen dan pengembalian JSX berupa undefined. TS 5.2: deklarasi using untuk pembersihan sumber daya otomatis, metadata dekorator, dan tipe metode penyalinan larik yang tidak dapat diubah.

Pemeriksaan Singkat

Apa yang dilakukan deklarasi using di TypeScript 5.2?

Jawab di pelajaran interaktif

Yang Telah Anda Pelajari

TS 5.1 menghadirkan tipe pengambil/penyetel independen dan pengembalian JSX berupa undefined. TS 5.2 menghadirkan deklarasi using untuk manajemen sumber daya otomatis, metadata dekorator, dan tipe metode larik yang tidak dapat diubah dari ES2023.

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.1–5.2: Inferensi yang Disempurnakan” gratis?

Ya — teks lengkap “TypeScript 5.1–5.2: Inferensi yang Disempurnakan” 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.1–5.2: Inferensi yang Disempurnakan”?

Pelajari independensi tipe setter/getter dan deklarasi using. 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 2 dari 4.

Berapa lama pelajaran “TypeScript 5.1–5.2: Inferensi yang Disempurnakan” 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