TypeScript-Template-Literal-Typen

Template-Literal-Typen basieren auf String-Literal-Typen und unterstützen das Generieren neuer String-Typen durch Interpolation.

Dies ermöglicht es TypeScript, eine präzisere Typprüfung von Strings durchzuführen, geeignet für Szenarien wie Ereignisnamen, Pfade und Klassennamen.

SVG-Diagramm: Template-Literal-Typen Background Title How Template Literal Types Work Input Type Input Type type Event = "click" | "focus" type Method = "get" | "post" Arrow Template Template Literal Template Literal Type type Name = `on${Capitalize}` type Path = `${Method}:/${string}` Arrow Output Type Output Type "onClick" "onFocus" "get:/..." Lower Half: Built-in Utility Types Built-in Utility Types Uppercase "hello" → "HELLO" Lowercase "HELLO" → "hello" Capitalize "hello" → "Hello" Uncapitalize "Hello" → "hello" Arrow Markers

Warum brauchen wir Template-Literal-Typen

In der Entwicklung müssen wir oft formatierte Strings verarbeiten, wie z. B. Ereignisnamen (onClick), API-Pfade (get:/users), CSS-Klassennamen (btn-primary-md) und so weiter.

Der einfache String-Typ kann diese Formate nicht präzise beschreiben, aber Template-Literal-Typen ermöglichen es uns, die Typen dieser Strings präzise zu definieren.

Dies erhöht die Typsicherheit von TypeScript erheblich und reduziert Laufzeitfehler.

Konzepterklärung:Template-Literal-Typen verwenden Backticks (`` ` ``) und${}Interpolationssyntax, um String-Typen zu definieren, ähnlich wie JavaScript-Template-Strings, aber auf Typebene verwendet.

Grundlegende Syntax

Template-Literal-Typen verwenden Backticks und Interpolation, um Typen zu definieren.

Beispiel

// Definiere einen grundlegenden String-Literal-Typ
type World = "world";

// Verwende einen Template-Literal-Typ
// `Hello ${World}` ist äquivalent zu "Hello world"
type Greeting = `Hello ${World}`;

// Es können nur Strings zugewiesen werden, die der Typdefinition entsprechen
var greeting: Greeting = "Hello world";
console.log("Greeting: " + greeting);

Ausgabe:

问候: Hello world

Erklärung:Template-Literal-Typen ersetzen die Interpolationsposition durch die tatsächliche Zeichenkette, wodurch ein neuer Literaltyp erzeugt wird.

Integrierte Utility-Typen

TypeScript bietet vier integrierte Utility-Typen für die Handhabung der Groß-/Kleinschreibung von Zeichenketten.

Beispiel

// Uppercase: Wandelt eine Zeichenkette in Großbuchstaben um
type UpperHello = Uppercase<"hello">;  // "HELLO"

// Lowercase: Wandelt eine Zeichenkette in Kleinbuchstaben um
type LowerHELLO = Lowercase<"HELLO">;  // "hello"

// Capitalize: Schreibt den ersten Buchstaben einer Zeichenkette groß
type CapitalizedHello = Capitalize<"hello">;  // "Hello"

// Uncapitalize: Schreibt den ersten Buchstaben einer Zeichenkette klein
type UncapitalizedHello = Uncapitalize<"Hello">;  // "hello"

console.log("Uppercase: " + UpperHello);
console.log("Lowercase: " + LowerHELLO);
console.log("Capitalize: " + CapitalizedHello);
console.log("Uncapitalize: " + UncapitalizedHello);

Ausgabe:

Uppercase: HELLO
Lowercase: hello
Capitalize: Hello
Uncapitalize: hello

Anwendungsfälle:Diese Utility-Typen sind sehr nützlich in Szenarien, die eine einheitliche Formatierung erfordern, wie z. B. Ereignisnamen und Methodennamen.

Ereignistypen

Template-Literal-Typen können verwendet werden, um die Typen von Ereignisnamen präzise zu definieren.

Beispiel

// Ereignisnamens-Typen erstellen
// `on${Capitalize<string>}` generiert Zeichenfolgen, die mit "on" beginnen und deren erster Buchstabe großgeschrieben ist
type EventName = `on${Capitalize<string>}`;
// `handle${Capitalize<string>}` generiert Zeichenfolgen, die mit "handle" beginnen und deren erster Buchstabe großgeschrieben ist
type Handler = `handle${Capitalize<string>}`;

// Es können nur Zeichenfolgen zugewiesen werden, die dem Format entsprechen
var clickEvent: EventName = "onClick";
var focusEvent: EventName = "onFocus";
var handler: Handler = "handleSubmit";

console.log("Event: " + clickEvent);
console.log("Handler: " + handler);

Ausgabe:

事件: onClick
处理器: handleSubmit

Vorteile:Mit Template-Literal-Typen werden falsche Formate wie "onclick" (kleingeschrieben) von TypeScript abgelehnt.

Pfadtypen

Template-Literal-Typen können verwendet werden, um die Typen von API-Pfaden präzise zu definieren.

Beispiel

// HTTP-Methodentypen definieren
type HttpMethod = "get" | "post" | "put" | "delete";

// Pfadformat definieren
type ApiEndpoint = `/${string}`;  // Strings, die mit einem Schrägstrich beginnen

// Zu einem vollständigen API-Pfadtyp kombinieren
type ApiPath = `${HttpMethod}${ApiEndpoint}`;

// Es können nur Pfade zugewiesen werden, die dem Format entsprechen
var getUsers: ApiPath = "/get/users";
var createUser: ApiPath = "/post/users";

console.log("Pfad: " + getUsers);
console.log("Pfad: " + createUser);

Ausgabe:

路径: /get/users
路径: /post/users

Typsicherheit:Pfade wie "/users" (ohne Methodenpräfix) werden von TypeScript als Fehler gemeldet.

Komplexes Beispiel

Template-Literal-Typen können mehrere Union-Typen kombinieren, um alle möglichen Kombinationen zu erzeugen.

Beispiel

// Template-Typ mit Zahlen
// ${number} entspricht jeder Zahl
type Row = `row${number}`;
type Row10 = Row;  // row0, row1, row2... bis row9...

// Mehrere Typen kombinieren
type Variant = "primary" | "secondary";
type Size = "sm" | "md" | "lg";
// Dies erzeugt 6 Kombinationen: btn-primary-sm, btn-primary-md, btn-primary-lg...
type ClassName = `btn-${Variant}-${Size}`;

// Man kann nur eine der 6 generierten Kombinationen zuweisen
var className: ClassName = "btn-primary-md";
console.log("Klassenname: " + className);

Ausgabe:

类名: btn-primary-md

Kombinationsexplosion:Template-Literal-Typen erweitern automatisch alle Kombinationen. Wenn die Union-Typen viele Optionen haben, kann der generierte Typ sehr groß werden.

Benutzerdefinierte Utility-Typen

Du kannst deine eigenen Template-Literal-Utility-Typen erstellen.

Beispiel

// Hilfstyp zum Hinzufügen eines Präfixes
// T ist ein beliebiger String, P ist das hinzuzufügende Präfix
type Prefix<T extends string, P extends string> = `${P}${Capitalize<T>}`;

// Hilfstyp zum Hinzufügen eines Suffixes
// T ist ein beliebiger String, S ist das hinzuzufügende Suffix
type Suffix<T extends string, S extends string> = `${Capitalize<T>}${S}`;

// Benutzerdefinierte Hilfstypen verwenden
type HandlerName = Prefix<"click", "on">;
type ButtonId = Suffix<"submit", "Btn">;

var handler: HandlerName = "onClick";
var id: ButtonId = "SubmitBtn";

console.log("Handler: " + handler);
console.log("ID: " + id);

Ausgabe:

处理器: onClick
ID: SubmitBtn

Generische Templates:Template-Literal-Typen können mit Generics kombiniert werden, um wiederverwendbare Utility-Typen zu erstellen.

Hinweise

  • Interpolationstypen:In einem Template können die${}bestimmte Strings, Union-Typen, string, number usw. sein.
  • Anzahl der Kombinationen:Beim Kombinieren mehrerer Union-Typen kann der generierte Typ sehr groß werden
  • Umgang mit Groß-/Kleinschreibung:Verwenden Sie integrierte Utility-Typen, um die Groß-/Kleinschreibung von Strings zu handhaben

Best Practices:Die Verwendung von Template-Literal-Typen zur Handhabung von Strings mit festen Formaten wie Event-Namen, Pfaden und Klassennamen kann eine bessere Typsicherheit erreichen.

Zusammenfassung

Template-Literal-Typen sind Teil von TypeScripts leistungsfähigem Typsystem.

  • Template-Syntax:Verwenden Sie${T}Interpolation zum Erstellen von Typen
  • Integrierte Utilities:Uppercase、Lowercase、Capitalize、Uncapitalize
  • Anwendungsfälle:Event-Namen, API-Pfade, CSS-Klassennamen usw.
  • Anpassung:Erstellen Sie wiederverwendbare Utility-Typen

Empfehlung:Wenn formatierte Zeichenketten benötigt werden, verwenden Sie vorrangig Template-Literal-Typen, um Typprüfung zur Kompilierzeit zu erhalten.

Andere Erweiterungen