Разширени типове в 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 {
  // (Имплементацията ще обработва различни формати на дата)
  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"); // Тип: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Тип: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Тип: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Достъп до годината, знаейки, че ще бъде там

Този пример използва условни типове, за да дефинира различни функции за анализ на дата въз основа на указания формат на дата. Типът 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"


//Примерна функция, която приема тип
function processEvent(event: T): ExtractEventPayload {
    //В реална реализация действително бихме изпратили събитието.
    console.log(`Обработка на събитие ${event}`);

    //В реална реализация полезният товар би се основавал на типа на събитието.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Обърнете внимание, че типовете на връщане са много специфични:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//Ако използвате други низове, получавате никога:
// const someOtherEvent = processEvent("someOtherEvent"); // Типът е `never`

Най-добри практики и съображения

• Поддържайте го просто: Докато са мощни, тези разширени типове могат бързо да станат сложни. Стремете се към яснота и поддръжка.
• Тествайте старателно: Уверете се, че вашите дефиниции на типове се държат както се очаква, като пишете изчерпателни модулни тестове.
• Документирайте своя код: Ясно документирайте целта и поведението на вашите разширени типове, за да подобрите четимостта на кода.
• Обмислете производителността: Прекомерната употреба на разширени типове може да повлияе на времето за компилация. Профилирайте своя код и оптимизирайте, където е необходимо.