DocumentX Logo
DocumentX.
Ctrl+K
TypeScript/Conceptos

Herencia

Mecanismo mediante el cual una clase hija adquiere las propiedades y métodos de una clase padre usando extends y super.

Herencia

La palabra clave extends es el mecanismo que activa la herencia en la Programación Orientada a Objetos. Significa que una clase tomará todo lo que tiene la otra clase y se extenderá a partir de ahí.

La clase hija hereda todo lo que tiene la clase padre (sus propiedades y métodos), pero además puede agregar características y comportamientos propios.

Sintaxis Básica

typescriptclass ClasePadre {
  // Propiedades y métodos generales
}

// 'extends' conecta a la hija con el padre
class ClaseHija extends ClasePadre {
  // Hereda todo lo de ClasePadre + lo que agregues aquí
}

Uso de extends

1. Sin constructor propio en la clase hija

Si la clase hija no necesita propiedades nuevas en su propio constructor, hereda directamente el constructor y los métodos del padre.

typescript// 1. CLASE PADRE
class Animal {
  constructor(public nombre: string) {}

  comer(): void {
    console.log(`${this.nombre} está comiendo.`);
  }
}

// 2. CLASE HIJA (Usa extends)
class Perro extends Animal {
  ladrar(): void {
    console.log("¡Guau! ¡Guau!");
  }
}

// --- USO DE EXTENDS ---
const miPerro = new Perro("Firulais");

// Usa el constructor y el método heredados de Animal:
console.log(miPerro.nombre); // "Firulais"
miPerro.comer();             // "Firulais está comiendo."

// Usa el método propio de Perro:
miPerro.ladrar();            // "¡Guau! ¡Guau!"

2. Agregando nuevas propiedades en la clase hija

Si la clase hija necesita sus propias propiedades, declaras su constructor y usas super() para pasarle al padre los datos que requiere.

typescript// 1. CLASE PADRE
class Vehiculo {
  constructor(public marca: string) {}

  arrancar(): void {
    console.log(`El vehículo ${this.marca} arrancó.`);
  }
}

// 2. CLASE HIJA
class Auto extends Vehiculo {
  // Agregamos la propiedad propia 'puertas'
  constructor(marca: string, public puertas: number) {
    super(marca); // Le enviamos 'marca' al constructor de Vehiculo
  }

  abrirPuertas(): void {
    console.log(`Abriendo las ${this.puertas} puertas del${this.marca}.`);
  }
}

const miAuto = new Auto("Toyota", 4);

miAuto.arrancar();      // "El vehículo Toyota arrancó." (Heredado)
miAuto.abrirPuertas();  // "Abriendo las 4 puertas del Toyota." (Propio)

Uso de super

La palabra clave super sirve para comunicarte con la clase padre desde la clase hija. Tiene dos usos principales:

  • super(...) dentro del constructor: Llama al constructor del padre.
  • super.metodo() dentro de un método: Llama a un método del padre para reutilizar su código.

1. super(...) en el Constructor

Cuando la clase hija declara su propio constructor, TypeScript exige llamar a super(...) para enviarle al padre los parámetros que necesita para inicializarse.

typescript// 1. CLASE PADRE
class Persona {
  constructor(public nombre: string, public edad: number) {}
}

// 2. CLASE HIJA
class Empleado extends Persona {
  // Recibimos nombre, edad Y la propiedad nueva 'salario'
  constructor(nombre: string, edad: number, public salario: number) {
    // ⚠️ OBLIGATORIO: Llama al constructor de Persona
    super(nombre, edad); 
  }
}

const emp = new Empleado("Ana", 28, 3000);
console.log(emp.nombre);  // "Ana" (Inicializado por el padre gracias a super)
console.log(emp.salario); // 3000 (Inicializado por el hijo)

Regla de oro: Debes ejecutar super() antes de intentar usar this. Si intentas acceder a this antes de llamar a super(), TypeScript dará un error de compilación.

2. super.metodo() para Extender Funcionalidad

Usa super.nombreDelMetodo() para ejecutar la lógica base del padre y agregar posteriormente el código específico de la clase hija.

typescript// 1. CLASE PADRE
class Notificacion {
  enviar(): void {
    console.log("Conectando con el servidor de notificaciones...");
  }
}

// 2. CLASE HIJA
class NotificacionEmail extends Notificacion {
  override enviar(): void {
    // 1. Ejecuta primero el método del padre
    super.enviar(); 

    // 2. Agrega la lógica específica del Email
    console.log("Enviando correo electrónico...");
  }
}

const email = new NotificacionEmail();
email.enviar();

// Imprime:
// "Conectando con el servidor de notificaciones..."  <-- Lógica del padre (super.enviar())
// "Enviando correo electrónico..."                   <-- Lógica del hijo