Explorando los fundamentos

Una de las muchas características importantes de TypeScript (TS) son los genéricos. Los genéricos nos permiten escribir interfaces, funciones y clases flexibles y reutilizables que pueden funcionar con diferentes tipos de datos en lugar de estar limitados a un tipo de datos específico. Por lo tanto, no tenemos que escribir código separado para cada tipo de datos, lo que hace que nuestro código sea más flexible y reutilizable.

En esta serie de publicaciones de blog, exploraremos los genéricos de TS y descubriremos cómo podemos usarlos en nuestros proyectos de TS para desarrollar aplicaciones robustas y escalables. Comenzaremos con los fundamentos y en las últimas partes de la serie profundizaremos en conceptos avanzados.

Al final de esta serie, tendremos una comprensión más profunda de los genéricos de TS y podremos aplicar técnicas más avanzadas al código. Ya sea que estemos construyendo un proyecto pequeño o una aplicación a gran escala, los genéricos de TS pueden ayudarnos a escribir código más escalable y mantenible. ¡Así que profundicemos y dominemos los genéricos en TypeScript!

¿Qué son los genéricos en TypeScript?

TypeScript (TS) Generics proporciona una forma de escribir código que puede funcionar con diferentes tipos de datos. En lugar de escribir código para un tipo específico, podemos escribir código genérico que funcione con varios tipos de datos. Para examinar este concepto, consideremos una función simple que devuelve el mismo valor pasado como argumento.

// T is the generic type placeholder.
function justReturn<T>(
  //  We assign the type passed through the generic placeholder T to the parameter 'a'
  a: T
): T /* We assign the type passed through the generic placeholder T to the parameter 'a'.*/ {
  return a;
}

Podemos usar la función de la siguiente manera.

// We can use the function justReturn with different types.
// We can specify the type explicitly:
const num: number = justReturn<number>(2);
const str: string = justReturn<string>("Abc");

// Alternatively, we can let TypeScript infer the type for us:
const x: boolean = justReturn(true);

// We define a function that takes two generic type parameters, `T` and `U`.
// The `T` and `U` type parameters are used to represent the types of the elements in the two arrays.
function combine<T, U>(
  // We assign the `a` parameter the type `T[]`, which represents an array of elements of type `T`.
  a: T[], 
  // We assign the `b` parameter the type `U[]`, which represents an array of elements of type `U`.
  // The return type of the function is an array of elements of type `T | U`, meaning it can contain elements of type `T` or `U`.
  b: U[]
): (T | U)[] {
  // We create a new array that contains all the elements of `a` followed by all the elements of `b`.
  return [...a, ...b];
}

// Example usage
const arr1 = ["a", "b", "c"];
const arr2 = [1, 2, 3];
const combined = combine(arr1, arr2);

El tipo de retorno de la función es una matriz de elementos de tipo T | U, lo que significa que puede contener elementos de tipo T o U. Esto permite que la función trabaje con arreglos de diferentes tipos y los combine en un solo arreglo.

En el uso del ejemplo, la función de combinación se usa para combinar dos matrices, una que contiene cadenas y la otra que contiene números. La matriz combinada resultante contiene elementos de ambos tipos.

Pensamientos finales

En la Parte 1 de esta serie, examinamos los fundamentos de los genéricos de TypeScript, incluida la sintaxis y cómo nos permiten escribir código que funciona con varios tipos de datos.

En las próximas partes de esta serie, veremos cómo los genéricos hacen que nuestro código sea más reutilizable y flexible, y cómo los genéricos pueden ayudarnos a escribir aplicaciones más sólidas y escalables. Examinaremos temas como cómo especificar restricciones genéricas para garantizar que solo ciertos tipos se puedan usar como argumentos de tipo, cómo usar tipos predeterminados en tipos genéricos y cómo usar tipos condicionales para escribir tipos genéricos más sofisticados y expresivos.

Además, exploraremos algunas de las trampas comunes que podemos encontrar al trabajar con genéricos y cómo evitarlas. Al final de esta serie, tendremos una comprensión más profunda de los genéricos de TypeScript y podremos aplicar técnicas más avanzadas a nuestro código.