Ty­pe­S­cri­pt Generics: así puedes crear pla­n­ti­llas de código re­uti­li­za­bles

Ty­pe­S­cri­pt Generics se utiliza para generar código re­uti­li­za­ble y seguro desde el punto de vista de los tipos. Puedes aplicar Ty­pe­S­cri­pt Generics a funciones, clases, in­te­r­fa­ces y tipos, entre otros.

¿Qué son los Ty­pe­S­cri­pt Generics?

En casi todos los lenguajes de pro­gra­ma­ción existen he­rra­mie­n­tas que permiten a los usuarios crear pla­n­ti­llas de código y re­uti­li­zar­las 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 pe­r­fe­c­ta­me­n­te en nuevos entornos. De esta forma, puedes escribir y replicar di­fe­re­n­tes co­m­po­ne­n­tes, funciones y es­tru­c­tu­ras de datos completas sin perder la in­te­gri­dad del tipo de dato. En Ty­pe­S­cri­pt, estas tareas se llevan a cabo con Generics. Los tipos de datos se pueden pasar como pa­rá­me­tros a otros tipos, funciones u otras es­tru­c­tu­ras de datos.

Sintaxis y fu­n­cio­na­mie­n­to con un ejemplo sencillo

La base para trabajar con Ty­pe­S­cri­pt Generics son las variables genéricas. Funcionan como ma­r­ca­do­res de posición que re­pre­se­n­tan el tipo de dato que se es­pe­ci­fi­ca­rá más adelante. En el código, se ide­n­ti­fi­can con cualquier letra mayúscula. Al crear el código, se in­tro­du­cen las variables entre pa­ré­n­te­sis angulares y se les asigna el tipo real, de modo que el marcador de posición se reemplaza por la función Ty­pe­S­cri­pt, interfaz o clase Ty­pe­S­cri­pt deseada. A dicho marcador de posición también se le conoce como parámetro de tipo. También puedes colocar varios pa­rá­me­tros de tipo dentro de un mismo pa­ré­n­te­sis. A co­n­ti­nua­ción, te mostramos un ejemplo sencillo para que re­co­no­z­cas la sintaxis de Ty­pe­S­cri­pt Generics:

function FuncionEjemplo<T>(parametro1: T): void {
    console.log(`El tipo de dato del parámetro ${parametro1} es: ${typeof parametro1}`)
}

Aquí uti­li­za­mos el nombre de la función (“Fu­n­cio­nE­je­m­plo”) para definir la variable genérica “T”. En el siguiente código, de­cla­ra­mos la variable como un string, una cadena de ca­ra­c­te­res:

FuncionEjemplo<string>("Esto es un string.");

Al pasar el valor del parámetro string a la función, obtenemos el siguiente resultado:

El tipo de dato del parámetro Esto es un string. es: string

Ty­pe­S­cri­pt Generics con dos variables

Ty­pe­S­cri­pt Generics funciona de forma muy similar cuando se utilizan dos o más variables genéricas como ma­r­ca­do­res de posición. En el siguiente ejemplo, al­ma­ce­na­mos las variables “T” y “U” como tipos para los pa­rá­me­tros “parametro1” y “parametro2”. Separa las variables con una coma:

function FuncionEjemplo<T, U>(parametro1: T, parametro2: U): string {
    return JSON.stringify({parametro1, parametro2});
}

Ahora asignamos tipos de datos y valores a los dos ma­r­ca­do­res 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 co­rre­s­po­n­die­n­te:

const str = FuncionEjemplo<number, string>(11, "Jugador");
console.log(str);

Ejemplos de clases re­uti­li­za­bles

Si quieres utilizar Ty­pe­S­cri­pt Generics para crear clases re­uti­li­za­bles, también es posible. En el siguiente ejemplo, uti­li­za­mos generics para obtener un número como resultado. Aquí tienes el código co­rre­s­po­n­die­n­te:

class ValorNumerico<T> {
    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<number>('miNumero');
value.setValue(11);
console.log(value.toString());

El resultado es el siguiente:

miNumero: 11

Este principio también funciona con otros tipos de datos y con varias variables genéricas. Puedes verlo en el siguiente ejemplo:

class ClaseEjemplo<T, U> {
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:

const persona1 = new ClaseEjemplo<string, string>("Julia", "Pérez");
console.log(`${persona1.nombre} ${persona1.apellido}`)

El resultado es el siguiente:

Julia Pérez

Si quieres combinar di­fe­re­n­tes tipos de datos, sigue el siguiente ejemplo:

class ClaseEjemplo<T, U> {
numero: T;
palabra: U;
constructor(numero: T, palabra: U) {
	this.numero = numero;
	this.palabra = palabra;
	}
}

A los ma­r­ca­do­res de posición se les asignan ahora los tipos de datos number y string, así como sus valores:

const combinacion = new ClaseEjemplo<number, string>(11, "Jugador");
console.log(`${combinacion.numero} ${combinacion.palabra}`);

El resultado es el siguiente:

11 Jugador

Uso con in­te­r­fa­ces

También puedes usar Ty­pe­S­cri­pt Generics con in­te­r­fa­ces, y se re­co­mie­n­da hacerlo. El pro­ce­di­mie­n­to es similar al de declarar una clase:

interface Interfaz<T> {
	valor: T;
}

Ahora im­ple­me­n­ta­mos la interfaz en la clase “Cla­seE­je­m­plo”. Asignamos a la variable “T” el tipo de dato string:

class ClaseEjemplo implements Interfaz<string> {
	valor: string = "Esto es un ejemplo con una interfaz";
}
const salida = new ClaseEjemplo();
console.log(salida.valor)

El resultado es el siguiente:

Esto es un ejemplo con una interfaz

Crear arrays genéricos

También puedes utilizar Ty­pe­S­cri­pt Generics para crear arrays de Ty­pe­S­cri­pt. 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:

function reverse<T>(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:

[9, 13, 6, 7, 10]

Ty­pe­S­cri­pt Generics para tipos co­n­di­cio­na­les

Para finalizar, te mostramos cómo usar Ty­pe­S­cri­pt Generics con tipos co­n­di­cio­na­les. El resultado cambia de­pe­n­die­n­do 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:

type EsEstoUnString<T> = T extends string ? true : false;
type A = "ejemplo";
type B = {
	nombre: string;
};
type PrimerResultado = EsEstoUnString<A>;
type SegundoResultado = EsEstoUnString<B>;

type A es el string “ejemplo”, mientras que type B es un objeto con la propiedad “nombre” y el tipo de dato string. A co­n­ti­nua­ción, al­ma­ce­na­mos ambos tipos como “Pri­me­rRe­su­l­ta­do” y “Se­gu­n­do­Re­su­l­ta­do”. Al revisar ambos tipos, veremos que “Pri­me­rRe­su­l­ta­do” es true porque es un string, mientras que “Se­gu­n­do­Re­su­l­ta­do” sigue siendo false.