TypeScript - Template Literal Types

Hallo da, zukünftige Codingsuperstars! Heute machen wir uns auf eine aufregende Reise in die Welt von TypeScript und erkunden eine faszinierende Funktion namens Template Literal Types. Keine Sorge, wenn du neu im Programmieren bist – ich werde dich schrittweise durchführen, genau wie ich es über die Jahre mit unzähligen Schülern gemacht habe. Also hol dir dein Lieblingsgetränk, setze dich bequem hin, und tauchen wir ein!

Was sind Template Literal Types?

Bevor wir ins Detail gehen, lassen Sie uns verstehen, was Template Literal Types sind. Stell dir vor, du erstellst eine Grußkarte. Du hast eine grundlegende Vorlage, aber du möchtest sie mit verschiedenen Namen und Nachrichten personalisieren. Genau das machen Template Literal Types in TypeScript – sie erlauben es uns, flexible, wiederverwendbare Typdefinitionen zu erstellen, die sich basierend darauf, was wir eingeben, ändern können.

Syntax

Die Syntax für Template Literal Types mag initially etwas seltsam erscheinen, aber ich verspreche, es ist nicht so kompliziert, wie es aussieht. Hier ist die grundlegende Struktur:

type TemplateLiteralType = `prefix ${SomeType} suffix`;

Lassen Sie uns das auseinandernehmen:

• type ist ein Schlüsselwort in TypeScript, das wir verwenden, um einen neuen Typ zu definieren.
• TemplateLiteralType ist der Name, den wir unserem neuen Typ geben (du kannst jeden Namen wählen, den du magst).
• Die Backticks (`) werden verwendet, um unsere Vorlage einzuschließen.
• ${SomeType} ist ein Platzhalter, an dem wir einen anderen Typ einfügen können.
• prefix und suffix sind optionaler Text, der immer Teil unseres Typs sein wird.

Denke daran wie ein Mad Libs-Spiel, bei dem ${SomeType} die Leerstelle ist, die wir ausfüllen, um verschiedene Variationen zu erstellen.

Beispiele

Nun schauen wir uns einige Beispiele an, um zu sehen, wie Template Literal Types in der Praxis funktionieren. Ich werde viele Codebeispiele geben und jedes einzelne gründlich erklären.

Beispiel 1: Grundlegende Verwendung

type Greeting = `Hello, ${string}!`;

let myGreeting: Greeting = "Hello, World!";  // Dies ist gültig
let invalidGreeting: Greeting = "Hi there!"; // Dies verursacht einen Fehler

In diesem Beispiel haben wir einen Greeting-Typ erstellt, der immer mit "Hello, " beginnt und mit "!" endet. Der Teil ${string} bedeutet, dass wir beliebigen Text dazwischen setzen können. Es ist wie eine Grußkartenvorlage, bei der du nur den Namen ändern kannst.

Beispiel 2: Kombination von String Literals

type Color = "red" | "blue" | "green";
type Size = "small" | "medium" | "large";

type TShirt = `${Size}-${Color}`;

let myShirt: TShirt = "medium-blue";  // Dies ist gültig
let invalidShirt: TShirt = "tiny-yellow";  // Dies verursacht einen Fehler

Hier erstellen wir einen TShirt-Typ, indem wir zwei andere Typen kombinieren: Size und Color. Dies ermöglicht es uns, gültige Kombinationen wie "small-red" oder "large-green" zu erstellen, aber verhindert ungültige wie "tiny-yellow".

Beispiel 3: Verwendung von Zahlen

type Coordinate = `${number},${number}`;

let point: Coordinate = "10,20";  // Dies ist gültig
let invalidPoint: Coordinate = "10,20,30";  // Dies verursacht einen Fehler

In diesem Beispiel verwenden wir number anstelle von string. Dies erstellt einen Typ, der eine 2D-Koordinate darstellt. Es müssen zwei Zahlen durch ein Komma getrennt sein.

Beispiel 4: Komplexe Vorlagen

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type ApiEndpoint = `/${string}`;

type ApiRoute = `${HttpMethod} ${ApiEndpoint}`;

let validRoute: ApiRoute = "GET /users";
let anotherValidRoute: ApiRoute = "POST /update-profile";
let invalidRoute: ApiRoute = "PATCH /items";  // Dies verursacht einen Fehler

Dieses Beispiel zeigt, wie wir komplexere Typen erstellen können. Wir definieren einen ApiRoute-Typ, der eine HTTP-Methode mit einem Endpunkt kombiniert. Dies stellt sicher, dass unsere API-Routen immer ein bestimmtes Format befolgen.

Beispiel 5: Groß- und Kleinschreibmodifikatoren

type Greeting = "hello" | "hi" | "hey";
type ShoutingGreeting = Uppercase<Greeting>;
type WhisperingGreeting = Lowercase<Greeting>;

let loud: ShoutingGreeting = "HELLO";  // Dies ist gültig
let soft: WhisperingGreeting = "hi";   // Dies ist gültig
let invalid: ShoutingGreeting = "Hey"; // Dies verursacht einen Fehler

TypeScript bietet auch Hilfstypen wie Uppercase und Lowercase, die wir mit unseren Template Literal Types verwenden können. Dieses Beispiel zeigt, wie wir neue Typen erstellen können, die die Groß- oder Kleinschreibweise bestehender Typen haben.

Methodenübersicht

Hier ist eine Tabelle, die die wichtigsten Methoden und Hilfsmittel zusammenfasst, die wir besprochen haben:

Methode/Hilfsmittel	Beschreibung	Beispiel
Grundlegende Vorlage	Erstellen eines Typs mit festem Präfix/Suffix und einem variablen Teil	type Greeting = 'Hello, ${string}!'
Union-Typen	Kombination mehrerer String-Literal-Typen	type Color = "red" | "blue" | "green"
Großschreibung	Konvertiert einen String-Literal-Typ in Großschreibung	type Upper = Uppercase<"hello">
Kleinschreibung	Konvertiert einen String-Literal-Typ in Kleinschreibung	type Lower = Lowercase<"HELLO">

Schlussfolgerung

Und da hast du es, meine lieben Schüler! Wir haben die wundervolle Welt der Template Literal Types in TypeScript erkundet. Von der grundlegenden Verwendung bis zu komplexeren Beispielen hast du gesehen, wie diese Funktion uns helfen kann, präzisere und flexiblere Typdefinitionen zu erstellen.

Denke daran, wie beim Erlernen jeder neuen Fähigkeit, erfordert das Beherrschen von Template Literal Types Übung. Lass dich nicht entmutigen, wenn es nicht sofort klappt – ich habe unzählige Schüler gesehen, die起初 struggle, bis sie den "aha!"-Moment haben.续继尝试，自己创建类型，最重要的是，享受其中的乐趣!

In meinen Jahren des Unterrichtens habe ich festgestellt, dass die Schüler, die den Lernprozess genießen, diejenigen sind, die am besten abschneiden. Also denke an TypeScript als eine mächtige Werkzeug in deinem Coding-Werkzeugkasten, und Template Literal Types als die Schweizer Army Knife darin – vielseitig, präzise und unglaublich nützlich, wenn du weißt, wie man sie einsetzt.

Nun, geh und erschaffe großartige Dinge mit deinem neu erworbenen Wissen. Und erinner daran, in der Welt des Programmierens ist die einzige Grenze deine Vorstellungskraft (und vielleicht manchmal dein Compiler, aber das ist eine andere Geschichte). Viel Spaß beim Coden!

Credits: Image by storyset