TypeScripti täiustatud tüübid: malli sõnasõnaliste ja tingimuslike tüüpide valdamine

Rahvusvaheline näide: erinevate kuupäevavormingute käsitlemine

Maailma eri piirkondades kasutatakse erinevaid kuupäevavorminguid. Saate neid variatsioone käsitleda tingimuslike tüüpidega.

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

See näide kasutab tingimuslikke tüüpe, et määratleda erinevaid kuupäeva parsimise funktsioone vastavalt määratud kuupäeva vormingule. Tüüp ParseDate tagab, et tagastatud objektil on õiged omadused vormingu põhjal.

Malli sõnasõnaliste ja tingimuslike tüüpide kombineerimine

Tõeline jõud tuleb siis, kui kombineerite malli sõnasõnalisi tüüpe ja tingimuslikke tüüpe. See võimaldab uskumatult võimsaid tüüpide manipuleerimisi.

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`

Parimad tavad ja kaalutlused

• Hoidke see lihtsana: kuigi võimsad, võivad need täiustatud tüübid kiiresti keerukaks muutuda. Püüdke selguse ja hooldatavuse poole.
• Testige põhjalikult: veenduge, et teie tüübi määratlused käituksid ootuspäraselt, kirjutades põhjalikke ühikute testid.
• Dokumenteerige oma koodi: dokumenteerige selgelt oma täiustatud tüüpide eesmärk ja käitumine, et parandada koodi loetavust.
• Arvestage jõudlusega: täiustatud tüüpide liigne kasutamine võib mõjutada kompileerimisaega. Profileerige oma koodi ja optimeerige vajadusel.