Template-Literal-Typen: Zeichenketten-Musterabgleich und -Validierung in TypeScript

Das Typsystem von TypeScript entwickelt sich ständig weiter und bietet Entwicklern immer leistungsfähigere Werkzeuge, um komplexe Logik auszudrücken und Typsicherheit zu gewährleisten. Eine der interessantesten und vielseitigsten Funktionen, die in den letzten Versionen eingeführt wurden, sind Template-Literal-Typen. Diese Typen ermöglichen es Ihnen, Zeichenketten auf Typebene zu manipulieren und so einen fortgeschrittenen Zeichenketten-Musterabgleich und eine Validierung zu ermöglichen. Dies eröffnet eine ganz neue Welt von Möglichkeiten für die Erstellung robusterer und wartungsfreundlicherer Anwendungen.

Was sind Template-Literal-Typen?

Template-Literal-Typen sind eine Form von Typ, die durch die Kombination von String-Literal-Typen und Union-Typen konstruiert wird, ähnlich wie Template-Literale in JavaScript funktionieren. Anstatt jedoch Laufzeit-Strings zu erstellen, erzeugen sie neue Typen auf der Grundlage bestehender.

Hier ist ein grundlegendes Beispiel:

            type Greeting<T extends string> = `Hello, ${T}!`;

type MyGreeting = Greeting<"World">; // type MyGreeting = "Hello, World!"

            

              
                Copy
              
            
          

In diesem Beispiel ist `Greeting` ein Template-Literal-Typ, der einen String-Typ `T` als Eingabe nimmt und einen neuen Typ zurückgibt, der die Verkettung von "Hello, ", `T` und "!" ist.

Grundlegender Zeichenketten-Musterabgleich

Template-Literal-Typen können verwendet werden, um einen grundlegenden Zeichenketten-Musterabgleich durchzuführen. Dies ermöglicht es Ihnen, Typen zu erstellen, die nur dann gültig sind, wenn sie einem bestimmten Muster entsprechen.

Sie können beispielsweise einen Typ erstellen, der nur Zeichenketten akzeptiert, die mit "prefix-" beginnen:

            type PrefixedString<T extends string> = T extends `prefix-${string}` ? T : never;

type ValidPrefixedString = PrefixedString<"prefix-valid">; // type ValidPrefixedString = "prefix-valid"
type InvalidPrefixedString = PrefixedString<"invalid">; // type InvalidPrefixedString = never

            

              
                Copy
              
            
          

In diesem Beispiel verwendet `PrefixedString` einen bedingten Typ, um zu überprüfen, ob die Eingabezeichenkette `T` mit "prefix-" beginnt. Wenn dies der Fall ist, ist der Typ `T` selbst; andernfalls ist es `never`. `never` ist ein spezieller Typ in TypeScript, der den Typ von Werten darstellt, die niemals vorkommen, wodurch die ungültige Zeichenkette effektiv ausgeschlossen wird.

Extrahieren von Teilen einer Zeichenkette

Template-Literal-Typen können auch verwendet werden, um Teile einer Zeichenkette zu extrahieren. Dies ist besonders nützlich, wenn Sie Daten aus Zeichenketten parsen und in verschiedene Typen konvertieren müssen.

Angenommen, Sie haben eine Zeichenkette, die eine Koordinate im Format "x:10,y:20" darstellt. Sie können Template-Literal-Typen verwenden, um die x- und y-Werte zu extrahieren:

            type CoordinateString = `x:${number},y:${number}`;

type ExtractX<T extends CoordinateString> = T extends `x:${infer X},y:${number}` ? X : never;
type ExtractY<T extends CoordinateString> = T extends `x:${number},y:${infer Y}` ? Y : never;

type XValue = ExtractX<"x:10,y:20">; // type XValue = 10
type YValue = ExtractY<"x:10,y:20">; // type YValue = 20

            

              
                Copy
              
            
          

In diesem Beispiel verwenden `ExtractX` und `ExtractY` das Schlüsselwort `infer`, um die Teile der Zeichenkette zu erfassen, die dem Typ `number` entsprechen. `infer` ermöglicht es Ihnen, einen Typ aus einem Musterabgleich zu extrahieren. Die erfassten Typen werden dann als Rückgabetyp des bedingten Typs verwendet.

Fortgeschrittene Zeichenketten-Validierung

Template-Literal-Typen können mit anderen TypeScript-Funktionen, wie Union-Typen und bedingten Typen, kombiniert werden, um eine fortgeschrittene Zeichenketten-Validierung durchzuführen. Dies ermöglicht es Ihnen, Typen zu erstellen, die komplexe Regeln für die Struktur und den Inhalt von Zeichenketten erzwingen.

Sie können beispielsweise einen Typ erstellen, der ISO 8601-Datumszeichenketten validiert:

            type Year = `${number}${number}${number}${number}`;
type Month = `0${number}` | `10` | `11` | `12`;
type Day = `${0}${number}` | `${1 | 2}${number}` | `30` | `31`;

type ISODate = `${Year}-${Month}-${Day}`;

type ValidDate = ISODate extends "2023-10-27" ? true : false; // true
type InvalidDate = ISODate extends "2023-13-27" ? true : false; // false

function processDate(date: ISODate) {
  // Function logic here.  TypeScript enforces the ISODate format.
  return `Processing date: ${date}`;
}

console.log(processDate("2024-01-15")); // Works
//console.log(processDate("2024-1-15")); // TypeScript error: Argument of type '"2024-1-15"' is not assignable to parameter of type '`${number}${number}${number}${number}-${0}${number}-${0}${number}` | `${number}${number}${number}${number}-${0}${number}-${1}${number}` | ... 14 more ... | `${number}${number}${number}${number}-12-31`'.

            

              
                Copy
              
            
          

Hier werden `Year`, `Month` und `Day` mithilfe von Template-Literal-Typen definiert, um die gültigen Formate für jeden Teil des Datums darzustellen. `ISODate` kombiniert dann diese Typen, um einen Typ zu erstellen, der eine gültige ISO 8601-Datumszeichenkette darstellt. Das Beispiel zeigt auch, wie dieser Typ verwendet werden kann, um die Datenformatierung in einer Funktion durchzusetzen und zu verhindern, dass falsche Datumsformate übergeben werden. Dies verbessert die Code-Zuverlässigkeit und verhindert Laufzeitfehler, die durch ungültige Eingaben verursacht werden.

Anwendungsfälle in der Praxis

Template-Literal-Typen können in einer Vielzahl von realen Szenarien eingesetzt werden. Hier sind einige Beispiele:

• Formularvalidierung: Sie können Template-Literal-Typen verwenden, um das Format von Formulareingaben wie E-Mail-Adressen, Telefonnummern und Postleitzahlen zu validieren.
• API-Anfragevalidierung: Sie können Template-Literal-Typen verwenden, um die Struktur von API-Anfrage-Payloads zu validieren und sicherzustellen, dass sie dem erwarteten Format entsprechen. Zum Beispiel die Validierung eines Währungscodes (z.B. "USD", "EUR", "GBP").
• Konfigurationsdateiparser: Sie können Template-Literal-Typen verwenden, um Konfigurationsdateien zu parsen und Werte basierend auf bestimmten Mustern zu extrahieren. Ziehen Sie die Validierung von Dateipfaden in einem Konfigurationsobjekt in Betracht.
• Zeichenkettenbasierte Enums: Sie können zeichenkettenbasierte Enums mit Validierung mithilfe von Template-Literal-Typen erstellen.

Beispiel: Validierung von Währungscodes

Schauen wir uns ein detaillierteres Beispiel für die Validierung von Währungscodes an. Wir möchten sicherstellen, dass in unserer Anwendung nur gültige ISO 4217-Währungscodes verwendet werden. Diese Codes bestehen typischerweise aus drei Großbuchstaben.

            type CurrencyCode = `${Uppercase<string>}${Uppercase<string>}${Uppercase<string>}`;

function formatCurrency(amount: number, currency: CurrencyCode) {
  // Function logic to format currency based on the provided code.
  return `$${amount} ${currency}`;
}

console.log(formatCurrency(100, "USD")); // Works
//console.log(formatCurrency(100, "usd")); // TypeScript error: Argument of type '"usd"' is not assignable to parameter of type '`${Uppercase}${Uppercase}${Uppercase}`'.

//More precise example:
type ValidCurrencyCode = "USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD"; // Extend as needed

type StronglyTypedCurrencyCode = ValidCurrencyCode;

function formatCurrencyStronglyTyped(amount: number, currency: StronglyTypedCurrencyCode) {
    return `$${amount} ${currency}`;
}

console.log(formatCurrencyStronglyTyped(100, "EUR")); // Works
//console.log(formatCurrencyStronglyTyped(100, "CNY")); // TypeScript error: Argument of type '"CNY"' is not assignable to parameter of type '"USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD"'.

            

              
                Copy
              
            
          

Dieses Beispiel demonstriert, wie ein `CurrencyCode`-Typ erstellt wird, der nur Zeichenketten akzeptiert, die aus drei Großbuchstaben bestehen. Das zweite, stärker typisierte Beispiel zeigt, wie dies noch weiter auf eine vordefinierte Liste akzeptabler Währungen beschränkt werden kann.

Beispiel: Validierung von API-Endpunktpfaden

Ein weiterer Anwendungsfall ist die Validierung von API-Endpunktpfaden. Sie können einen Typ definieren, der eine gültige API-Endpunktstruktur darstellt und sicherstellt, dass Anfragen an die korrekten Pfade gestellt werden. Dies ist besonders nützlich in Microservices-Architekturen, wo mehrere Dienste unterschiedliche APIs bereitstellen könnten.

            type APIServiceName = "users" | "products" | "orders";
type APIEndpointPath = `/${APIServiceName}/${string}`;

function callAPI(path: APIEndpointPath) {
  // API call logic
  console.log(`Calling API: ${path}`);
}

callAPI("/users/123"); // Valid
callAPI("/products/details"); // Valid
//callAPI("/invalid/path"); // TypeScript error

// Even more specific:
type APIAction = "create" | "read" | "update" | "delete";
type APIEndpointPathSpecific = `/${APIServiceName}/${APIAction}`;

function callAPISpecific(path: APIEndpointPathSpecific) {
  // API call logic
  console.log(`Calling specific API: ${path}`);
}

callAPISpecific("/users/create"); // Valid
//callAPISpecific("/users/list"); // TypeScript error

            

              
                Copy
              
            
          

Dies ermöglicht es Ihnen, die Struktur von API-Endpunkten präziser zu definieren, Tippfehler zu vermeiden und die Konsistenz in Ihrer Anwendung zu gewährleisten. Dies ist ein grundlegendes Beispiel; komplexere Muster können erstellt werden, um Abfrageparameter und andere Teile der URL zu validieren.

Vorteile der Verwendung von Template-Literal-Typen

Die Verwendung von Template-Literal-Typen für den Zeichenketten-Musterabgleich und die Validierung bietet mehrere Vorteile:

• Verbesserte Typsicherheit: Template-Literal-Typen ermöglichen es Ihnen, strengere Typbeschränkungen für Zeichenketten durchzusetzen, wodurch das Risiko von Laufzeitfehlern reduziert wird.
• Erhöhte Code-Lesbarkeit: Template-Literal-Typen machen Ihren Code lesbarer, indem sie das erwartete Format von Zeichenketten klar ausdrücken.
• Erhöhte Wartbarkeit: Template-Literal-Typen machen Ihren Code wartbarer, indem sie eine einzige Quelle der Wahrheit für Zeichenkettenvalidierungsregeln bereitstellen.
• Bessere Entwicklererfahrung: Template-Literal-Typen bieten eine bessere Autovervollständigung und Fehlermeldungen, was die gesamte Entwicklererfahrung verbessert.

Einschränkungen

Obwohl Template-Literal-Typen leistungsstark sind, haben sie auch einige Einschränkungen:

• Komplexität: Template-Literal-Typen können komplex werden, insbesondere bei komplizierten Mustern. Es ist entscheidend, die Vorteile der Typsicherheit mit der Code-Wartbarkeit in Einklang zu bringen.
• Leistung: Template-Literal-Typen können die Kompilierungsleistung beeinträchtigen, insbesondere in großen Projekten. Dies liegt daran, dass TypeScript eine komplexere Typüberprüfung durchführen muss.
• Begrenzte Unterstützung für reguläre Ausdrücke: Obwohl Template-Literal-Typen den Musterabgleich ermöglichen, unterstützen sie nicht die vollständige Palette der Funktionen regulärer Ausdrücke. Für eine hochkomplexe Zeichenkettenvalidierung könnten neben diesen Typkonstrukten immer noch Laufzeit-Reguläre Ausdrücke für eine ordnungsgemäße Eingabebereinigung erforderlich sein.

Bewährte Praktiken

Hier sind einige bewährte Praktiken, die Sie bei der Verwendung von Template-Literal-Typen beachten sollten:

• Einfach beginnen: Beginnen Sie mit einfachen Mustern und erhöhen Sie die Komplexität bei Bedarf schrittweise.
• Aussagekräftige Namen verwenden: Verwenden Sie aussagekräftige Namen für Ihre Template-Literal-Typen, um die Code-Lesbarkeit zu verbessern.
• Typen dokumentieren: Dokumentieren Sie Ihre Template-Literal-Typen, um deren Zweck und Verwendung zu erläutern.
• Gründlich testen: Testen Sie Ihre Template-Literal-Typen gründlich, um sicherzustellen, dass sie wie erwartet funktionieren.
• Leistung berücksichtigen: Achten Sie auf die Auswirkungen von Template-Literal-Typen auf die Kompilierungsleistung und optimieren Sie Ihren Code entsprechend.

Fazit

Template-Literal-Typen sind eine leistungsstarke Funktion in TypeScript, die es Ihnen ermöglicht, fortgeschrittene Zeichenkettenmanipulation, Musterabgleich und Validierung auf Typebene durchzuführen. Durch die Verwendung von Template-Literal-Typen können Sie robustere, wartungsfreundlichere und typsichere Anwendungen erstellen. Obwohl sie einige Einschränkungen haben, überwiegen die Vorteile der Verwendung von Template-Literal-Typen oft die Nachteile, was sie zu einem wertvollen Werkzeug im Werkzeugkasten jedes TypeScript-Entwicklers macht. Da sich die TypeScript-Sprache ständig weiterentwickelt, wird das Verständnis und die Nutzung dieser erweiterten Typfunktionen entscheidend für den Aufbau hochwertiger Software sein. Denken Sie daran, die Komplexität mit der Lesbarkeit in Einklang zu bringen und immer gründliches Testen zu priorisieren.