TypeScript nos ofrece una capa por encima de Javascript para escribir código con tipos, que resultará más robusto, ayudando a la hora de desarrollar nuestro software. En pasados artículos del Manual de TypeScript hemos visto ya cosas interesantes como el inicio de un proyecto o la declaración de tipos básicos.

En este artículo vamos a explicar cosas importantes en el desarrollo moderno, como es la incorporación de clases. Javascript ya nos ofrece trabajar con clases, pero typescript introduce mejoras significativas gracias a los tipos, los modificadores de acceso, los constructores tipados y mucho más. Vamos a verlos de una manera resumida, para dejar constancia de esas mejoras, con la mente puesta en que ya tienes conocimientos de programación orientada a objetos y conoces la sintaxis normal del lenguaje Javascript.

Sintaxis básica de una clase en TypeScript

Las clases en TypeScript son muy similares a lo que ya conoces de las clases en Javascript. La única diferencia de momento que queremos que veas es que en TypeScript podemos definir tipos en las propiedades y en las declaraciones de métodos.

class Persona {
  nombre: string;
  edad: number;

  constructor(nombre: string, edad: number) {
    this.nombre = nombre;
    this.edad = edad;
  }

  saludar(): void {
    console.log(`Hola, me llamo ${this.nombre} y tengo ${this.edad} años.`);
  }
}

const juan = new Persona("Juan", 30);
juan.saludar();

Además, otro tema interesante que difiere de Javascript y que podrás haber percibido es que las propiedades se declaran al principio de la clase.

Modificadores de acceso

Otra cosa que también introduce TypeScript son los modificadores de acceso a las propiedades y métodos. Esto permite controlar la visibilidad de los miembros de una clase, siendo que existen tres modificadores (los mismos que en otros lenguajes).

Actualmente Javascript ya ha comenzado a introducir vías de modificar la visibilidad de miembros, pero todavía es un poco rudimentario y no todos los navegadores lo soportan. Con TypeScript lo podemos usar desde siempre.

• public (por defecto, asignado si no pones nada): accesible desde cualquier parte.
• private: indica que es solo accesible desde dentro de la misma clase.
• protected: indica que es accesible desde la clase y sus subclases (clases derivadas).

Puedes ver un ejemplo en este código fuente:

class Animal {
  public nombre: string;
  private patas: number;
  protected tipo: string;

  constructor(nombre: string, patas: number, tipo: string) {
    this.nombre = nombre;
    this.patas = patas;
    this.tipo = tipo;
  }

  mostrarInfo(): void {
    console.log(`${this.nombre} tiene ${this.patas} patas.`);
  }
}

Herencia

Javascript también permite crear clases derivadas de otras clases. En TypeScript funciona de la misma manera. Si quieres que una clase herede de otra utilizando utilizas extends.

class Perro extends Animal {
  ladrar(): void {
    console.log("¡Guau!");
    console.log(`Soy un ${this.tipo}`); // OK: tipo es protected
  }
}

const miPerro = new Perro("Toby", 4, "mamífero");
miPerro.ladrar();

Propiedades readonly en TypeScript

Algo que solamente tenemos en TypeScript (aunque en Javascript también están introduciendo cambios para soportarlo) son las propiedades declaradas con readonly. Esto facilita que se pueda declarar que una propiedad no puede cambiarse después de su inicialización.

De este modo podemos aplicar la inmutabilidad, tan deseable en algunos casos en el mundo de la programación.

class Vehiculo {
  readonly marca: string;

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

const coche = new Vehiculo("Toyota");
console.log(coche.marca);
// coche.marca = "Honda"; ---> Esto daría un error al compilar con TypeScript, ya que se puede modificar

Propiedades y métodos estáticos

Esto no cambia con respecto a lo que puedas conocer con Javascript. Los miembros de clase se declaran con elementos static, lo que indica que pertenecen a la clase en sí, no a sus instancias.

class Matematica {
  static PI = 3.1416;

  static areaCirculo(radio: number): number {
    return this.PI * radio * radio;
  }
}

console.log(Matematica.areaCirculo(10));

Implementación de interfaces

Aunque no tiene que ver exactamente con las clases, también queremos llamar la atención sobre la posibilidad de crear interfaces en TypeScript.

Esto de todos modos lo vamos a dejar para explicar en el artículo sobre las interfaces en TypeScript.

Getters y setters

Otra cosa que queremos mencionar son los getters y setters (también llamados accessors). Esto también viene desde Javascript y lo vemos en el artículo Propiedades con get y set en Javascript.

Ejercicio clase rectángulo

Ya para acabar te proponemos realizar un ejercicio de desarrollo de una clase sencilla. Sería que creases la clase rectángulo en TypeScript que pueda calcular el área y el perímetro.

Veremos el código de resolución de este ejercicio a continuación.

class Rectangulo {
  private base: number;
  private altura: number;

  constructor(base: number, altura: number) {
    this.base = base;
    this.altura = altura;
  }

  calcularArea(): number {
    return this.base * this.altura;
  }

  calcularPerimetro(): number {
    return 2 * (this.base + this.altura);
  }

  // Opcionalmente podrías necesitar acceder a las propiedades
  getBase(): number {
    return this.base;
  }

  getAltura(): number {
    return this.altura;
  }
}

Dado el código anterior, veamos un ejemplo de uso:

const miRectangulo = new Rectangulo(5, 3);

console.log("Base:", miRectangulo.getBase()); // 5
console.log("Altura:", miRectangulo.getAltura()); // 3
console.log("Área:", miRectangulo.calcularArea()); // 15
console.log("Perímetro:", miRectangulo.calcularPerimetro()); // 16

Con esto ya terminamos de explicar lo básico de las clases en TypeScript. Ya ves que es muy sencillo si tienes ya los conocimientos de POO y Javascript.