TypeScript Academy · Lección

Modelado de máquinas de estados

Represente estados finitos mediante uniones discriminadas.

Modelado de máquinas de estados es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

Estados como unión discriminada

Los flujos de interfaz de usuario y asíncronos tienen estados diferenciados: inactivo, cargando, éxito y error. Modelarlos como una unión discriminada hace que cada estado contenga exactamente los datos que necesita.

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

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

Datos asociados a cada estado

Solo el estado success tiene data; solo error tiene message. Los estados idle y loading no contienen datos adicionales, lo que evita que se filtren datos obsoletos entre estados.

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

Representar cada estado

Una función que usa un switch sobre status puede representar el resultado correcto para cada estado, con los campos de cada miembro disponibles únicamente donde existen.

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

Definir transiciones

Una máquina de estados se mueve entre estados mediante transiciones. Una función de transición recibe el estado actual y un evento, y devuelve el estado siguiente.

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

Modelar también los eventos

Los propios eventos también pueden ser una unión discriminada. Cada tipo de evento activa una transición específica.

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

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

Una función de transición completa

Combine las uniones de estados y eventos en un único reducer. Usar un switch sobre ambos mantiene cada transición explícita y con seguridad de tipos.

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

Los estados ilegales no se pueden representar

No puede tener data y un error message al mismo tiempo. El diseño de la unión prohíbe por construcción los estados contradictorios.

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

Protegerse frente a transiciones no válidas

Puede ignorar los eventos que no se aplican al estado actual y mantener la máquina en un estado coherente en lugar de provocar un fallo.

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

Añadir exhaustividad

Combine el reducer con assertNever para que añadir un estado o evento nuevo señale todos los lugares que debe actualizar.

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

Estados iniciales y finales

Designe un estado inicial claro (a menudo idle) y estados terminales (success o error). Esto documenta el ciclo de vida de la máquina.

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

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

Una máquina de estados pequeña y completa

Este es el ciclo completo: comienza en idle, pasa a loading al realizar la petición y llega a success cuando se resuelve. Los tipos mantienen cada paso bajo control.

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

Comprobación rápida: máquinas de estados

Compruebe su comprensión del modelado de máquinas de estados.

Resumen: modelar máquinas de estados

Ha modelado idle/loading/success/error como una unión discriminada, ha escrito transiciones con seguridad de tipos sobre uniones de estados y eventos, y ha utilizado la exhaustividad para mantener la máquina correcta a medida que crece.

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

Preguntas frecuentes

¿La lección «Modelado de máquinas de estados» es gratis?

Sí — el texto completo de «Modelado de máquinas de estados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Modelado de máquinas de estados»?

Represente estados finitos mediante uniones discriminadas. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Modelado de máquinas de estados»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a TypeScript Academy