# TypeScript Generics: así puedes crear plantillas de código reutilizables TypeScript Generics se utiliza para generar código reutilizable y seguro desde el punto de vista de los tipos. Puedes aplicar TypeScript Generics a funciones, clases, interfaces y tipos, entre otros. ## ¿Qué son los TypeScript Generics? En casi todos los lenguajes de programación existen herramientas que permiten a los usuarios crear **plantillas de código** y reutilizarlas más adelante o en otros proyectos. El objetivo no solo es ahorrar tiempo, sino también crear un código seguro que se pueda integrar perfectamente en nuevos entornos. De esta forma, puedes escribir y replicar diferentes componentes, funciones y estructuras de datos completas **sin perder la integridad del tipo de dato**. En [TypeScript](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/what-is-typescript/), estas tareas se llevan a cabo con Generics. Los tipos de datos se pueden pasar como parámetros a otros tipos, funciones u otras estructuras de datos. ## Sintaxis y funcionamiento con un ejemplo sencillo La base para trabajar con TypeScript Generics son las **variables genéricas**. Funcionan como marcadores de posición que representan el tipo de dato que se especificará más adelante. En el código, se identifican con cualquier letra mayúscula. Al crear el código, se **introducen las variables entre paréntesis angulares** y se les asigna el tipo real, de modo que el marcador de posición se reemplaza por la [función TypeScript](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/typescript-functions/), interfaz o [clase TypeScript](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/typescript-classes/) deseada. A dicho marcador de posición también se le conoce como **parámetro de tipo**. También puedes colocar varios parámetros de tipo dentro de un mismo paréntesis. A continuación, te mostramos un ejemplo sencillo para que reconozcas la sintaxis de TypeScript Generics: ```typescript function FuncionEjemplo(parametro1: T): void { console.log(`El tipo de dato del parámetro ${parametro1} es: ${typeof parametro1}`) } ``` Aquí utilizamos el nombre de la función (“FuncionEjemplo”) para definir la variable genérica “T”. En el siguiente código, declaramos la variable como un `string`, una cadena de caracteres: ```typescript FuncionEjemplo("Esto es un string."); ``` Al pasar el valor del parámetro `string` a la función, obtenemos el siguiente resultado: ```typescript El tipo de dato del parámetro Esto es un string. es: string ``` ## TypeScript Generics con dos variables TypeScript Generics funciona de forma muy similar cuando se utilizan **dos o más variables genéricas** como marcadores de posición. En el siguiente ejemplo, almacenamos las variables “T” y “U” como tipos para los parámetros “parametro1” y “parametro2”. Separa las variables con una coma: ```typescript function FuncionEjemplo(parametro1: T, parametro2: U): string { return JSON.stringify({parametro1, parametro2}); } ``` Ahora asignamos tipos de datos y valores a los dos marcadores de posición. En este caso, los tipos de datos son `number` y `string`, y los valores son “11” y “Jugador”. Aquí tienes el código correspondiente: ```typescript const str = FuncionEjemplo(11, "Jugador"); console.log(str); ``` ## Ejemplos de clases reutilizables Si quieres utilizar TypeScript Generics para crear **clases reutilizables**, también es posible. En el siguiente ejemplo, utilizamos generics para obtener un número como resultado. Aquí tienes el código correspondiente: ```typescript class ValorNumerico { private _value: T | undefined; constructor(private name: string) {} public setValue(value: T) { this._value = value; } public getValue(): T | undefined { return this._value; } public toString(): string { return `${this.name}: ${this._value}`; } } let value = new ValorNumerico('miNumero'); value.setValue(11); console.log(value.toString()); ``` El resultado es el siguiente: ```typescript miNumero: 11 ``` Este principio también funciona con otros tipos de datos y con varias variables genéricas. Puedes verlo en el siguiente ejemplo: ```typescript class ClaseEjemplo { nombre: T; apellido: U; constructor(nombre: T, apellido: U) { this.nombre = nombre; this.apellido = apellido; } } ``` Ahora asignamos el tipo de datos `string` a las variables y les damos los valores deseados: ```typescript const persona1 = new ClaseEjemplo("Julia", "Pérez"); console.log(`${persona1.nombre} ${persona1.apellido}`) ``` El resultado es el siguiente: ```typescript Julia Pérez ``` Si quieres combinar diferentes tipos de datos, sigue el siguiente ejemplo: ```typescript class ClaseEjemplo { numero: T; palabra: U; constructor(numero: T, palabra: U) { this.numero = numero; this.palabra = palabra; } } ``` A los marcadores de posición se les asignan ahora los tipos de datos `number` y `string`, así como sus valores: ```typescript const combinacion = new ClaseEjemplo(11, "Jugador"); console.log(`${combinacion.numero} ${combinacion.palabra}`); ``` El resultado es el siguiente: ```typescript 11 Jugador ``` ## Uso con interfaces También puedes usar TypeScript Generics con **interfaces**, y se recomienda hacerlo. El procedimiento es similar al de declarar una clase: ```typescript interface Interfaz { valor: T; } ``` Ahora implementamos la interfaz en la clase “ClaseEjemplo”. Asignamos a la variable “T” el tipo de dato `string`: ```typescript class ClaseEjemplo implements Interfaz { valor: string = "Esto es un ejemplo con una interfaz"; } const salida = new ClaseEjemplo(); console.log(salida.valor) ``` El resultado es el siguiente: ```typescript Esto es un ejemplo con una interfaz ``` ## Crear arrays genéricos También puedes utilizar TypeScript Generics para crear [arrays de TypeScript](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/typescript-arrays/). Aquí tienes un ejemplo de código sencillo, en el que usamos la función `reverse` para invertir el orden de los números en un array: ```typescript function reverse(array: T[]): T[] { return array.reverse(); } let numeros: number[] = [10, 7, 6, 13, 9]; let nuevoOrden: number[] = reverse(numeros); console.log(nuevoOrden); ``` El resultado es el siguiente: ```typescript [9, 13, 6, 7, 10] ``` ## TypeScript Generics para tipos condicionales Para finalizar, te mostramos cómo usar TypeScript Generics **con tipos condicionales**. El resultado cambia dependiendo de si se cumple o no una condición. En el siguiente ejemplo, la condición que debe cumplirse es que el tipo de dato sea `string`. Aquí tienes el código: ```typescript type EsEstoUnString = T extends string ? true : false; type A = "ejemplo"; type B = { nombre: string; }; type PrimerResultado = EsEstoUnString; type SegundoResultado = EsEstoUnString; ``` `type A` es el string “ejemplo”, mientras que `type B` es un objeto con la propiedad “nombre” y el tipo de dato `string`. A continuación, almacenamos ambos tipos como “PrimerResultado” y “SegundoResultado”. Al revisar ambos tipos, veremos que “PrimerResultado” es `true` porque es un string, mientras que “SegundoResultado” sigue siendo `false`. Consejo Despliega tu página web o aplicación directamente desde GitHub: [Deploy Now](https://www.ionos.com/es-us/alojamiento/deploy-now "Deploy Now de IONOS") de IONOS es la mejor opción para páginas web y aplicaciones, gracias a su detección automática de frameworks, su rápida configuración y su óptima escalabilidad. ¡Elige la tarifa que mejor se adapta a tu proyecto! This is a markdown version of: [https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/typescript-generics/](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/typescript-generics/) for AI/LLM consumption.