TypeScript Academy · Pelajaran

Memodelkan Mesin Status

Representasikan status terbatas dengan union diskriminatif.

Memodelkan Mesin Status adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Keadaan sebagai Gabungan Terdiskriminasi

Antarmuka pengguna dan alur asinkron memiliki keadaan yang berbeda: diam, memuat, berhasil, dan gagal. Memodelkannya sebagai gabungan terdiskriminasi membuat setiap keadaan membawa tepat data yang dibutuhkannya.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

const s: State = { status: "idle" };
console.log(s.status);

Data untuk Setiap Keadaan

Hanya keadaan success yang memiliki data; hanya error yang memiliki message. Keadaan diam dan memuat tidak membawa data tambahan, sehingga mencegah data lama bocor di antara keadaan.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: number[] }
  | { status: "error"; message: string };

const ok: State = { status: "success", data: [1, 2, 3] };
console.log(ok.status, "data" in ok ? ok.data : null);

Merender Setiap Keadaan

Fungsi yang menggunakan switch pada status dapat merender keluaran yang tepat untuk setiap keadaan, dengan properti anggota hanya tersedia di tempat properti tersebut memang ada.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

function view(s: State): string {
  switch (s.status) {
    case "idle": return "Ready";
    case "loading": return "Loading...";
    case "success": return "Got: " + s.data;
    case "error": return "Failed: " + s.message;
  }
}
console.log(view({ status: "success", data: "users" }));

Mendefinisikan Transisi

Mesin keadaan berpindah dari satu keadaan ke keadaan lain melalui transisi. Fungsi transisi menerima keadaan saat ini dan sebuah peristiwa, lalu mengembalikan keadaan berikutnya.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

function start(s: State): State {
  if (s.status === "idle") return { status: "loading" };
  return s;
}
console.log(start({ status: "idle" }).status);

Memodelkan Peristiwa Juga

Peristiwa itu sendiri dapat berupa gabungan terdiskriminasi. Setiap jenis peristiwa memicu transisi tertentu.

type Event =
  | { type: "FETCH" }
  | { type: "RESOLVE"; data: string }
  | { type: "REJECT"; message: string };

const e: Event = { type: "RESOLVE", data: "ok" };
console.log(e.type);

Fungsi Transisi Lengkap

Gabungkan gabungan keadaan dan peristiwa dalam satu pereduksi. Menggunakan switch pada keduanya membuat setiap transisi tetap eksplisit dan aman bagi tipe.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };
type Event =
  | { type: "FETCH" }
  | { type: "RESOLVE"; data: string }
  | { type: "REJECT"; message: string };

function reduce(s: State, e: Event): State {
  if (e.type === "FETCH") return { status: "loading" };
  if (e.type === "RESOLVE") return { status: "success", data: e.data };
  return { status: "error", message: e.message };
}
console.log(reduce({ status: "idle" }, { type: "FETCH" }).status);

Keadaan yang Tidak Sah Tidak Dapat Direpresentasikan

Anda tidak dapat memiliki data dan error message secara bersamaan. Rancangan gabungan melarang keadaan yang saling bertentangan sejak awal.

type State =
  | { status: "success"; data: string }
  | { status: "error"; message: string };

// const bad: State = { status: "success", data: "x", message: "y" };
// Allowed extra props would be flagged in strict object checks.
console.log("no contradictory states");

Melindungi dari Transisi yang Tidak Valid

Anda dapat mengabaikan peristiwa yang tidak berlaku untuk keadaan saat ini, sehingga mesin tetap berada dalam keadaan yang konsisten dan tidak mengalami kerusakan.

type State = { status: "idle" } | { status: "loading" };
type Event = { type: "FETCH" } | { type: "CANCEL" };

function reduce(s: State, e: Event): State {
  if (s.status === "loading" && e.type === "CANCEL") return { status: "idle" };
  if (s.status === "idle" && e.type === "FETCH") return { status: "loading" };
  return s; // ignore invalid combos
}
console.log(reduce({ status: "loading" }, { type: "CANCEL" }).status);

Menambahkan Kelengkapan Kasus

Pasangkan pereduksi dengan assertNever agar penambahan keadaan atau peristiwa baru menampilkan setiap tempat yang harus Anda perbarui.

function assertNever(x: never): never { throw new Error("unhandled"); }
type State = { status: "idle" } | { status: "loading" } | { status: "done"; data: string };

function view(s: State): string {
  switch (s.status) {
    case "idle": return "idle";
    case "loading": return "loading";
    case "done": return s.data;
    default: return assertNever(s);
  }
}
console.log(view({ status: "done", data: "ok" }));

Keadaan Awal dan Akhir

Tetapkan keadaan awal yang jelas (sering kali idle) dan keadaan terminal (success atau error). Dengan demikian, siklus hidup mesin terdokumentasi.

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

const initial: State = { status: "idle" };
console.log("Start:", initial.status);

Mesin Keadaan Mini yang Lengkap

Berikut seluruh alurnya: mulai dalam keadaan diam, mengambil data hingga memuat, lalu selesai hingga berhasil. Tipe-tipe tersebut menjaga agar setiap langkah tetap benar.

type State = { status: "idle" } | { status: "loading" } | { status: "success"; data: string };
type Event = { type: "FETCH" } | { type: "RESOLVE"; data: string };

function reduce(s: State, e: Event): State {
  if (e.type === "FETCH") return { status: "loading" };
  return { status: "success", data: e.data };
}
let st: State = { status: "idle" };
st = reduce(st, { type: "FETCH" });
st = reduce(st, { type: "RESOLVE", data: "hi" });
console.log(st.status, st.status === "success" ? st.data : "");

Pemeriksaan Singkat: Mesin Keadaan

Uji pemahaman Anda tentang pemodelan mesin keadaan.

Rangkuman: Memodelkan Mesin Keadaan

Anda telah memodelkan diam/memuat/berhasil/gagal sebagai gabungan terdiskriminasi, menulis transisi yang aman bagi tipe untuk gabungan keadaan dan peristiwa, serta menggunakan pemeriksaan kelengkapan kasus agar mesin tetap benar saat berkembang.

type State = { status: "idle" } | { status: "loading" } | { status: "success"; data: string };
const s: State = { status: "success", data: "done" };
console.log(s.status === "success" ? s.data : "");

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memodelkan Mesin Status” gratis?

Ya — teks lengkap “Memodelkan Mesin Status” 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 “Memodelkan Mesin Status”?

Representasikan status terbatas dengan union diskriminatif. 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 4 dari 4.

Berapa lama pelajaran “Memodelkan Mesin Status” 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

← Kembali ke TypeScript Academy