TypeScript: Typen aus Typen erstellen

Hallo zusammen, zukünftige Meisterinnen und Meister von TypeScript! Ich bin sehr erfreut, dass ich euer Guide auf dieser aufregenden Reise durch die Welt der TypeScript-Typen sein darf. Als Informatiklehrer mit jahrelanger Erfahrung habe ich selbst erlebt, wie das Verständnis von Typen einen Anfänger in einen Codewizard verwandeln kann. Also, lasst uns gemeinsam dieses Abenteuer beginnen!

Union-Typen

Stellen Sie sich vor, Sie sind in einem Eiscreme-Café und können zwischen Schokolade oder Vanille wählen. In TypeScript nennen wir diese Art von Wahl einen "Union-Typ". Es ist so, als ob man sagt: "Ich möchte das eine oder das andere."

Lassen Sie uns in den Code eintauchen:

type Flavor = "chocolate" | "vanilla";

let myIceCream: Flavor;
myIceCream = "chocolate"; // Das ist in Ordnung
myIceCream = "strawberry"; // Fehler! Der Typ '"strawberry"' ist nicht zuweisbar an den Typ 'Flavor'.

In diesem Beispiel ist Flavor ein Union-Typ, der entweder "chocolate" oder "vanilla" sein kann. Wenn wir versuchen, "strawberry" zu myIceCream zuzuweisen, sagt TypeScript: "Warten Sie! Das steht nicht auf der Karte!"

Union-Typen sind super nützlich, wenn Sie die möglichen Werte einer Variablen einschränken möchten. Hier ist ein weiteres Beispiel:

type Answer = "yes" | "no" | "maybe";

function respondToQuestion(answer: Answer) {
if (answer === "yes") {
console.log("Großartig!");
} else if (answer === "no") {
console.log("Oh nein!");
} else {
console.log("Ich sehe, dass Sie sich nicht entscheiden können.");
}
}

respondToQuestion("yes"); // Funktioniert einwandfrei
respondToQuestion("perhaps"); // Fehler! Argument des Typs '"perhaps"' ist nicht zuweisbar an den Parameter-Typ 'Answer'.

Schnittpunkt-Typen

Nun sprechen wir über Schnittpunkt-Typen. Während Union-Typen "dies oder das" betreffen, geht es bei Schnittpunkt-Typen um "dies und das". Es ist so, als ob man bei einem Fast-Food-Restaurant ein Kombinationsgericht bestellt - man bekommt das Burger, die Pommes und den Drink.

Hier ist, wie es im Code aussieht:

type Name = {
firstName: string;
lastName: string;
};

type Age = {
age: number;
};

type Person = Name & Age;

let john: Person = {
firstName: "John",
lastName: "Doe",
age: 30
};

In diesem Beispiel ist Person ein Schnittpunkt-Typ, der Name und Age kombiniert. Es ist, als ob man sagt: "Ein Mensch muss einen Vornamen, einen Nachnamen und ein Alter haben."

Hier ist ein weiteres spaßiges Beispiel:

type Swimmer = {
swim: () => void;
};

type Flyer = {
fly: () => void;
};

type FlyingFish = Swimmer & Flyer;

let nemo: FlyingFish = {
swim: () => console.log("Schwimmen im Ozean"),
fly: () => console.log("Über die Wellen fliegen")
};

nemo.swim(); // Ausgabe: Schwimmen im Ozean
nemo.fly();  // Ausgabe: Über die Wellen fliegen

Utility-Typen

TypeScript bringt eine Reihe von Utility-Typen mit, die uns helfen, bestehende Typen zu manipulieren und zu transformieren. Sie sind wie das Schweizer Taschenmesser der Typen! Lassen Sie uns einige der am häufigsten verwendeten anschauen:

Partial

Partial<T> macht alle Eigenschaften eines Typs optional. Es ist so, als ob man sagt: "Ich will all diese, aber ich brauche sie nicht sofort."

interface Todo {
title: string;
description: string;
completed: boolean;
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
return { ...todo, ...fieldsToUpdate };
}

const myTodo = {
title: "TypeScript lernen",
description: "2 Stunden lernen",
completed: false
};

const updatedTodo = updateTodo(myTodo, {
description: "3 Stunden lernen"
});

console.log(updatedTodo);
// Ausgabe: { title: "TypeScript lernen", description: "3 Stunden lernen", completed: false }

Pick<T, K>

Pick<T, K> konstruiert einen Typ, indem es die Satz von Eigenschaften K aus T auswählt. Es ist, als ob man seine Lieblingsfrüchte aus einem Obstkorb挑选.

interface User {
id: number;
name: string;
email: string;
age: number;
}

type UserSummary = Pick<User, "id" | "name">;

const userSummary: UserSummary = {
id: 1,
name: "John Doe"
};

Omit<T, K>

Omit<T, K> konstruiert einen Typ, indem es alle Eigenschaften aus T auswählt und dann K entfernt. Es ist das Gegenteil von Pick.

interface Product {
id: number;
name: string;
price: number;
description: string;
}

type ProductPreview = Omit<Product, "description">;

const productPreview: ProductPreview = {
id: 1,
name: "Coole Gadgets",
price: 99.99
};

Hier ist eine Tabelle, die diese Utility-Typen zusammenfasst:

Utility-Typ	Beschreibung
Partial	Macht alle Eigenschaften in T optional
Pick<T, K>	Konstruiert einen Typ, indem es die Satz von Eigenschaften K aus T auswählt
Omit<T, K>	Konstruiert einen Typ, indem es alle Eigenschaften aus T auswählt und dann K entfernt

Typof-Typ-Operator

Der typeof Typ-Operator in TypeScript ermöglicht es uns, einen Typ basierend auf der Form eines vorhandenen Wertes zu erstellen. Es ist, als ob man eine Form eines Objekts nimmt, um mehr Objekte mit der gleichen Form zu erstellen.

Schauen wir uns ein Beispiel an:

const user = {
name: "John",
age: 30,
location: "New York"
};

type User = typeof user;

const anotherUser: User = {
name: "Jane",
age: 25,
location: "London"
};

In diesem Beispiel verwenden wir typeof user, um einen neuen Typ User zu erstellen, der der Form unseres user-Objekts entspricht. Dies ist unglaublich nützlich, wenn Sie sicherstellen möchten, dass mehrere Objekte die gleiche Struktur haben.

Hier ist ein weiteres Beispiel, bei dem typeof nützlich ist:

const colors = ["red", "green", "blue"] as const;
type Color = typeof colors[number];

let myColor: Color = "red"; // OK
myColor = "yellow"; // Fehler: Der Typ '"yellow"' ist nicht zuweisbar an den Typ '"red" | "green" | "blue"'.

In diesem Fall verwenden wir typeof zusammen mit indizierten Zugriffs-Typen, um einen Union-Typ aus einem Array von Konstanten zu erstellen.

Und da haben Sie es, Leute! Wir haben die Welt der TypeScript-Typen bereist und neue Typen aus bestehenden erstellt. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, diese Konzepte in Ihren eigenen Projekten auszuprobieren. Frohes Coden und möge die Typen stets zu eurer Gunst stehen!

Credits: Image by storyset