TypeScript Academy · Ders

Durum Makinelerini Modelleme

Sonlu durumları ayrıştırılmış birleşimlerle temsil edin.

Durum Makinelerini Modelleme, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.

Ayırt Edici Birleşim Olarak Durumlar

Kullanıcı arayüzü ve eşzamansız akışların birbirinden farklı durumları vardır: boşta, yükleniyor, başarılı, hata. Bunları ayırt edici birleşim olarak modellemek, her durumun tam olarak ihtiyaç duyduğu veriyi taşımasını sağlar.

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

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

Her Duruma Özgü Veri

Yalnızca success durumu data taşır; yalnızca error durumu message taşır. Boşta ve yükleniyor durumları fazladan veri taşımaz; bu da eski verilerin durumlar arasında sızmasını önler.

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);

Her Durumu Görüntüleme

status üzerinde switch kullanan bir işlev, her durum için doğru çıktıyı oluşturabilir ve üye alanlarını yalnızca mevcut oldukları yerlerde kullanabilir.

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" }));

Geçişleri Tanımlama

Bir durum makinesi, geçişler aracılığıyla durumlar arasında hareket eder. Bir geçiş işlevi mevcut durumu ve bir olayı alarak sonraki durumu döndürür.

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);

Olayları da Modelleştirme

Olayların kendileri de ayırt edici birleşim olabilir. Her olay türü belirli bir geçişi tetikler.

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

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

Eksiksiz Bir Geçiş İşlevi

Durum ve olay birleşimlerini tek bir indirgeme işlevinde birleştirin. Her ikisi üzerinde switch kullanmak, tüm geçişleri açık ve tür güvenli tutar.

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);

Geçersiz Durumlar Temsil Edilemez

Aynı anda data ve bir error message değerine sahip olamazsınız. Birleşim tasarımı, çelişkili durumları daha oluşturulurken yasaklar.

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");

Geçersiz Geçişleri Engelleme

Mevcut duruma uygulanmayan olayları yok sayarak makinenin çökmesi yerine tutarlı bir durumda kalmasını sağlayabilirsiniz.

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);

Tüm Durumları Ele Alma Denetimi Ekleme

Yeni bir durum veya olay eklediğinizde güncellemeniz gereken her yerin ortaya çıkması için indirgeme işlevini assertNever ile birlikte kullanın.

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" }));

Başlangıç ve Son Durumlar

Açık bir başlangıç durumu (genellikle idle) ve son durumlar (success veya error) belirleyin. Böylece makinenin yaşam döngüsünü belgelendirmiş olursunuz.

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

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

Eksiksiz Bir Mini Durum Makinesi

Tüm akış şöyledir: boşta başlayın, yükleme için veri alın ve başarılı duruma geçin. Türler her adımın doğru olmasını sağlar.

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 : "");

Hızlı Kontrol: Durum Makineleri

Durum makinelerini modelleme konusundaki anlayışınızı sınayın.

Özet: Durum Makinelerini Modelleştirme

Boşta/yükleniyor/başarılı/hata durumlarını ayırt edici birleşim olarak modellediniz, durum ve olay birleşimleri üzerinde tür güvenli geçişler yazdınız ve makine büyüdükçe doğruluğunu korumak için tüm durumların ele alınması denetimini kullandınız.

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

Sıkça Sorulan Sorular

“Durum Makinelerini Modelleme” dersi ücretsiz mi?

Evet — “Durum Makinelerini Modelleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.

“Durum Makinelerini Modelleme” dersinde ne öğreneceğim?

Sonlu durumları ayrıştırılmış birleşimlerle temsil edin. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Durum Makinelerini Modelleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← TypeScript Academy Sayfasına Dön