CodeForge

TypeScript de Cero a Experto / TS en el mundo real

Clases y decoradores: el TS orientado a objetos

Teoría22 min20 XP

Las clases que conociste en JavaScript ganan superpoderes en TypeScript: modificadores de acceso que el compilador vigila, propiedades de parámetro que ahorran código, y clases abstractas. Y una probada de los DECORADORES —la sintaxis @algo que añade comportamiento a clases y métodos, el corazón de frameworks como Angular y NestJS. El TypeScript orientado a objetos que domina el backend.

Las clases, con contratos que se cumplen

Modificadores de acceso

TypeScript añade public, private, protected y readonly —vigilados por el compilador:

modificadores.ts
class CuentaBancaria {
public titular: string;       // accesible desde fuera (es el default)
private saldo: number;        // solo DENTRO de esta clase
protected pin: string;        // esta clase Y sus subclases
readonly numero: string;      // se fija al crear, no se reasigna

constructor(titular: string, saldoInicial: number, pin: string, numero: string) {
  this.titular = titular;
  this.saldo = saldoInicial;
  this.pin = pin;
  this.numero = numero;
}

depositar(monto: number): void {
  this.saldo += monto;        // ✓ dentro de la clase, acceso libre
}
consultarSaldo(): number {
  return this.saldo;          // acceso controlado por un método público
}
}

const cuenta = new CuentaBancaria("Sara", 1000, "1234", "001-002");
cuenta.depositar(500);          // ✓ método público
// cuenta.saldo;                // ❌ 'saldo' is private
// cuenta.numero = "otro";      // ❌ 'numero' is read-only

private saldo significa que NADIE fuera de la clase puede leerlo ni escribirlo —TS lo marca en compilación. protected lo abre a las subclases; readonly impide reasignar tras crear. (Nota honesta: private de TS es una regla de COMPILACIÓN que se borra; para privacidad real en runtime, existen los campos # de JavaScript, que TS también soporta. En la práctica, private cubre casi todo.) Estos modificadores comunican y hacen cumplir la intención de tu diseño.

Propiedades de parámetro: menos código

Un atajo elegante de TypeScript: si pones un modificador en un parámetro del constructor, TS crea y asigna la propiedad automáticamente —adiós al this.x = x repetido:

parameter-properties.ts
// ❌ la forma verbosa (declarar + asignar cada campo):
class GastoVerboso {
private id: number;
nombre: string;
constructor(id: number, nombre: string) {
  this.id = id;
  this.nombre = nombre;
}
}

// ✅ propiedades de parámetro: el modificador en el constructor lo hace todo:
class Gasto {
constructor(
  private id: number,       // crea y asigna this.id automáticamente
  public nombre: string,    // crea y asigna this.nombre
  public readonly valor: number,
) {}
// ¡sin cuerpo! TS declaró y asignó las tres propiedades.

describir(): string {
  return "#" + this.id + " " + this.nombre + ": $" + this.valor;
}
}

const g = new Gasto(1, "Café", 4000);
console.log(g.describir());

Poner private/public/readonly en un parámetro del constructor le dice a TS "crea una propiedad con este nombre y asígnale este parámetro". Las tres líneas de this.x = x desaparecen. Es azúcar sintáctico muy usado —lo verás por todas partes en NestJS, donde los servicios se inyectan así: constructor(private servicio: MiServicio) {}.

Decoradores: comportamiento con @

Los decoradores son funciones especiales que MODIFICAN o AÑADEN comportamiento a una clase, método o propiedad, con la sintaxis @nombre encima:

decoradores.ts
// un decorador de método que registra cada llamada:
function log(original: any, contexto: any) {
return function (...args: any[]) {
  console.log("Llamando " + contexto.name + " con:", args);
  const resultado = original.apply(this, args);
  console.log("Devolvió:", resultado);
  return resultado;
};
}

class Calculadora {
@log
sumar(a: number, b: number): number {
  return a + b;
}
}

new Calculadora().sumar(2, 3);
// consola: "Llamando sumar con: [2, 3]" / "Devolvió: 5"

@log encima de sumar ENVUELVE el método sin tocar su código: cada llamada ahora se registra. ¿Te suena? Es el patrón DECORADOR del módulo 12 de JavaScript (conCronometro, memoizar), ahora con sintaxis dedicada. Un decorador recibe lo que decora y devuelve una versión mejorada.

Escribes class Servicio { constructor(private repo: Repositorio) {} }. ¿Qué hace el 'private' en el parámetro del constructor?

Mini-reto

Aplica el OOP tipado: 1) crea class Producto con propiedades de parámetro en el constructor —private id, public nombre, public readonly precio—; 2) agrega un getter etiqueta que devuelva "nombre ($precio)"; 3) intenta acceder a id desde fuera y confirma que TS lo bloquea, y reasignar precio (también bloqueado). Sientes cómo los modificadores hacen cumplir tu diseño.

Qué sigue

Módulo 8 cerrado: TypeScript en el asfalto —DOM, fetch, Zod, declaration files y clases—. Cierras con un reto que junta lo esencial del mundo real: una capa de datos tipada que carga, valida y procesa datos externos con seguridad de punta a punta. El TypeScript que escribirás en el trabajo.