Fortgeschrittene TypeScript-Typen: Template-Literal- und konditionale Typen meistern

Internationales Beispiel: Umgang mit verschiedenen Datumsformaten

Verschiedene Regionen der Welt verwenden unterschiedliche Datumsformate. Sie können konditionale Typen verwenden, um diese Variationen zu handhaben.

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 {
  // (Die Implementierung würde verschiedene Datumsformate behandeln)
  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"); // Typ: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Typ: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Typ: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Greife auf das Jahr zu, da wir wissen, dass es vorhanden sein wird

Dieses Beispiel verwendet konditionale Typen, um verschiedene Datums-Parsing-Funktionen basierend auf dem angegebenen Datumsformat zu definieren. Der Typ ParseDate stellt sicher, dass das zurückgegebene Objekt die korrekten Eigenschaften basierend auf dem Format hat.

Kombination von Template-Literal- und konditionalen Typen

Die wahre Stärke zeigt sich, wenn Sie Template-Literal-Typen und konditionale Typen kombinieren. Dies ermöglicht unglaublich leistungsstarke Typmanipulationen.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // Vereinfacht zur Demonstration
  : never;


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


//Beispielfunktion, die einen Typ entgegennimmt
function processEvent(event: T): ExtractEventPayload {
    //In einer echten Implementierung würden wir das Ereignis tatsächlich auslösen.
    console.log(`Processing event ${event}`);

    //In einer echten Implementierung würde die Payload vom Ereignistyp abhängen.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Beachten Sie, dass die Rückgabetypen sehr spezifisch sind:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//Wenn Sie andere Strings verwenden, erhalten Sie never:
// const someOtherEvent = processEvent("someOtherEvent"); // Typ ist `never`

Best Practices und Überlegungen

• Halten Sie es einfach: Obwohl leistungsstark, können diese fortgeschrittenen Typen schnell komplex werden. Streben Sie nach Klarheit und Wartbarkeit.
• Testen Sie gründlich: Stellen Sie sicher, dass Ihre Typdefinitionen sich wie erwartet verhalten, indem Sie umfassende Unit-Tests schreiben.
• Dokumentieren Sie Ihren Code: Dokumentieren Sie klar den Zweck und das Verhalten Ihrer fortgeschrittenen Typen, um die Lesbarkeit des Codes zu verbessern.
• Berücksichtigen Sie die Leistung: Die übermäßige Verwendung fortgeschrittener Typen kann die Kompilierungszeit beeinträchtigen. Profilieren Sie Ihren Code und optimieren Sie bei Bedarf.