Aprender TypeScript Tipos intermedios y avanzados

Tipos intermedios y avanzados en TypeScript

TypeScript ofrece un sistema de tipos sofisticado que va más allá de los tipos básicos como string, number o boolean. Los tipos intermedios y avanzados permiten crear definiciones más precisas y expresivas, mejorando la seguridad del código y proporcionando mejor documentación implícita.

Tipos de unión e intersección

Los tipos de unión permiten que una variable pueda ser de varios tipos diferentes, utilizando el operador |. Esta característica es especialmente útil cuando una función puede recibir diferentes tipos de parámetros.

type Estado = "cargando" | "completado" | "error";
type Identificador = string | number;

function procesarId(id: Identificador): string {
    return `ID: ${id}`;
}

procesarId(123);        // ✓ Válido
procesarId("abc-456");  // ✓ Válido

Los tipos de intersección combinan múltiples tipos en uno solo usando el operador &. El resultado debe cumplir con todas las propiedades de los tipos combinados.

interface Usuario {
    nombre: string;
    email: string;
}

interface Administrador {
    permisos: string[];
    nivel: number;
}

type SuperAdmin = Usuario & Administrador;

const admin: SuperAdmin = {
    nombre: "Ana García",
    email: "ana@empresa.com",
    permisos: ["leer", "escribir", "eliminar"],
    nivel: 5
};

Tipos literales y plantilla

Los tipos literales restringen los valores a opciones específicas, creando enumeraciones implícitas más flexibles que los enums tradicionales.

type Tema = "claro" | "oscuro" | "automático";
type Puerto = 3000 | 8080 | 9000;

interface Configuracion {
    tema: Tema;
    puerto: Puerto;
    debug: true | false;
}

Los tipos de plantilla literal permiten crear tipos dinámicos basados en patrones de cadenas, combinando literales con tipos existentes.

type Evento = "click" | "hover" | "focus";
type EventHandler = `on${Capitalize<Evento>}`;
// Resultado: "onClick" | "onHover" | "onFocus"

type CSSProperty = `--${string}`;
// Acepta cualquier cadena que comience con "--"

interface ComponenteProps {
    [key: CSSProperty]: string;
}

Tipos condicionales y mapeados

Los tipos condicionales utilizan la sintaxis T extends U ? X : Y para crear tipos que se comportan como operadores ternarios a nivel de tipos.

type EsArray<T> = T extends any[] ? true : false;

type Resultado1 = EsArray<string[]>;  // true
type Resultado2 = EsArray<number>;    // false

type ExtraerTipo<T> = T extends Promise<infer U> ? U : T;

type TipoPromesa = ExtraerTipo<Promise<string>>;  // string
type TipoNormal = ExtraerTipo<number>;            // number

Los tipos mapeados transforman las propiedades de un tipo existente aplicando modificaciones sistemáticas.

type Opcional<T> = {
    [K in keyof T]?: T[K];
};

type SoloLectura<T> = {
    readonly [K in keyof T]: T[K];
};

interface Usuario {
    id: number;
    nombre: string;
    email: string;
}

type UsuarioOpcional = Opcional<Usuario>;
// { id?: number; nombre?: string; email?: string; }

type UsuarioInmutable = SoloLectura<Usuario>;
// { readonly id: number; readonly nombre: string; readonly email: string; }

Tipos utilitarios integrados

TypeScript incluye tipos utilitarios predefinidos que simplifican transformaciones comunes de tipos.

Partial y Required modifican la opcionalidad de las propiedades:

interface Producto {
    id: number;
    nombre: string;
    precio?: number;
}

type ProductoParcial = Partial<Producto>;
// Todas las propiedades son opcionales

type ProductoCompleto = Required<Producto>;
// Todas las propiedades son obligatorias, incluso 'precio'

Pick y Omit seleccionan o excluyen propiedades específicas:

type ProductoBasico = Pick<Producto, "id" | "nombre">;
// { id: number; nombre: string; }

type ProductoSinId = Omit<Producto, "id">;
// { nombre: string; precio?: number; }

Record crea tipos de objeto con claves y valores específicos:

type EstadisticasVentas = Record<string, number>;
// { [key: string]: number; }

type ConfiguracionModulos = Record<"auth" | "database" | "cache", boolean>;
// { auth: boolean; database: boolean; cache: boolean; }

Inferencia avanzada con infer

La palabra clave infer permite extraer tipos de estructuras complejas dentro de tipos condicionales, creando tipos más dinámicos y reutilizables.

type ParametrosFuncion<T> = T extends (...args: infer P) => any ? P : never;
type RetornoFuncion<T> = T extends (...args: any[]) => infer R ? R : never;

function calcular(a: number, b: string): boolean {
    return a > parseInt(b);
}

type Parametros = ParametrosFuncion<typeof calcular>;
// [number, string]

type Retorno = RetornoFuncion<typeof calcular>;
// boolean

Esta capacidad de inferencia es fundamental para crear bibliotecas y frameworks que se adapten automáticamente a los tipos que reciben, proporcionando una experiencia de desarrollo más fluida y type-safe.

Los tipos intermedios y avanzados de TypeScript transforman la manera de pensar sobre la tipificación estática, permitiendo expresar relaciones complejas entre datos de forma clara y mantenible.