Genéricos de TypeScript con ejemplos

Los genéricos de TypeScript son una característica poderosa que le permite crear componentes reutilizables y con seguridad de tipos. Los genéricos brindan una manera de crear clases, funciones e interfaces que funcionan con una variedad de tipos y al mismo tiempo mantienen una sólida seguridad de tipos. Este artículo le presentará los genéricos y le demostrará cómo usarlos con ejemplos prácticos.

Entendiendo los genéricos

Los genéricos le permiten definir un componente con un marcador de posición para el tipo en el que opera. En lugar de especificar un tipo concreto, se utiliza un parámetro de tipo genérico que se puede reemplazar por cualquier tipo cuando se utiliza el componente.

Sintaxis básica

La sintaxis básica para definir un tipo genérico es utilizar corchetes angulares <> con el nombre de un parámetro de tipo. A continuación, se muestra un ejemplo sencillo:

function identity(value: T): T {
  return value;
}

const stringIdentity = identity("Hello"); // string
const numberIdentity = identity(123); // number

En este ejemplo, identity es una función genérica que toma un parámetro value de tipo T y devuelve un valor del mismo tipo. El parámetro de tipo T se reemplaza por el tipo real cuando se llama a la función.

Genéricos con clases

Los genéricos también se pueden utilizar con clases para crear estructuras de datos flexibles y reutilizables. A continuación, se muestra un ejemplo de una clase genérica:

class Box {
  private value: T;

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

  getValue(): T {
    return this.value;
  }
}

const stringBox = new Box("TypeScript");
console.log(stringBox.getValue()); // Output: TypeScript

const numberBox = new Box(42);
console.log(numberBox.getValue()); // Output: 42

En este ejemplo, la clase Box se define con un parámetro de tipo genérico T. La clase tiene una propiedad privada value de tipo T y un método getValue que devuelve el valor de tipo T.

Genéricos con interfaces

Los genéricos se pueden utilizar con interfaces para crear interfaces flexibles y seguras en cuanto a tipos. A continuación, se muestra un ejemplo:

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

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

console.log(pair.first); // Output: Age
console.log(pair.second); // Output: 30

En este ejemplo, la interfaz Pair se define con dos parámetros de tipo genérico T y U. La interfaz representa un par de valores con tipos T y U, respectivamente.

Genéricos en funciones

Los genéricos se pueden utilizar en funciones para manejar múltiples tipos y, al mismo tiempo, mantener la seguridad de tipos. A continuación, se muestra un ejemplo de una función genérica que funciona con matrices:

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

const reversedStringArray = reverseArray(["one", "two", "three"]);
console.log(reversedStringArray); // Output: ["three", "two", "one"]

const reversedNumberArray = reverseArray([1, 2, 3]);
console.log(reversedNumberArray); // Output: [3, 2, 1]

En este ejemplo, la función reverseArray toma una matriz de tipo T y devuelve una matriz invertida del mismo tipo. El parámetro de tipo T garantiza que la función funcione con matrices de cualquier tipo manteniendo la seguridad de tipos.

Restricciones a los medicamentos genéricos

A veces, puede ser necesario imponer restricciones al parámetro de tipo genérico para garantizar que tenga determinadas propiedades. Esto se hace mediante restricciones:

function logLength(item: T): void {
  console.log(item.length);
}

logLength("Hello, TypeScript"); // Output: 16
logLength([1, 2, 3]); // Output: 3
// logLength(123); // Error: number does not have a length property

En este ejemplo, la función logLength está restringida a tipos que tienen una propiedad length. Esto permite que la función acepte cadenas y matrices, pero no números u otros tipos sin una propiedad length.

Conclusión

Los genéricos en TypeScript proporcionan una forma eficaz de crear componentes flexibles y reutilizables manteniendo al mismo tiempo una sólida seguridad de tipos. Al comprender y utilizar los genéricos, puede escribir código más genérico y adaptable, lo que mejora la calidad general y la facilidad de mantenimiento de sus aplicaciones TypeScript.

Experimente con genéricos en sus proyectos para ver sus beneficios en acción y mejorar sus habilidades de programación en TypeScript.