Clases en TypeScript

Este artículo explica las clases en TypeScript.

YouTube Video

Clases en TypeScript

Las clases en TypeScript se basan en las clases de ES6 de JavaScript y ofrecen características adicionales como anotaciones de tipos y modificadores de acceso. Esto te permite aprovechar los conceptos de programación orientada a objetos mientras garantizas una seguridad de tipos más robusta y clara.

A continuación se encuentran las explicaciones del uso básico y las características de las clases en TypeScript.

Definición básica de una clase

 1class Person {
 2    name: string;  // Member variable
 3    age: number;   // Member variable
 4
 5    // Constructor
 6    constructor(name: string, age: number) {
 7        this.name = name;
 8        this.age = age;
 9    }
10
11    // Method
12    greet(): void {
13        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
14    }
15}
16
17const person = new Person("Alice", 25);
18person.greet();  // Hello, my name is Alice and I am 25 years old.

• name y age son propiedades (variables miembro) de la clase.
• El constructor es un método que se llama al crear una instancia de una clase, que toma argumentos y asigna valores a las propiedades.
• greet es un método de la clase que indica que no tiene un valor de retorno, ya que es de tipo void.

Modificadores de acceso

En TypeScript, puedes usar modificadores de acceso (public, private, protected) para controlar el acceso a las propiedades y métodos de la clase.

public

Por defecto, todas las propiedades y métodos son public. Esto significa que se pueden acceder desde fuera de la clase.

 1class Animal {
 2    public species: string;
 3
 4    constructor(species: string) {
 5        this.species = species;
 6    }
 7
 8    public makeSound(): void {
 9        console.log(`${this.species} makes a sound.`);
10    }
11}
12
13const animal = new Animal("Dog");
14console.log(animal.species);  // Dog
15animal.makeSound();           // Dog makes a sound.

• La propiedad species y el método makeSound están declarados como public y pueden ser accedidos desde fuera de la clase.

private

El uso del modificador private impide el acceso a las propiedades o métodos desde fuera de la clase.

 1class Car {
 2    private brand: string;
 3
 4    constructor(brand: string) {
 5        this.brand = brand;
 6    }
 7
 8    public getBrand(): string {
 9        return this.brand;
10    }
11}
12
13const car = new Car("Toyota");
14// console.log(car.brand);  // Error: 'brand' is private and cannot be accessed.
15console.log(car.getBrand());  // Toyota

• La propiedad brand está declarada como private, por lo que no puede ser accedida desde fuera de la clase.
• La encapsulación de datos se puede lograr ocultando propiedades con el modificador private.

protected

El modificador protected restringe el acceso desde fuera de la clase, pero lo permite en subclases (clases derivadas).

 1class Vehicle {
 2    protected model: string;
 3
 4    constructor(model: string) {
 5        this.model = model;
 6    }
 7}
 8
 9class Truck extends Vehicle {
10    public getModel(): string {
11        return this.model;
12    }
13}
14
15const truck = new Truck("Ford F-150");
16console.log(truck.getModel());  // Ford F-150
17
18// console.log(truck.model);
19// Error: Property 'model' is protected and only accessible within class 'Vehicle' and its subclasses.

• La propiedad model está declarada como protected, por lo que no puede ser accedida desde fuera de la clase, pero sí puede ser accedida desde las subclases.

Getters y Setters

En TypeScript, puedes definir getters y setters usando las palabras clave get y set para obtener y establecer valores de las propiedades.

 1class Employee {
 2    private _salary: number;
 3
 4    constructor(salary: number) {
 5        this._salary = salary;
 6    }
 7
 8    // Getter
 9    get salary(): number {
10        return this._salary;
11    }
12
13    // Setter
14    set salary(newSalary: number) {
15        if (newSalary > 0) {
16            this._salary = newSalary;
17        } else {
18            console.log("Salary must be positive.");
19        }
20    }
21}
22
23const employee = new Employee(50000);
24console.log(employee.salary);  // 50000
25employee.salary = 60000;
26console.log(employee.salary);  // 60000
27employee.salary = -100;        // Salary must be positive.

• En este ejemplo, se utiliza un getter y un setter para la propiedad salary para controlar el acceso y la actualización externa. El setter realiza una validación para evitar valores negativos y muestra un mensaje de advertencia si se proporciona un valor no válido.

Herencia

En TypeScript, las clases pueden heredarse. Usando la palabra clave extends, puedes heredar la funcionalidad de una clase padre.

 1class Animal {
 2    constructor(public name: string) {}
 3
 4    public move(): void {
 5        console.log(`${this.name} is moving.`);
 6    }
 7}
 8
 9class Bird extends Animal {
10    public fly(): void {
11        console.log(`${this.name} is flying.`);
12    }
13}
14
15const bird = new Bird("Sparrow");
16bird.move();  // Sparrow is moving.
17bird.fly();   // Sparrow is flying.

• En este ejemplo, la clase Bird hereda de la clase Animal, lo que le permite usar el método move de Animal. Además, define su propio método fly, agregando nueva funcionalidad mientras hereda características de la clase padre.

Clases abstractas

Las clases abstractas (abstract) no pueden instanciarse directamente y se utilizan como plantillas para proporcionar implementaciones concretas en subclases.

 1abstract class Shape {
 2    abstract getArea(): number;
 3
 4    public describe(): void {
 5        console.log("This is a shape.");
 6    }
 7}
 8
 9class Circle extends Shape {
10    constructor(private radius: number) {
11        super();
12    }
13
14    public getArea(): number {
15        return Math.PI * this.radius * this.radius;
16    }
17}
18
19const circle = new Circle(5);
20console.log(circle.getArea());  // 78.53981633974483
21circle.describe();  // This is a shape.

• En este ejemplo, Shape está definida como una clase abstracta, y getArea es un método abstracto que debe ser implementado por las subclases. La clase Circle hereda esta clase abstracta e implementa su propio método getArea para calcular el área de un círculo. Además, métodos concretos como describe se heredan como funcionalidad común y pueden ser usados tal cual.

Relación con Interfaces

Las clases pueden implementar interfaces, garantizando que tengan propiedades y métodos específicos.

 1interface Flyable {
 2    fly(): void;
 3}
 4
 5class Airplane implements Flyable {
 6    public fly(): void {
 7        console.log("The airplane is flying.");
 8    }
 9}
10
11const airplane: Flyable = new Airplane();
12airplane.fly();  // The airplane is flying.

• En este ejemplo, la interfaz Flyable define la especificación para el método fly, y la clase Airplane implementa esta interfaz proporcionando una definición concreta para el método fly. Con esto, cualquier objeto que se pueda tratar como tipo Flyable tiene garantizado disponer de un método fly.

Miembros Estáticos

Cuando defines miembros estáticos en una clase, esos métodos y propiedades están asociados con la propia clase. Los miembros estáticos pueden ser llamados sin instanciar la clase.

 1class MathUtils {
 2    static PI: number = 3.14;
 3
 4    static add(a: number, b: number): number {
 5        return a + b;
 6    }
 7}
 8
 9console.log(MathUtils.add(10, 20)); // 30
10console.log(MathUtils.PI); // 3.14

• Definir métodos estáticos se realiza utilizando la palabra clave static.
• En este ejemplo, la clase MathUtils define un método estático add y una propiedad estática PI.
• Los miembros estáticos no pertenecen a instancias de la clase, sino que pueden ser llamados directamente desde la propia clase.

Resumen

Las clases de TypeScript añaden características como la seguridad de tipos, modificadores de acceso y clases abstractas a la funcionalidad de clases de JavaScript. Esto permite una programación orientada a objetos más poderosa y segura.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video