TypeScript išplėstiniai tipai: šabloninių literalių ir sąlyginių tipų įsisavinimas

Tarptautinis pavyzdys: skirtingų datos formatų apdorojimas

Skirtinguose pasaulio regionuose naudojami skirtingi datos formatai. Galite naudoti sąlyginius tipus, kad apdorotumėte šiuos skirtumus.

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

Šis pavyzdys naudoja sąlyginius tipus, kad apibrėžtų skirtingas datos analizavimo funkcijas pagal nurodytą datos formatą. ParseDate tipas užtikrina, kad grąžinamas objektas turėtų teisingas savybes, atsižvelgiant į formatą.

Šabloninių literalių ir sąlyginių tipų derinimas

Tikroji galia atsiskleidžia, kai derinate šabloninius literalų tipus ir sąlyginius tipus. Tai leidžia atlikti neįtikėtinai galingas tipų manipuliacijas.

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`

Geroji praktika ir aspektai

• Paprastumas: Nors ir galingi, šie išplėstiniai tipai gali greitai tapti sudėtingi. Siekite aiškumo ir lengvos priežiūros.
• Kruopštus testavimas: Užtikrinkite, kad jūsų tipų apibrėžimai veiktų kaip tikėtasi, rašydami išsamius vienetų testus (unit tests).
• Dokumentuokite savo kodą: Aiškiai dokumentuokite savo išplėstinių tipų paskirtį ir veikimą, kad pagerintumėte kodo skaitomumą.
• Atsižvelkite į našumą: Pernelyg gausus išplėstinių tipų naudojimas gali paveikti kompiliavimo laiką. Profiluokite savo kodą ir optimizuokite, kur reikia.