TypeScript de Cero a Experto / TS en el mundo real
Clases y decoradores: el TS orientado a objetos
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:
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-onlyprivate 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:
// ❌ 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:
// 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.