Gustavo Hernán Dohara

Herencia de clases en Typescript

Una de las mejoras que incorporó Typescript, además del manejo de tipos, es la incorporación de clases y herencia, de la forma clásica. A diferencia de Javascript, cuya herencia se basa en prototipos, se dice que la herencia en Typescript es de la forma clasica, pero… ¿qué significa eso exactamente?

Herencia

La herencia es una forma de compartir atributos y métodos de forma jerárquica entre clases.

diagrama de herencia

Herencia en Javascript

Ahora bien, la herencia en Javascript se basa en prototipos, en donde un objeto tiene una referencia a un prototipo (que no es más que otro objeto).

Prototipo en los objetos de javascript

A su vez, un prototipo puede tener un prototipo, de esta forma se va generando una cadena de prototipos. En esta cadena de objetos, si un atributo o método no está en un objeto, se busca en el siguiente de la cadena (en su protototipo), hasta encontrarlo.

Herencia en Typescript

La herencia en Typescript es clásica ya que se basa en un sistema jerárquico, en lugar de basarse en una cadena de objetos anidados como es el caso de Javascript.

Diagrama de herencia

Este tipo de herencia es más compleja que la de _Javascript, i_ncorpora nuevos conceptos y mecanismos de herencia que hacen más potente pero a su vez más complejo al lenguaje. Conceptos tales como interfaces, atributos públicos, atributos privados, método públicos, métodos privados, constructores, y otros conceptos que iremos viendo.

Como heredar una clase

La forma de heredar es bastante simple. Si tenemos la clase Persona:

class Persona {
    hablar(mensaje) {
      console.log(mensaje);
    }
}

Y tenemos la clase PersonaEducada que hereda de Persona, la forma de hacer es la siguiente:

class PersonaEducada extends Persona {
}

Si ahora creamos un objeto usando la clase PersonaEducada:

let persona1 = new PersonaEducada();

Podemos usar los métodos definidos en la clase padre “Persona”

persona1.hablar('Hola');

Y… ¿la clase hija puede usar los métodos del padre ?

¡Por supuesto! Esa es otra de las ventajas de la herencia, si la clase PersonaEducada quisiera usar el método hablar(), lo haría de la siguiente manera:

class PersonaEducada extends Persona {
    saludar() {
      this.hablar('Buen Dia señor')
    }
}
let persona1 = new PersonaEducada();
persona1.saludar();

06 herencia entre Persona y PersonaHeducada

¿Cuáles son las ventajas de heredar?

– Evitar repetir código y favorecer la reutilización del mismo

Cuando tenemos una jerárquico de clases, es común que en la clase padre estén los métodos comunes a todas ellas, y en cada clase “hija” estén las diferencias particulares de cada clase.

03 clases padre e hija hablando sobre repetir codigo

– Facilitar el mantenimiento

Implementar un sistema jerárquico para la creación de clases, hace que el código de cada una de nuestras clases sea mucho más pequeño y más fácil de mantener. Hay una gran diferencia entre crear una clase gigante con miles de líneas, y un sistema compuesto por un conjunto de clases relacionadas de forma jerárquica, donde cada clase tiene unas pocas líneas.

04 clases gigante vs diagrama de clases

– Facilitar la exención (herencia)

Al haber un conjunto jerárquico de clases, es mucho más simple crear clases a partir de otras ya existentes, que empezar de cero una nueva clase. Esto se logra si tenemos un sistema jerárquico bien diferenciado con una separación correcta de responsabilidades.

¿Y las desventajas?

– Aumenta la complejidad

Podemos correr el riesgo de crear un sistema jerárquico demasiado complejo, demasiadas clases y combinaciones.

grafico complejo de clases

Lo mejor es siempre intentar mantener un equilibrio entre la reutilización de código y su complejidad .

Un ejemplo práctico

Acá te dejo el código completo de lo que estuvimos hablando:

class Persona {
    hablar(mensaje) {
      console.log(mensaje);
    }
}
class PersonaEducada extends Persona {
    saludar() {
      this.hablar('Buen Dia señor')
    }
}
let persona1 = new PersonaEducada();
persona1.saludar();

Recordá que la mejor forma de aprender un lenguaje de programación, es programando, así que te invito a usar este código, a jugar y cambiar cosas. Rompé todo, empezá de nuevo, cambiá nombres. Jugá y divertíte!

Conclusiones

El mecanismo de herencia es muy potente y está pensado de la forma clásica, a diferencia de la herencia en Javascript. Dominar los conceptos de herencia sirve para que tu código sea más prolijo, más limpio, mas utilizable, y a la larga te ahorres dolores de cabeza buscando errores y corrigiéndolos en un mar de código. En lugar de eso, sólo tendrás una pequeña clase que corregir.