Clases: el blueprint para crear objetos
Las clases son plantillas para crear objetos con propiedades y comportamiento. Encapsulan datos y lógica en una unidad reutilizable.
¿Qué es una clase?
Una clase es un blueprint — un molde — para crear objetos. Define qué propiedades tendrán y qué pueden hacer:
// Sin clases: crear objetos manualmente
const perro1 = { nombre: "Rex", raza: "Labrador" };
const perro2 = { nombre: "Luna", raza: "Beagle" };
// Con clases: un molde reutilizable
class Perro {
// Las propiedades y métodos van aquí
}
const perro3 = new Perro();
console.log(perro3); // Perro {}// Sin clases: objetos manuales
const perro1 = { nombre: "Rex", raza: "Labrador" };
const perro2 = { nombre: "Luna", raza: "Beagle" };
// Con clases: un molde reutilizable
class Perro {
// Las propiedades y métodos van aquí
}
const perro3 = new Perro();
console.log(perro3); // Perro {}Perro {}En JavaScript, las clases son una forma más clara de escribir funciones constructoras y prototipos. Bajo el capó, el mecanismo de herencia por prototipo sigue siendo el mismo.
Constructor: inicializar propiedades
El método constructor se ejecuta automáticamente cuando usas new. Es donde inicializas las propiedades del objeto:
class Persona {
constructor(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
}
const ana = new Persona("Ana", 28);
const carlos = new Persona("Carlos", 35);
console.log(ana.nombre); // "Ana"
console.log(carlos.edad); // 35class Persona {
nombre: string;
edad: number;
constructor(nombre: string, edad: number) {
this.nombre = nombre;
this.edad = edad;
}
}
const ana = new Persona("Ana", 28);
const carlos = new Persona("Carlos", 35);
console.log(ana.nombre); // "Ana"
console.log(carlos.edad); // 35Ana
35TypeScript permite declarar y asignar propiedades directamente en los parámetros del constructor usando modificadores de acceso: constructor(public nombre: string, public edad: number) {}. Esto elimina la necesidad de declarar las propiedades por separado.
Métodos: funciones dentro de la clase
Los métodos definen el comportamiento de los objetos. Se escriben directamente dentro del cuerpo de la clase, sin la palabra function:
class Persona {
constructor(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
saludar() {
return `Hola, soy ${this.nombre}`;
}
esMayorDeEdad() {
return this.edad >= 18;
}
cumpleanos() {
this.edad++;
return `¡Feliz cumpleaños ${this.nombre}! Ahora tienes ${this.edad} años.`;
}
}
const ana = new Persona("Ana", 28);
console.log(ana.saludar()); // "Hola, soy Ana"
console.log(ana.esMayorDeEdad()); // true
console.log(ana.cumpleanos()); // "¡Feliz cumpleaños Ana! Ahora tienes 29 años."class Persona {
nombre: string;
edad: number;
constructor(nombre: string, edad: number) {
this.nombre = nombre;
this.edad = edad;
}
saludar(): string {
return `Hola, soy ${this.nombre}`;
}
esMayorDeEdad(): boolean {
return this.edad >= 18;
}
cumpleanos(): string {
this.edad++;
return `¡Feliz cumpleaños ${this.nombre}! Ahora tienes ${this.edad} años.`;
}
}
const ana = new Persona("Ana", 28);
console.log(ana.saludar()); // "Hola, soy Ana"
console.log(ana.esMayorDeEdad()); // true
console.log(ana.cumpleanos()); // "¡Feliz cumpleaños Ana! Ahora tienes 29 años."Hola, soy Ana
true
¡Feliz cumpleaños Ana! Ahora tienes 29 años.new: crear instancias
La palabra new crea una nueva instancia de la clase — un objeto independiente con sus propias propiedades:
class Producto {
constructor(nombre, precio) {
this.nombre = nombre;
this.precio = precio;
this.descuento = 0;
}
aplicarDescuento(porcentaje) {
this.descuento = porcentaje;
return this; // retornar this permite encadenar métodos
}
precioFinal() {
return this.precio * (1 - this.descuento / 100);
}
}
const laptop = new Producto("Laptop", 1200);
const mouse = new Producto("Mouse", 25);
laptop.aplicarDescuento(10);
console.log(laptop.precioFinal()); // 1080
console.log(mouse.precioFinal()); // 25 (sin descuento)class Producto {
nombre: string;
precio: number;
descuento: number;
constructor(nombre: string, precio: number) {
this.nombre = nombre;
this.precio = precio;
this.descuento = 0;
}
aplicarDescuento(porcentaje: number): this {
this.descuento = porcentaje;
return this;
}
precioFinal(): number {
return this.precio * (1 - this.descuento / 100);
}
}
const laptop = new Producto("Laptop", 1200);
const mouse = new Producto("Mouse", 25);
laptop.aplicarDescuento(10);
console.log(laptop.precioFinal()); // 1080
console.log(mouse.precioFinal()); // 251080
25Cada instancia tiene su propio espacio en memoria. Modificar laptop no afecta a mouse.
Propiedades en TypeScript
En TypeScript, las propiedades deben declararse antes del constructor con sus tipos. Esto da autocompletado y verificación en tiempo de compilación:
// Forma explícita (declarar + asignar en constructor)
class Rectangulo {
ancho: number;
alto: number;
constructor(ancho: number, alto: number) {
this.ancho = ancho;
this.alto = alto;
}
}
// Forma corta (shorthand con modificadores de acceso)
class RectanguloCorto {
constructor(
public ancho: number,
public alto: number
) {}
}
// Ambas son equivalentes
const r1 = new Rectangulo(10, 5);
const r2 = new RectanguloCorto(10, 5);
console.log(r1.ancho); // 10
console.log(r2.alto); // 5
// TypeScript detecta errores de tipo en compilación
// const r3 = new Rectangulo("diez", 5); // ❌ Error: string no es number10
5Si declaras una propiedad en TypeScript pero no la inicializas en el constructor, obtendrás un error: Property 'x' has no initializer. Usa ! para indicar que la inicializarás manualmente, o dale un valor por defecto.