Tipos avanzados de TypeScript: Dominando los tipos literales de plantilla y los tipos condicionales

Ejemplo internacional: Manejo de diferentes formatos de fecha

Diferentes regiones del mundo utilizan diferentes formatos de fecha. Puede usar tipos condicionales para manejar estas variaciones.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (La implementación manejaría diferentes formatos de fecha)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Formato de fecha no válido");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Type: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Type: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Type: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Accede al año sabiendo que estará ahí

Este ejemplo utiliza tipos condicionales para definir diferentes funciones de análisis de fechas basadas en el formato de fecha especificado. El tipo ParseDate garantiza que el objeto devuelto tenga las propiedades correctas según el formato.

Combinando tipos literales de plantilla y tipos condicionales

El verdadero poder llega cuando combina tipos literales de plantilla y tipos condicionales. Esto permite manipulaciones de tipos increíblemente poderosas.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // Simplificado para demostración
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


//Ejemplo de función que toma un tipo
function processEvent(event: T): ExtractEventPayload {
    //En una implementación real, en realidad despacharíamos el evento.
    console.log(`Procesando evento ${event}`);

    //En una implementación real, la carga útil se basaría en el tipo de evento.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Tenga en cuenta que los tipos de retorno son muy específicos:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//Si usa otras cadenas, obtiene nunca:
// const someOtherEvent = processEvent("someOtherEvent"); // El tipo es `never`

Mejores prácticas y consideraciones

• Mantenlo simple: Si bien son poderosos, estos tipos avanzados pueden volverse complejos rápidamente. Esfuércese por la claridad y el mantenimiento.
• Pruebe a fondo: Asegúrese de que sus definiciones de tipos se comporten como se espera escribiendo pruebas unitarias completas.
• Documente su código: Documente claramente el propósito y el comportamiento de sus tipos avanzados para mejorar la legibilidad del código.
• Considere el rendimiento: El uso excesivo de tipos avanzados puede afectar el tiempo de compilación. Perfile su código y optimice donde sea necesario.