TypeScript Academy · Lección

Builders inmutables

Devuelva nuevas instancias de Builder para una composición más segura.

Builders inmutables 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.

Mutabilidad frente a inmutabilidad

Hasta ahora, los builders modifican this y lo devuelven. En cambio, un builder inmutable devuelve una instancia de builder nueva en cada paso y nunca modifica la original. Esto hace que la composición sea más segura.

El problema de la mutación compartida

Si dos partes del código conservan el mismo builder mutable, una llamada a un setter afecta a ambas. Los builders inmutables evitan por completo esta sorpresa derivada de los alias.

const base = makeMutableBuilder().url("/x");
// If base is shared, later .method() calls mutate everyone's copy.

Devolver una instancia nueva

Un setter inmutable copia el estado actual, añade el campo nuevo y construye un builder nuevo. El original no se modifica.

class IB<S> {
  constructor(private readonly d: Record<string, unknown> = {}) {}
  with<K extends string, V>(k: K, v: V): IB<S & Record<K, V>> {
    return new IB<S & Record<K, V>>({ ...this.d, [k]: v });
  }
}

Uso compartido estructural mediante spread

El spread { ...this.d, [k]: v } copia las entradas existentes y sobrescribe una clave. Los valores que no cambian se comparten por referencia, por lo que las copias son económicas.

const a = new IB<{}>().with("url", "/x");
const c = a.with("method", "GET");
// a still only has url; c has url and method.

Los originales nunca cambian

Como cada paso produce un objeto nuevo, es seguro crear ramificaciones a partir de un builder anterior. Puede reutilizar una base parcialmente construida en varios lugares.

const base = new IB<{}>().with("url", "/api");
const get = base.with("method", "GET");
const post = base.with("method", "POST");
console.log("base untouched; get and post diverge");

Estado interno de solo lectura

Marcar los datos internos como readonly documenta la intención e impide escrituras accidentales en el propio objeto dentro de la clase. La única forma de avanzar es crear una instancia nueva.

class IB<S> {
  constructor(private readonly d: Readonly<Record<string, unknown>> = {}) {}
}

Construcción inmutable y tipada

El parámetro de estado se sigue transmitiendo, por lo que podemos condicionar build() exactamente como antes, ahora sobre una base inmutable.

interface Out { url: string; method: string }
class IB<S> {
  constructor(private readonly d: Record<string, unknown> = {}) {}
  with<K extends string, V>(k: K, v: V): IB<S & Record<K, V>> {
    return new IB<S & Record<K, V>>({ ...this.d, [k]: v });
  }
  build(this: IB<{ url: string; method: string }>): Out { return this.d as Out; }
}
const out = new IB<{}>().with("url", "/u").with("method", "GET").build();
console.log(out.url);

Composición más segura

Los builders inmutables se componen como valores: puede pasar uno a otras partes del código, derivar otros nuevos y no preocuparse de que una llamada posterior reescriba el estado compartido. Este es el mismo beneficio que los datos inmutables ofrecen en cualquier contexto.

Preajustes reutilizables

Puede guardar una vez un punto de partida habitual y crear muchas ramificaciones a partir de él. Cada ramificación es independiente gracias a los setters que copian al escribir.

const jsonBase = new IB<{}>().with("header", "application/json");
const usersReq = jsonBase.with("url", "/users");
const ordersReq = jsonBase.with("url", "/orders");
console.log("two independent requests from one base");

Consideraciones sobre el coste

Cada paso reserva un objeto nuevo. En la construcción habitual de configuraciones, esto es insignificante, y el uso compartido estructural mantiene las copias superficiales. Solo se notaría en bucles extremadamente frecuentes.

Resumen de mutable frente a inmutable

Los builders mutables son ligeramente más rápidos y sencillos; los inmutables son más seguros de compartir y de analizar. Prefiera los inmutables cuando los builders se pasen entre distintas partes del código o se reutilicen como preajustes.

Comprobación rápida

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

Resumen

Un builder inmutable devuelve una instancia nueva en cada paso mediante el uso compartido estructural de { ...this.d, [k]: v }, sin modificar nunca this. Los originales permanecen intactos, lo que permite una composición segura y preajustes reutilizables, con un coste de reserva reducido.

Preguntas frecuentes

¿La lección «Builders inmutables» es gratis?

Sí — el texto completo de «Builders inmutables» 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 «Builders inmutables»?

Devuelva nuevas instancias de Builder para una composición más segura. 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 «Builders inmutables»?

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