🔥 Object Types, generics (tipos genéricos)

Imaginemos que tenemos un tipo Caja que contiene cualquier valor posible como string, number, etc.

interface Caja {
    contenido: any;
}

En esta ocasión, la propiedad contenido es definida como any, lo que permite trabajar con cualquier valor, pero que puede conducir a escenarios no deseados.

Si por el contrario utilizamos uknown, esto implicaría que para aquellos casos en los cuales ya conocemos el tipo de contenido, se requeriría hacer comparaciones de precaución, o utilizar aserciones (asserts) para prevenir algunos errores.

interface Caja {
  contenido: unknown;
}

let x: Caja = {
  contenido: "hola mundo",
};

// mediante typeof podemos verificar si el tipo es string
if (typeof x.contenido === "string") {
  console.log(x.contenido.toLocaleLowerCase());
}

// mediante "as tipo" podemos decirle al compilador que esto es siempre string
console.log((x.contenido as string).toLocaleLowerCase());

Otro posible enfoque es poder utilizar un tipo para cada uno de los casos.

interface CajaNumber {
  contenido: number;
}

interface CajaString {
  contenido: string;
}

interface CajaBoolean {
  contenido: boolean;
}

Sin embargo esto implica que tendremos que crear diferentes funciones/sobrecarga, para poder operar con cada uno de estos tipos.

function setContenido(caja: CajaNumber, nuevoContenido: string): void;
function setContenido(caja: CajaString, nuevoContenido: number): void;
function setContenido(caja: CajaBoolean, nuevoContenido: boolean): void;
function setContenido(caja: { contenido: any }, nuevoContenido: any) {
  caja.contenido = nuevoContenido;
}

Utilizar sobrecarga para cubrir los escenarios de cada uno de los posibles tipos, no resulta ser la solución mas adecuada para solucionar este problema.

☆ ¿Qué son los Generics en TypeScript?

Una herramienta muy útil para construir soluciones que respondan a tipos dinámicos es el uso de generics.

interface Caja<T> {
    contenido: T;
}

Piensa en la Caja como una plantilla que recibe un tipo, en donde T es un contenedor que será reemplazado con algún tipo. Cuando TypeScript ve Caja<string>, va a reemplazar cada instancia de T dentro de Caja<T> con el tipo string, para que se genere así un contenido: string.

interface Caja<T> {
  contenido: T;
}

let cajaDeString: Caja<string> = { contenido: "hola mundo" };
let cajaDeNumero: Caja<number> = { contenido: 100 };
let cajaDeFecha: Caja<Date> = { contenido: new Date() };

Podemos ver que nuestra interface Caja<T> se convierte en una interface reutilizable para diferentes tipos. De igual forma podemos crear alias genéricos.

type Caja<T> = {
  contenido: T;
};

let cajaDeString: Caja<string> = { contenido: "hola mundo" };
let cajaDeNumero: Caja<number> = { contenido: 100 };
let cajaDeFecha: Caja<Date> = { contenido: new Date() };