Introducción

Las interfaces en TypeScript son una forma poderosa de definir la estructura de un objeto. Permiten describir la forma que debe tener un objeto, lo que facilita la verificación de tipos y la autocompletación en los editores de código. En esta sección, aprenderás cómo definir y utilizar interfaces en TypeScript.

Conceptos Clave

Definición de Interfaces: Cómo declarar una interfaz y sus propiedades.
Implementación de Interfaces: Cómo usar interfaces con clases y objetos.
Propiedades Opcionales: Cómo definir propiedades que no son obligatorias.
Propiedades de Solo Lectura: Cómo definir propiedades que no pueden ser modificadas después de su inicialización.
Extensión de Interfaces: Cómo extender interfaces para crear nuevas interfaces basadas en otras.

Definición de Interfaces

Una interfaz en TypeScript se define utilizando la palabra clave interface. Aquí tienes un ejemplo básico:

interface Persona {
    nombre: string;
    edad: number;
}

En este ejemplo, la interfaz Persona tiene dos propiedades: nombre de tipo string y edad de tipo number.

Ejemplo Práctico

interface Persona {
    nombre: string;
    edad: number;
}

const juan: Persona = {
    nombre: "Juan",
    edad: 30
};

console.log(juan.nombre); // Salida: Juan
console.log(juan.edad);   // Salida: 30

Implementación de Interfaces

Las interfaces pueden ser implementadas por clases. Esto asegura que la clase cumpla con la estructura definida por la interfaz.

interface Persona {
    nombre: string;
    edad: number;
}

class Empleado implements Persona {
    nombre: string;
    edad: number;
    salario: number;

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

    mostrarDetalles(): void {
        console.log(`Nombre: ${this.nombre}, Edad: ${this.edad}, Salario: ${this.salario}`);
    }
}

const empleado1 = new Empleado("Ana", 28, 50000);
empleado1.mostrarDetalles(); // Salida: Nombre: Ana, Edad: 28, Salario: 50000

Propiedades Opcionales

Puedes definir propiedades opcionales en una interfaz utilizando el operador ?.

interface Persona {
    nombre: string;
    edad?: number; // Propiedad opcional
}

const pedro: Persona = {
    nombre: "Pedro"
};

console.log(pedro.nombre); // Salida: Pedro
console.log(pedro.edad);   // Salida: undefined

Propiedades de Solo Lectura

Las propiedades de solo lectura se definen utilizando la palabra clave readonly. Estas propiedades no pueden ser modificadas una vez que se les ha asignado un valor.

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

const punto1: Punto = { x: 10, y: 20 };
// punto1.x = 5; // Error: Cannot assign to 'x' because it is a read-only property.

Extensión de Interfaces

Las interfaces pueden extenderse para crear nuevas interfaces basadas en otras. Esto se hace utilizando la palabra clave extends.

interface Persona {
    nombre: string;
    edad: number;
}

interface Empleado extends Persona {
    salario: number;
}

const empleado2: Empleado = {
    nombre: "Carlos",
    edad: 35,
    salario: 60000
};

console.log(empleado2.nombre); // Salida: Carlos
console.log(empleado2.edad);   // Salida: 35
console.log(empleado2.salario);// Salida: 60000

Ejercicios Prácticos

Ejercicio 1

Define una interfaz Vehiculo con las propiedades marca (string) y modelo (string). Luego, crea un objeto que implemente esta interfaz.

interface Vehiculo {
    marca: string;
    modelo: string;
}

const miCoche: Vehiculo = {
    marca: "Toyota",
    modelo: "Corolla"
};

console.log(miCoche.marca); // Salida: Toyota
console.log(miCoche.modelo);// Salida: Corolla

Ejercicio 2

Define una interfaz Producto con las propiedades nombre (string), precio (number) y disponible (boolean, opcional). Luego, crea un objeto que implemente esta interfaz.

interface Producto {
    nombre: string;
    precio: number;
    disponible?: boolean;
}

const producto1: Producto = {
    nombre: "Laptop",
    precio: 1500
};

console.log(producto1.nombre);     // Salida: Laptop
console.log(producto1.precio);     // Salida: 1500
console.log(producto1.disponible); // Salida: undefined

Conclusión

En esta sección, hemos aprendido cómo definir y utilizar interfaces en TypeScript. Las interfaces son una herramienta poderosa para definir la estructura de los objetos y asegurar que el código sea más robusto y fácil de mantener. Hemos cubierto cómo definir interfaces, implementarlas en clases, trabajar con propiedades opcionales y de solo lectura, y extender interfaces. Con estos conocimientos, estás listo para utilizar interfaces en tus proyectos de TypeScript y mejorar la calidad de tu código.

En el próximo tema, exploraremos las clases en TypeScript, donde aprenderás cómo definir y trabajar con clases, constructores, métodos y herencia.

Interfaces

Introducción

Conceptos Clave

Definición de Interfaces

Ejemplo Práctico

Implementación de Interfaces

Propiedades Opcionales

Propiedades de Solo Lectura

Extensión de Interfaces

Ejercicios Prácticos

Ejercicio 1

Ejercicio 2

Conclusión

Curso de TypeScript

Módulo 1: Introducción a TypeScript

Módulo 2: Trabajando con Tipos

Módulo 3: Tipos Avanzados

Módulo 4: Funciones y Módulos

Módulo 5: Programación Asíncrona

Módulo 6: Herramientas y Mejores Prácticas

Módulo 7: Temas Avanzados