TypeScript paplašinātie tipi: Veidņu literāļu un nosacījumu tipu meistarīga pārvaldīšana

Starptautisks piemērs: Dažādu datuma formātu apstrāde

Dažādos pasaules reģionos tiek izmantoti atšķirīgi datuma formāti. Jūs varat izmantot nosacījumu tipus, lai apstrādātu šīs variācijas.

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 {
  // (Implementācija apstrādātu dažādus datuma formātus)
  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"); // Tips: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Tips: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Tips: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Piekļūstiet gadam, zinot, ka tas tur būs

Šis piemērs izmanto nosacījumu tipus, lai definētu dažādas datuma parsēšanas funkcijas, pamatojoties uz norādīto datuma formātu. Tips ParseDate nodrošina, ka atgrieztajam objektam ir pareizie rekvizīti, pamatojoties uz formātu.

Veidņu literāļu un nosacījumu tipu apvienošana

Īstais spēks parādās, kad jūs apvienojat veidņu literāļu tipus un nosacījumu tipus. Tas ļauj veikt neticami jaudīgas tipu manipulācijas.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // Vienkāršots demonstrācijai
  : never;


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


//Piemēra funkcija, kas pieņem tipu
function processEvent(event: T): ExtractEventPayload {
    //Reālā implementācijā mēs faktiski nosūtītu notikumu.
    console.log(`Processing event ${event}`);

    //Reālā implementācijā lietderīgā slodze (payload) būtu atkarīga no notikuma tipa.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Ievērojiet, ka atgriešanas tipi ir ļoti specifiski:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//Ja izmantojat citas virknes, jūs saņemat `never`:
// const someOtherEvent = processEvent("someOtherEvent"); // Tips ir `never`

Labākā prakse un apsvērumi

• Saglabājiet vienkāršību: Lai gan šie paplašinātie tipi ir jaudīgi, tie var ātri kļūt sarežģīti. Centieties panākt skaidrību un uzturamību.
• Rūpīgi testējiet: Pārliecinieties, ka jūsu tipu definīcijas darbojas kā paredzēts, rakstot visaptverošus vienības testus.
• Dokumentējiet savu kodu: Skaidri dokumentējiet savu paplašināto tipu mērķi un darbību, lai uzlabotu koda lasāmību.
• Apsveriet veiktspēju: Pārmērīga paplašināto tipu izmantošana var ietekmēt kompilēšanas laiku. Profilējiet savu kodu un optimizējiet, kur nepieciešams.