Розширені типи TypeScript: Опанування типів літералів шаблонів і умовних типів

Міжнародний приклад: Обробка різних форматів дати

У різних регіонах світу використовуються різні формати дати. Ви можете використовувати умовні типи для обробки цих варіацій.

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 {
  // (Implementation would handle different date formats)
  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("Invalid date format");
  }
}

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); // Access the year knowing it will be there

У цьому прикладі використовуються умовні типи для визначення різних функцій розбору дати на основі вказаного формату дати. Тип ParseDate гарантує, що об’єкт, який повертається, має правильні властивості на основі формату.

Об’єднання типів літералів шаблонів і умовних типів

Справжня потужність виникає, коли ви поєднуєте типи літералів шаблонів і умовні типи. Це дозволяє виконувати неймовірно потужні маніпуляції з типами.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // Simplified for demonstration
  : never;

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


//Example function that takes a type
function processEvent(event: T): ExtractEventPayload {
    //In a real implementation, we would actually dispatch the event.
    console.log(`Processing event ${event}`);

    //In a real implementation, the payload would be based on event type.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Note that the return types are very specific:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//If you use other strings, you get never:
// const someOtherEvent = processEvent("someOtherEvent"); // Type is `never`

Найкращі практики та міркування

• Зберігайте простоту: Хоча ці розширені типи є потужними, вони можуть швидко ускладнитися. Прагніть до ясності та зручності обслуговування.
• Ретельно тестуйте: Переконайтеся, що ваші визначення типу поводяться відповідно до очікувань, написавши вичерпні юніт-тести.
• Документуйте свій код: Чітко документуйте призначення та поведінку своїх розширених типів, щоб покращити читабельність коду.
• Враховуйте продуктивність: Надмірне використання розширених типів може вплинути на час компіляції. Профілюйте свій код та оптимізуйте там, де це необхідно.