Herencia

Clase 9 de 25 • Curso de TypeScript: Programación Orientada a Objetos y Asincronismo

Clase anteriorSiguiente clase

Migdualy Alejandra Gonzalez Martinez

student•

Para que otras clases herenden los atributos de un constructor principal esta debe la palabra reservada extends

Henry J. Perez

student•

Exactamente, y me gustaría agregar:
Que, a diferencia de las interfaces, solo puede extender una clase a la vez.

Ronaldo Delgado

student•

genial

Axel Enrique Galeed Gutierrez

student•

Les comparto mis apuntes. :D

¿Qué es?

Como su palabra lo dice, las propiedades y métodos de una clase son heredadas por otra para evitar la redundancia de código en nuestro proyector.

Sintaxis

class FatherClass {
	constructor (properties) {
		statemenst
	}

	MethodsFather () { ... }
}

class ChildClass extends FatherClass {
		constructor (properties) {
			super(properties)
			statemenst
		}

		MethodsChild () { ... }
}

Super

Es una palabra reservada para llamar las propiedades y métodos de la clase padre.

// llama al método constructor del objeto padre.
super([arguments]);

// llama cualquier otro método del objeto padre.
super.functionOnParent([arguments]);

Al usar esta palabra reservada en el constructor de la clase hija, estamos invocando al constructor de la clase padre.

Más información.

Código de la clase

export class Animal {
    constructor(public name: string) {}

    move() {
        console.log("Moving along!");
    }

    gretting() {
        return `Hello, I'm ${this.name}`;
    }
}

export class Dog extends Animal {
    constructor(public owener: string, name: string) {
        super(name);
    }

    woof(times: number): void {
        for (let i = 0; i < times; i++) {
            console.log("Woof!");
        }
    }
}

const fifi = new Animal("Fifi");
fifi.move();
console.log(fifi.gretting());

const cheis = new Dog("Cheis", "Galeed");
cheis.move();
console.log(cheis.gretting());
cheis.woof(5);

Guillermo Castaño Vèlez

student•

Es importante tener los conceptos fuertes para seguir adelante, pero espero que no hagan lo mismo que con el de POO de Js que explican el concepto pero lo dejan ahí ... nada práctico ... cero uso real ... la realidad es que en el día a día uno no trabaja con animales o con frutas. De todas maneras no es por hacer hat el comentario, muy contento con el contenido hasta el momento, pero espero otro a futuro que le de produndidad.

carlos orozco

student•

creo que la mejor forma de aprender codigo con clases complejas que se usan en el mundo real es estudiar paquetes que trabajen con lo que deseas.

marcos martilotta

student•

Mi gato, sentado al lado de la computadora aprendiendo POO escuchando como el profe dice que solo duerme (?

Carlos Rodríguez

student•

Uno de los pilares de la POO es la herencia y va de la mano de otro pilar que no es más que el análisis que hizo el profesor sobre la clase genérica y las más específica, eso se llama abstracción!

Miguel Angel Reyes Moreno

student•

Creo que sería bueno empezar a ser más explícitos con los atributos de las clases. usar 'animalName' y 'dogName' en vez de solamente 'name', para evitar confusiones.

Brahyan Antonio Martinez Madera

student•

Obvio lo que dices y muy buena practica, solo que desde mi punto de vista el profesor lo hizo de esa manera para hacernos entender que no dejemos publicos los parametros redudantes en la clase heredada

Josue Cerron Tuesta

student•

Aquí una explicación sencilla de la llamada al super cuando se hereda.

Victor Zubiaga

student•

Con la palabra reservada Super, se puede acceder a las propiedades de la clase padre?

Diego Raciel Ortega Hernandez

student•

Nelson Alayón

student•

Los gatos ademas rasguñan y piden comida... y son bonitos.

Abraham Gonzalez

student•

Reglas importantes para super

super debe ser la primera llamada dentro del constructor de la subclase
super no se puede usar fuera de un constructor.

Kevin Daniel Guzman Delgadillo

student•

Hice mi propio ejemplo con Animales y su movimiento:

export class MOVIMENT {
  public readonly EQUIVALENCES: string[] = ['up', 'down', 'left', 'right']

  public static get up(): MOVIMENT {
    return new MOVIMENT(0);
  }

  public static get down(): MOVIMENT {
    return new MOVIMENT(1);
  }

  public static get left(): MOVIMENT {
    return new MOVIMENT(2);
  }

  public static get right(): MOVIMENT {
    return new MOVIMENT(3);
  }

  public get value(): string {
    return this.EQUIVALENCES[this._value] ?? null;
  }

  constructor(protected _value: number) {}
}

export class Animal {
  constructor(private name: string, private moviments: MOVIMENT[] = []) {}

  public move(way: MOVIMENT): void {
    this.moviments.push(way);
  }

  public printMoviments(): void {
    const str = this.moviments.map((moviment) => moviment.value).join(' -> ');
    console.log(`The ${this.name} moved: ${str}`);
  }
}

export class TERRESTRIAL extends MOVIMENT {
  public readonly EQUIVALENCES: string[] = ['up', 'down', 'left', 'right', 'jump']

  public get value(): string {
    return this.EQUIVALENCES[this._value] ?? null;
  }

  public static get jump(): TERRESTRIAL {
    return new TERRESTRIAL(4);
  }
}

export class Dog extends Animal {
  public run(way: MOVIMENT, count: number): void {
    Array(count).fill(0).forEach(() => this.move(way));
  }
}

const anyAnimal = new Animal('Any');
anyAnimal.move(MOVIMENT.up);
anyAnimal.move(MOVIMENT.left);
anyAnimal.move(MOVIMENT.down);
anyAnimal.move(MOVIMENT.right);

anyAnimal.printMoviments();

const dog = new Dog('Dog');
dog.move(TERRESTRIAL.up);
dog.move(TERRESTRIAL.left);
dog.move(TERRESTRIAL.down);
dog.move(TERRESTRIAL.right);
dog.move(TERRESTRIAL.jump);
dog.run(TERRESTRIAL.up, 2);

dog.printMoviments();

Jose Gregorio Sarabia Lugo

student•

para que se les facilite mas de ver sus resultados de console.log() y no lo estén ejecutando cada vez que quieran ver en consola podrían descargar se la extensión de QUOKKA.JS Y QUOKKA STATUSBAR BUTTONS

Johan Sebastian

student•

export class Animal {

  constructor(public name: string) {
  }

  move() {
    console.log('Me estoy moviendo');
  }

  greeting() {
    return `Woof, mi nombre es ${this.name}`;
  }
}

export class Dog extends Animal {
  constructor(
    name: string,
    public owner: string
  ) {
    super(name);
  }

  breed(name: string) {
    return `Soy de raza ${name}`
  }

  woof(barking: number): void {
    for (let index = 0; index < barking; index++) {
          console.log(`Woof! amo ${this.owner}`);
    }
  }
}

const species = new Animal('Zeus');
species.move();
console.log(species.greeting());

const perro = new Dog('Rayo', 'Camilo');
perro.move();
console.log(perro.greeting());
perro.woof(4);

Jesús Patricio Pereira Matus

student•

en mi opinion el constructor simplificado le quita legibilidad al codigo, osea esta bien reduce lineas pero aumenta la complejidad a alguien que no acostumbra a ver eso, yo lo hice de la siguiente forma

class Animal {
    name: string
    tipo: string
    
    constructor(name: string, tipo: string) {
        this.name = name
        this.tipo = tipo
    }

    hacerSonido() {
        console.log("El animal hace un sonido")
    }
}

class Perro extends Animal {

    age: number

    constructor(name: string, tipo: string, age: number) {
        super(name, tipo)
        this.age = age
    }

    hacerSonido(): void {
        super.hacerSonido()
        console.log("El perro hace woof")
    }
}

Camilo Cosentino

student•

que significa que permite abstraer comportamientos?

Rosenberg Vasquez Rojas

student•

/**
 * Base class representing an animal
 */
export abstract class Animal {
  protected readonly name: string;

  constructor(name: string) {
    this.name = name;
  }

  /**
   * Makes the animal move
   * @returns string describing the movement
   */
  public move(): string {
    return 'Moving along!';
  }

  /**
   * Returns a greeting from the animal
   * @returns string containing the greeting
   */
  public greeting(): string {
    return `Hello, I'm ${this.name}`;
  }
}

/**
 * Class representing a Dog, extends Animal
 */
export class Dog extends Animal {
  private readonly breed?: string;

  constructor(name: string, breed?: string) {
    super(name);
    this.breed = breed;
  }

  /**
   * Makes the dog bark a specified number of times
   * @param times - Number of times to bark
   * @returns string containing all barks
   */
  public woof(times: number): string {
    if (times < 0) {
      throw new Error('Times must be a positive number');
    }
    return 'Woof! '.repeat(times).trim();
  }

  /**
   * Makes the dog move in a dog-specific way
   * @returns string describing the dog's movement
   */
  public override move(): string {
    return `${this.name} is running on four legs!`;
  }
}

// Example usage
class Cat extends Animal {
  public override move(): string {
    return `${this.name} is walking gracefully!`;
  }
}

const fifi = new Cat('Fifi');
console.log(fifi.move());
console.log(fifi.greeting());

const cheis = new Dog('Cheis', 'Labrador');
console.log(cheis.move());
console.log(cheis.greeting());
console.log(cheis.woof(4));

Eminson Mendoza

student•

La herencia es un principio fundamental en la programación orientada a objetos (POO) que permite a una clase heredar propiedades y métodos de otra clase. Esto promueve la reutilización del código y la creación de jerarquías entre clases.

Ejemplo básico:

class Animal {
    hacerSonido() {
        console.log("Algun sonido");
    }
}

class Perro extends Animal {
    hacerSonido() {
        console.log("Guau");
    }
}

const miPerro = new Perro();
miPerro.hacerSonido(); // Salida: Guau

En este ejemplo, Perro hereda de Animal. Al llamar al método hacerSonido, el perro produce su propio sonido. La herencia permite extender y personalizar funcionalidades de las clases base.

Juan Diego Quintero Calderón

student•

El profesor menos hater de gatos jajajajaja

Christian Velázquez

student•

Los Patrones de Diseño, pueden potencializar aún más tu código e proyecto. Les comparto el sitio sobre Patrones de Diseño: https://refactoring.guru/es/design-patterns

Ronaldo Delgado

student•

la herencia es muy útil