El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Los genéricos en TypeScript son una poderosa característica que permite crear componentes reutilizables que funcionan con múltiples tipos de datos. Esto es especialmente útil cuando se desea escribir funciones, clases o interfaces que no están limitadas a un solo tipo de dato.

Conceptos Clave de los Genéricos

Definición de Genéricos: Los genéricos permiten definir funciones, clases o interfaces que no están limitadas a un tipo específico, sino que pueden trabajar con cualquier tipo de dato.
Sintaxis de Genéricos: Se utilizan los corchetes angulares (< >) para definir un tipo genérico. Por convención, se usa la letra T para representar un tipo genérico, aunque se pueden usar otras letras o nombres descriptivos.
Ventajas de los Genéricos:
- Reutilización de Código: Permiten escribir funciones y clases que pueden trabajar con cualquier tipo de dato.
- Seguridad de Tipos: Ayudan a mantener la seguridad de tipos al tiempo que permiten flexibilidad.
- Mejor Legibilidad: Facilitan la comprensión del código al indicar claramente que una función o clase es genérica.

Ejemplos Prácticos

Funciones Genéricas

Una función genérica es una función que puede aceptar argumentos de cualquier tipo y devolver un valor del mismo tipo.

function identity<T>(arg: T): T {
    return arg;
}

// Uso de la función genérica
let output1 = identity<string>("Hola Mundo");
let output2 = identity<number>(100);

Explicación:

La función identity toma un argumento arg de tipo T y devuelve un valor del mismo tipo T.
Al llamar a la función, se especifica el tipo concreto que se utilizará (string o number en este caso).

Clases Genéricas

Las clases genéricas permiten crear estructuras de datos que pueden manejar cualquier tipo de dato.

class Box<T> {
    private contents: T;

    constructor(value: T) {
        this.contents = value;
    }

    getContents(): T {
        return this.contents;
    }
}

// Uso de la clase genérica
let stringBox = new Box<string>("Caja de Texto");
let numberBox = new Box<number>(123);

Explicación:

La clase Box tiene un tipo genérico T que se utiliza para definir el tipo de contents.
Al instanciar la clase, se especifica el tipo concreto que se almacenará en la caja.

Interfaces Genéricas

Las interfaces genéricas permiten definir contratos que pueden aplicarse a múltiples tipos de datos.

interface Pair<T, U> {
    first: T;
    second: U;
}

let pair: Pair<string, number> = { first: "Edad", second: 30 };

Explicación:

La interfaz Pair tiene dos tipos genéricos T y U, que representan los tipos de first y second.
Al usar la interfaz, se especifican los tipos concretos que se utilizarán.

Ejercicios Prácticos

Ejercicio 1: Función Genérica de Reversión

Crea una función genérica que tome un array de cualquier tipo y devuelva un nuevo array con los elementos en orden inverso.

function reverseArray<T>(items: T[]): T[] {
    return items.slice().reverse();
}

// Prueba la función
let reversedNumbers = reverseArray<number>([1, 2, 3, 4]);
let reversedStrings = reverseArray<string>(["a", "b", "c", "d"]);

Ejercicio 2: Clase Genérica de Pila

Implementa una clase genérica Stack que permita apilar y desapilar elementos de cualquier tipo.

class Stack<T> {
    private items: T[] = [];

    push(item: T): void {
        this.items.push(item);
    }

    pop(): T | undefined {
        return this.items.pop();
    }

    peek(): T | undefined {
        return this.items[this.items.length - 1];
    }
}

// Prueba la clase
let numberStack = new Stack<number>();
numberStack.push(10);
numberStack.push(20);
console.log(numberStack.pop()); // 20

Conclusión

Los genéricos en TypeScript son una herramienta esencial para crear código flexible y reutilizable. Al dominar los genéricos, puedes escribir funciones, clases e interfaces que se adaptan a múltiples tipos de datos, mejorando la eficiencia y la legibilidad de tu código. En el siguiente tema, exploraremos los tipos avanzados de TypeScript, que te permitirán llevar tus habilidades de programación al siguiente nivel.

Genéricos en TypeScript

Conceptos Clave de los Genéricos

Ejemplos Prácticos

Funciones Genéricas

Clases Genéricas

Interfaces Genéricas

Ejercicios Prácticos

Ejercicio 1: Función Genérica de Reversión

Ejercicio 2: Clase Genérica de Pila

Conclusión

Playwright con TypeScript: De Principiante a Avanzado

Módulo 1: Introducción a Playwright y TypeScript

Módulo 2: Comenzando con Playwright

Módulo 3: Fundamentos de Playwright y TypeScript

Módulo 4: Funciones Avanzadas de Playwright

Módulo 5: Estrategias de Automatización de Pruebas

Módulo 6: Técnicas Avanzadas de TypeScript

Módulo 7: Aplicaciones Reales de Playwright

Módulo 8: Conclusión del Curso y Próximos Pasos