El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos sobre dos conceptos fundamentales en TypeScript que son esenciales para trabajar con Angular: las clases y las interfaces. Estos conceptos nos permiten estructurar y tipar nuestro código de manera más robusta y mantenible.

Clases en TypeScript

Las clases en TypeScript son una forma de definir objetos y sus comportamientos. Una clase puede contener propiedades y métodos que definen el estado y el comportamiento de los objetos creados a partir de la clase.

Definición de una Clase

class Persona {
    nombre: string;
    edad: number;

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

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

const persona1 = new Persona('Juan', 30);
persona1.saludar(); // Hola, mi nombre es Juan y tengo 30 años.

Explicación del Código

Definición de la Clase: La clase Persona tiene dos propiedades (nombre y edad) y un método (saludar).
Constructor: El constructor es una función especial que se ejecuta cuando se crea una nueva instancia de la clase. En este caso, inicializa las propiedades nombre y edad.
Método saludar: Este método imprime un mensaje de saludo en la consola.
Instanciación: Se crea una nueva instancia de la clase Persona y se llama al método saludar.

Herencia

TypeScript soporta la herencia, lo que permite crear nuevas clases basadas en clases existentes.

class Empleado extends Persona {
    salario: number;

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

    mostrarSalario(): void {
        console.log(`Mi salario es ${this.salario}`);
    }
}

const empleado1 = new Empleado('Ana', 28, 50000);
empleado1.saludar(); // Hola, mi nombre es Ana y tengo 28 años.
empleado1.mostrarSalario(); // Mi salario es 50000

Explicación del Código

Clase Empleado: Extiende la clase Persona, heredando sus propiedades y métodos.
Constructor: Utiliza super para llamar al constructor de la clase base (Persona).
Nuevo Método mostrarSalario: Este método imprime el salario del empleado.

Interfaces en TypeScript

Las interfaces en TypeScript son una forma de definir la estructura de un objeto. A diferencia de las clases, las interfaces no pueden contener implementación de métodos.

Definición de una Interfaz

interface Animal {
    nombre: string;
    edad: number;
    hacerSonido(): void;
}

class Perro implements Animal {
    nombre: string;
    edad: number;

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

    hacerSonido(): void {
        console.log('Guau Guau');
    }
}

const perro1 = new Perro('Rex', 5);
perro1.hacerSonido(); // Guau Guau

Explicación del Código

Definición de la Interfaz Animal: Define las propiedades nombre y edad, y el método hacerSonido.
Implementación de la Interfaz: La clase Perro implementa la interfaz Animal, asegurando que contiene todas las propiedades y métodos definidos en la interfaz.

Uso de Interfaces para Tipar Objetos

Las interfaces también se pueden usar para tipar objetos sin necesidad de crear una clase.

interface Punto {
    x: number;
    y: number;
}

const punto1: Punto = { x: 10, y: 20 };
console.log(punto1); // { x: 10, y: 20 }

Ejercicios Prácticos

Ejercicio 1: Crear una Clase

Crea una clase Coche con las propiedades marca, modelo y año. Añade un método detalles que imprima los detalles del coche.

class Coche {
    marca: string;
    modelo: string;
    año: number;

    constructor(marca: string, modelo: string, año: number) {
        this.marca = marca;
        this.modelo = modelo;
        this.año = año;
    }

    detalles(): void {
        console.log(`Coche: ${this.marca} ${this.modelo}, Año: ${this.año}`);
    }
}

const coche1 = new Coche('Toyota', 'Corolla', 2020);
coche1.detalles(); // Coche: Toyota Corolla, Año: 2020

Ejercicio 2: Crear una Interfaz

Define una interfaz Producto con las propiedades nombre, precio y enStock. Crea un objeto que implemente esta interfaz.

interface Producto {
    nombre: string;
    precio: number;
    enStock: boolean;
}

const producto1: Producto = {
    nombre: 'Laptop',
    precio: 1500,
    enStock: true
};

console.log(producto1); // { nombre: 'Laptop', precio: 1500, enStock: true }

Conclusión

En esta sección, hemos aprendido sobre las clases y las interfaces en TypeScript. Las clases nos permiten definir objetos con propiedades y métodos, mientras que las interfaces nos ayudan a definir la estructura de los objetos. Estos conceptos son fundamentales para escribir código robusto y mantenible en Angular. En el próximo módulo, exploraremos cómo crear y trabajar con componentes en Angular.

Clases e Interfaces

Clases en TypeScript

Definición de una Clase

Explicación del Código

Herencia

Explicación del Código

Interfaces en TypeScript

Definición de una Interfaz

Explicación del Código

Uso de Interfaces para Tipar Objetos

Ejercicios Prácticos

Ejercicio 1: Crear una Clase

Ejercicio 2: Crear una Interfaz

Conclusión

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

Módulo 5: Servicios e Inyección de Dependencias

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas