TypeScript Avancerede Typer: Mestring af Template Literal og Betingede Typer

Internationalt Eksempel: Håndtering af Forskellige Datoformater

Forskellige regioner i verden bruger forskellige datoformater. Du kan bruge betingede typer til at håndtere disse variationer.

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

Dette eksempel bruger betingede typer til at definere forskellige datoparsningsfunktioner baseret på det specificerede datoformat. Typen ParseDate sikrer, at det returnerede objekt har de korrekte egenskaber baseret på formatet.

Kombinering af Template Literal og Betingede Typer

Den virkelige styrke kommer, når du kombinerer template literal-typer og betingede typer. Dette giver mulighed for utrolig kraftfuld typemanipulation.

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`

Bedste Praksis og Overvejelser

• Hold det Simpelt: Selvom de er kraftfulde, kan disse avancerede typer hurtigt blive komplekse. Stræb efter klarhed og vedligeholdelighed.
• Test Grundigt: Sørg for, at dine typedefinitioner opfører sig som forventet ved at skrive omfattende enhedstests.
• Dokumenter Din Kode: Dokumenter tydeligt formålet og opførslen af dine avancerede typer for at forbedre kodens læsbarhed.
• Overvej Ydeevne: Overdreven brug af avancerede typer kan påvirke kompileringstiden. Profiler din kode og optimer, hvor det er nødvendigt.