TypeScript Academy · Lección

Interfaces fluidas con tipos

Encadene métodos mientras realiza el seguimiento del estado acumulado en los tipos.

Interfaces fluidas con tipos es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 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.

Seguimiento de lo configurado

Un builder sencillo permite llamar a build() en cualquier momento, incluso si faltan campos obligatorios. Podemos hacerlo mejor si hacemos un seguimiento del estado acumulado en el sistema de tipos mediante un parámetro de tipo genérico.

Un parámetro de tipo para el estado

Proporcionamos al builder un S genérico que registra qué claves se han proporcionado hasta el momento. Cada vez que se ejecuta un método, ampliamos S para incluir una clave nueva.

class Builder<S> {
  // S is a record of keys set so far, e.g. {} or { url: string }
  private data: Record<string, unknown> = {};
}

Cada método añade una clave

Un setter devuelve un builder tipado nuevo cuyo S incluye la clave que se acaba de añadir. En tiempo de ejecución se almacena el valor; el tipo se amplía en consecuencia.

  set<K extends string, V>(key: K, value: V): Builder<S & Record<K, V>> {
    this.data[key] = value;
    return this as unknown as Builder<S & Record<K, V>>;
  }

El truco de la intersección

La expresión S & Record<K, V> intersecta el estado anterior con la clave nueva. Después de dos llamadas, el tipo conoce con precisión ambas claves.

type Empty = {};
type AfterUrl = Empty & Record<"url", string>;
type AfterBoth = AfterUrl & Record<"method", string>;
// AfterBoth = { url: string; method: string }

Un builder fluido concreto

Aquí, un builder de solicitudes transmite su forma acumulada en cada llamada. El compilador siempre sabe exactamente qué campos existen.

class Req<S> {
  private d: Record<string, unknown> = {};
  url(u: string): Req<S & { url: string }> {
    this.d.url = u; return this as any;
  }
  method(m: string): Req<S & { method: string }> {
    this.d.method = m; return this as any;
  }
}

El tipo crece a medida que encadena llamadas

Cada llamada de la cadena produce un tipo de builder más específico. Al pasar el cursor sobre el resultado en un editor, se muestra el estado acumulado.

const partial = new Req<{}>().url("/x");
// type: Req<{ url: string }>
const full = partial.method("POST");
// type: Req<{ url: string; method: string }>

¿Por qué hacer un seguimiento del estado?

Una vez que el tipo contiene el conjunto de claves proporcionadas, podemos restringir posteriormente build() para que solo se compile cuando estén presentes las claves obligatorias. El parámetro de estado es la base de esa garantía.

Lectura de la forma acumulada

Puede extraer la forma acumulada para inspeccionarla. Esto confirma que el tipo del builder refleja exactamente lo que se ha configurado.

type StateOf<T> = T extends Req<infer S> ? S : never;
type S1 = StateOf<Req<{ url: string }>>; // { url: string }

El tiempo de ejecución sigue siendo sencillo

Toda la complejidad está en los tipos. En tiempo de ejecución, cada setter simplemente almacena un valor en un objeto. Las aserciones (as any) conectan el objeto en tiempo de ejecución con el tipo más completo en tiempo de compilación.

const r = new Req<{}>().url("/users").method("GET");
console.log("configured url and method");

El estado genérico como registro

Considere S como un registro de lo que se ha configurado. Los métodos añaden entradas; el paso de construcción puede leer posteriormente el registro para decidir si se permite la construcción.

Compromisos

El seguimiento del estado a nivel de tipos proporciona información precisa en el IDE y evita construcciones incompletas, a cambio de unas pocas aserciones y genéricos más avanzados. Merece la pena en API que utilizan muchas personas.

Comprobación rápida

Comprobación rápida de esta lección.

Resumen

Un builder tipado fluido contiene un parámetro de estado genérico S. Cada setter intersecta S con la clave nueva (S & Record<K, V>) y devuelve un builder más específico, lo que proporciona al compilador un registro preciso de los campos configurados.

Preguntas frecuentes

¿La lección «Interfaces fluidas con tipos» es gratis?

Sí — el texto completo de «Interfaces fluidas con tipos» 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 «Interfaces fluidas con tipos»?

Encadene métodos mientras realiza el seguimiento del estado acumulado en los tipos. 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 2 de 4.

¿Cuánto tiempo toma la lección «Interfaces fluidas con tipos»?

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