TypeScript Academy · Pelajaran

Mekanisme Pelebaran dan Penyempitan Tipe

Pelajari cara TypeScript melebarkan tipe dan kapan mencegahnya.

Mekanisme Pelebaran dan Penyempitan Tipe 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.

Apa Itu Pelebaran Tipe?

Pelebaran tipe terjadi ketika TypeScript menyimpulkan tipe yang lebih luas daripada yang Anda tulis. Penetapan let x = "hello" diperlebar menjadi string, bukan literal "hello".

let x = "hello"; // inferred: string, not "hello"
let y = 42;       // inferred: number, not 42

Pelebaran dengan let vs const

Variabel yang dideklarasikan dengan const mempertahankan tipe literalnya karena tidak dapat ditetapkan ulang. let diperlebar menjadi tipe dasarnya.

const a = "world"; // type: "world"
let   b = "world"; // type: string

Mencegah Pelebaran dengan Anotasi Tipe

Memberikan anotasi secara eksplisit pada variabel let mencegah pelebaran dan mempertahankan tipe literalnya.

let direction: "left" | "right" = "left";
// direction = "up"; // Error: not assignable

Penyempitan dengan typeof

TypeScript mempersempit tipe gabungan di dalam pemeriksaan typeof, sehingga Anda memperoleh tipe yang tepat di dalam cabang tersebut.

function format(val: string | number) {
  if (typeof val === "string") {
    return val.toUpperCase(); // val: string here
  }
  return val.toFixed(2);     // val: number here
}

Penyempitan dengan Pemeriksaan Kesetaraan

Pemeriksaan kesetaraan terhadap nilai literal juga mempersempit tipe di dalam cabang tersebut.

type Direction = "left" | "right" | "up";
function handle(dir: Direction) {
  if (dir === "left") {
    console.log("Going left"); // dir: "left"
  }
}

Analisis Alur Kontrol

TypeScript melacak penetapan melalui alur kontrol dan mempersempit tipe setelah setiap cabang.

function process(x: string | null) {
  if (x === null) return;
  // x is string here — TypeScript knows null is ruled out
  console.log(x.length);
}

Pelebaran dalam Literal Objek

Nilai properti literal objek juga diperlebar, kecuali jika Anda menggunakan as const.

const config = { mode: "dark" };
// config.mode: string (widened)

const config2 = { mode: "dark" } as const;
// config2.mode: "dark" (literal)

Kesegaran dan Pelebaran

Ketika Anda menetapkan literal objek secara langsung ke variabel bertipe, TypeScript menerapkan pemeriksaan properti berlebih — tetapi setelah diperlebar menjadi variabel bernama, pemeriksaan tersebut tidak lagi berlaku.

interface Options { timeout: number; }
const opts = { timeout: 3000, retry: true };
// No error — widened type, excess property check skipped
const o: Options = opts;

Penyempitan dengan Operator in

Operator in mempersempit tipe gabungan objek dengan memeriksa apakah suatu properti ada.

type Cat = { meow(): void };
type Dog = { bark(): void };
function speak(animal: Cat | Dog) {
  if ("meow" in animal) animal.meow();
  else animal.bark();
}

Penyempitan dengan Fungsi Asersi

Fungsi asersi menggunakan tipe kembalian asserts condition untuk melakukan penyempitan setelah pemanggilan.

function assertString(val: unknown): asserts val is string {
  if (typeof val !== "string") throw new Error("Expected string");
}
const x: unknown = "hi";
assertString(x);
x.toUpperCase(); // OK — narrowed to string

Ringkasan: Pelebaran vs Penyempitan

Pelebaran memperluas tipe yang disimpulkan demi fleksibilitas; penyempitan menyempurnakan tipe luas menjadi tipe yang tepat di dalam cabang kondisional. Memahami keduanya membantu Anda menulis TypeScript yang lebih aman.

Pemeriksaan Singkat

Deklarasi mana yang mencegah pelebaran menjadi tipe dasar?

Yang Anda Pelajari

Sekarang Anda memahami pelebaran tipe (cara TypeScript memperluas tipe yang disimpulkan) dan penyempitan (cara pemeriksaan kondisional menghasilkan tipe yang tepat). Gunakan as const untuk mencegah pelebaran dan pemeriksaan alur kontrol untuk mempersempit tipe gabungan dengan aman.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mekanisme Pelebaran dan Penyempitan Tipe” gratis?

Ya — teks lengkap “Mekanisme Pelebaran dan Penyempitan Tipe” 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 “Mekanisme Pelebaran dan Penyempitan Tipe”?

Pelajari cara TypeScript melebarkan tipe dan kapan mencegahnya. 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 “Mekanisme Pelebaran dan Penyempitan Tipe” 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

Mekanisme Pelebaran dan Penyempitan Tipe
Penentuan Tipe Kontekstual: Inferensi dari Konteks
Pemeriksaan Properti Berlebih dan Kebaruan
Assertion const dan as const

← Kembali ke TypeScript Academy