Clases: introducción a las clases

Regreso a tu pantalla para presentar las clases y la orientación a objetos en TypeScript y JavaScript. Esto no es un curso que pretenda tratar orientación a objetos y patrones de diseño orientados a objetos, ni mucho menos, pero como no todo el mundo puede haber trabajado con clases en ECMAScript, he considerado conveniente hacer esta introducción para presentaros el funcionamiento de las clases en TypeScript.

Las clases son un concepto fundamental en la programación orientada a objetos, y entenderlas nos ayuda a organizar mejor nuestro código, especialmente cuando trabajamos con TypeScript y JavaScript. Podemos pensar en una clase como una plantilla o molde que agrupa datos y operaciones relacionadas, facilitando la gestión y manipulación de esos datos de forma coherente.

Imaginemos una clase llamada Rectangulo. Esta clase tendría datos como ancho y alto, que representan las dimensiones del rectángulo. Además, incluiría operaciones o métodos que trabajan con esos datos, como calcular el área o el perímetro. Por ejemplo, podríamos definir un método area que devuelva el resultado de multiplicar el ancho por el alto, o un método perimetro que calcule la suma de todos los lados. Incluso podríamos tener métodos más complejos, como uno que divida el rectángulo en dos mitades y devuelva esas partes como nuevas instancias de Rectangulo.

En código, esta idea se podría representar así:

class Rectangulo {
  ancho: number;
  alto: number;

  constructor(ancho: number, alto: number) {
    this.ancho = ancho;
    this.alto = alto;
  }

  area(): number {
    return this.ancho * this.alto;
  }

  perimetro(): number {
    return 2 * (this.ancho + this.alto);
  }

  dividirMitad(): Rectangulo[] {
    const mitadAncho = this.ancho / 2;
    return [
      new Rectangulo(mitadAncho, this.alto),
      new Rectangulo(mitadAncho, this.alto)
    ];
  }
}

Antes de que existieran las clases en JavaScript, se usaban funciones y prototipos para simular este comportamiento. Por ejemplo, se podía tener una estructura con datos y funciones independientes que operaban sobre esos datos, pero sin una unión clara entre ellos. Las clases nos permiten agrupar todo en una sola estructura, haciendo que los datos y las operaciones estén relacionados y sean más fáciles de manejar.

Además, las clases nos abren la puerta a la herencia, un mecanismo que nos permite crear jerarquías y especializaciones. Por ejemplo, podríamos tener una clase base llamada Vehiculo con datos comunes como fabricante o añoFabricacion. A partir de esta clase, podríamos derivar otras más específicas como VehiculoAcuatico, VehiculoAereo y VehiculoTerrestre. Cada una de estas subclases tendría sus propios métodos particulares, como nadar para vehículos acuáticos, volar para vehículos aéreos o rodar para vehículos terrestres.

Esta jerarquía nos permite modelar comportamientos específicos sin mezclar responsabilidades. Por ejemplo, no tendría sentido que un vehículo terrestre tuviera un método volar. La herencia también nos permite sobrescribir métodos para que cada subclase tenga su propia implementación. Por ejemplo, el método volar podría comportarse de manera diferente en un Helicoptero que en un Avion.

Podemos visualizar esta jerarquía con un diagrama MermaidJS:

classDiagram
    class Vehiculo {
        +fabricante: string
        +añoFabricacion: number
        +mover()
    }
    class VehiculoAcuatico {
        +nadar()
    }
    class VehiculoAereo {
        +volar()
    }
    class VehiculoTerrestre {
        +rodar()
    }
    Vehiculo <|-- VehiculoAcuatico
    Vehiculo <|-- VehiculoAereo
    Vehiculo <|-- VehiculoTerrestre

En resumen, las clases nos permiten representar entidades del mundo real de forma estructurada, agrupando datos y comportamientos, y facilitando la creación de jerarquías mediante la herencia. JavaScript incorporó soporte para clases a partir de ECMAScript 6, lo que hace que trabajar con ellas sea más sencillo y claro. Para profundizar en estos conceptos, es recomendable consultar manuales y tutoriales sobre programación orientada a objetos, aunque hay que tener en cuenta que no todas las características de otros lenguajes, como interfaces o implementaciones estrictas, están presentes en JavaScript, aunque TypeScript ofrece algunas aproximaciones.

Lista de reproducción
  1. 1
    Temporada 1
    5 minutos
  2. 2
    ¿Qué es TypeScript?
    11 minutos
  3. 3
    Instalando TypeScript
    8 minutos
  4. 4
    Compilando un Hola Mundo sencillo
    7 minutos
  5. 5
    Hola Mundo pero con tipos
    10 minutos
  6. 6
    Tipos: tipos primitivos
    12 minutos
  7. 7
    Tipos: tipos especiales (any, null, ...)
    10 minutos
  8. 8
    Tipos: arrays y tuplas
    11 minutos
  9. 9
    Tipos: objetos
    7 minutos
  10. 10
    Funciones: lo básico
    9 minutos
  11. 11
    Funciones: tipando funciones
    9 minutos
  12. 12
    Clases: introducción a las clases
    9 minutos
  13. 13
    Clases: creando una clase
    10 minutos
  14. 14
    Clases: modificador private
    8 minutos
  15. 15
    Clases: modificador readonly
    3 minutos
  16. 16
    Clases: Atributos virtuales con getters y setters
    10 minutos
  17. 17
    Clases: herencia
    9 minutos
  18. 18
    Clases: modificadores abstract y protected
    8 minutos
  19. 19
    Tipos alias
    6 minutos
  20. 20
    Tipos literales
    5 minutos
  21. 21
    Uniones de tipos
    7 minutos
  22. 22
    Uniones discriminantes
    7 minutos
  23. 23
    Intersecciones de tipos
    5 minutos
  24. 24
    Interfaces: introducción
    7 minutos
  25. 25
    Interfaces: modificadores y funciones
    9 minutos
  26. 26
    Interfaces: usándolas con clases
    8 minutos
  27. 27
    Interfaces: herencia de interfaces
    8 minutos
  28. 28
    Interfaces: interfaces indizadas
    5 minutos
  29. 29
    Interfaces: funciones y tipos híbridos
    5 minutos
  30. 30
    ¿Qué diferencia hay entre interfaces y tipos? (2020)
    8 minutos
  31. 31
    Casteos con as
    6 minutos
  32. 32
    instanceof y las guardas
    9 minutos
  33. 33
    Tipos enumerados
    8 minutos
  34. 34
    Valores avanzados para enumerados
    7 minutos
  35. 35
    Enumerados con valores computados
    6 minutos
  36. 36
    Genéricos en tipos
    8 minutos
  37. 37
    Múltiples genéricos y buenas prácticas
    5 minutos
  38. 38
    Genéricos en funciones
    8 minutos
  39. 39
    Genéricos con restricciones
    6 minutos
  40. 40
    Tipos de utilidad
    3 minutos
  41. 41
    Exportando módulos
    9 minutos
  42. 42
    Importando módulos
    7 minutos
  43. 43
    Export default e import asterisco
    6 minutos
  44. 44
    tsconfig
    7 minutos
  45. 45
    Módulos desde NPM
    7 minutos
  46. 46
    Arroba types y los .d.ts
    8 minutos
  47. 47
    Ejemplo (1): creando una API REST simple en TypeScript
    11 minutos
  48. 48
    Ejemplo (2): montando un servidor Express
    8 minutos
  49. 49
    Ejemplo (3): haciendo las funciones de control de datos
    11 minutos
  50. 50
    Ejemplo (4): conectando todas las piezas
    7 minutos