Clases: creando una clase

Nos tiramos a saco a la creación de clases en TypeScript mostrando un ejemplo sencillo en el que declaramos algunas propiedades y algunos métodos. También se aprovecha para introducir el concepto de constructor.

Crear clases en TypeScript nos permite estructurar nuestro código de manera clara y orientada a objetos, aprovechando las ventajas que este lenguaje ofrece sobre JavaScript. Para empezar, declaramos una clase usando la palabra clave class seguida del nombre que queramos darle, por ejemplo, Rectangulo. Dentro de esta clase definimos las propiedades que tendrá, como ancho y alto, ambas de tipo number. A diferencia de JavaScript, en TypeScript es necesario declarar explícitamente estas propiedades para que el sistema de tipos pueda ayudarnos con autocompletados y validaciones.

Cuando intentamos declarar estas propiedades sin inicializarlas, TypeScript nos mostrará un error porque espera que tengan un valor asignado. Para solucionar esto, utilizamos el constructor, una función especial que se ejecuta al crear una instancia de la clase con new. El constructor nos permite inicializar las propiedades con valores concretos que recibimos como parámetros. Por ejemplo, podemos definir el constructor así:

class Rectangulo {
  ancho: number;
  alto: number;

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

Aquí, this hace referencia a la instancia actual del objeto, por lo que this.ancho y this.alto son las propiedades que estamos inicializando con los valores que recibimos al crear el rectángulo.

Además de las propiedades, podemos definir métodos dentro de la clase para realizar operaciones relacionadas con ella. Por ejemplo, para calcular el área del rectángulo, creamos un método llamado area que devuelve el producto del ancho por el alto:

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

De forma similar, podemos definir un método para calcular el perímetro:

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

Al crear instancias de la clase, cada objeto tendrá sus propios valores para ancho y alto, pero compartirán los mismos métodos para calcular área y perímetro. Por ejemplo:

const r1 = new Rectangulo(10, 15);
const r2 = new Rectangulo(4, 3);

console.log(r1.area());      // 150
console.log(r2.perimetro()); // 14

Es importante destacar que el uso de new es obligatorio para crear una instancia de la clase, ya que diferencia la creación de un objeto de la simple llamada a una función.

Aunque la sintaxis de clases en TypeScript es muy similar a la de JavaScript, la principal diferencia radica en la declaración explícita de tipos y propiedades, lo que nos brinda mayor seguridad y herramientas durante el desarrollo. En JavaScript, las propiedades suelen definirse directamente dentro del constructor sin declararlas previamente, mientras que en TypeScript las declaramos antes para aprovechar el sistema de tipos.

Con esta base, podemos construir clases más complejas y aprovechar otras características propias de TypeScript para mejorar la programación orientada a objetos. Pero por ahora, esta estructura sencilla de clase con propiedades, constructor y métodos nos permite entender cómo crear y manejar clases desde cero en TypeScript.

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