Typwächter
Arbeiten Sie mithilfe von Typwächtern sicher mit unknown- oder any-Typen
Typwächter ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Einführung in Type Guards
Type Guards
Willkommen zur nächsten Lektion! In dieser Lektion lernen Sie Type Guards kennen, eine leistungsstarke Funktion in TypeScript, mit der Sie Typen zur Laufzeit eingrenzen können. Type Guards sorgen dafür, dass Ihr Code typsicher ist und Fehler vermeidet. Legen wir los!

Was sind Type Guards?
Ein Type Guard ist eine Funktion oder Konstruktion, die den Typ einer Variablen zur Laufzeit bestimmt. Dadurch kann TypeScript den Typ einer Variablen innerhalb eines bestimmten Codeblocks eingrenzen.
Beispiel:
Aufgabe: Schreiben Sie eine Funktion, die mithilfe eines Type Guards prüft, ob ein Wert eine Zahl ist.
function isString(value: unknown): boolean {
return typeof value === "string";
}
function printLength(value: unknown): void {
if (isString(value)) {
console.log(value.length);
// TypeScript knows 'value' is a string here
} else {
console.log("Value is not a string");
}
}
printLength("Hello");
// Output: 5
printLength(42);
// Output: Value is not a string
typeof für primitive Werte verwenden
Mit dem Operator typeof können Sie den Typ primitiver Werte wie Zeichenketten, Zahlen und boolescher Werte prüfen.
Beispiel:
Aufgabe: Verwenden Sie typeof, um in einer Funktion zwischen einer Zeichenkette und einer Zahl zu unterscheiden.
function printValue(value: string | number): void {
if (typeof value === "string") {
console.log(`String value: ${value}`);
} else {
console.log(`Number value: ${value}`);
}
}
printValue("Hello");
// Output: String value: Hello
printValue(42);
// Output: Number value: 42
instanceof für Klassen verwenden
Der Operator instanceof prüft, ob ein Objekt eine Instanz einer bestimmten Klasse ist. Beispiel:
Aufgabe: Verwenden Sie instanceof, um in einer Funktion verschiedene Klasseninstanzen zu verarbeiten.
class Dog {
bark(): void {
console.log("Woof!");
}
}
class Cat {
meow(): void {
console.log("Meow!");
}
}
function makeSound(animal: Dog | Cat): void {
if (animal instanceof Dog) {
animal.bark();
} else {
animal.meow();
}
}
let dog = new Dog();
let cat = new Cat();
makeSound(dog);
// Output: Woof!
makeSound(cat);
// Output: Meow!
Benutzerdefinierte Type Guards verwenden
Sie können benutzerdefinierte Type-Guard-Funktionen erstellen, indem Sie den Rückgabetyp value is Type verwenden. Beispiel:
interface Car {
make: string;
model: string;
}
interface Bike {
brand: string;
type: string;
}
function isCar(vehicle: Car | Bike): vehicle is Car {
return (vehicle as Car).make !== undefined;
}
function printVehicle(vehicle: Car | Bike): void {
if (isCar(vehicle)) {
console.log(`Car: ${vehicle.make} ${vehicle.model}`);
} else {
console.log(`Bike: ${vehicle.brand} ${vehicle.type}`);
}
}
let car: Car = { make: "Toyota", model: "Corolla" };
let bike: Bike = { brand: "Yamaha", type: "Sport" };
printVehicle(car);
// Output: Car: Toyota Corolla
printVehicle(bike);
// Output: Bike: Yamaha Sport
Diskriminierte Unions
Diskriminierte Unions verwenden eine gemeinsame Eigenschaft, um zwischen Typen zu unterscheiden. Beispiel:
interface Circle {
kind: "circle";
radius: number;
}
interface Rectangle {
kind: "rectangle";
width: number;
height: number;
}
type Shape = Circle | Rectangle;
function calculateArea(shape: Shape): number {
if (shape.kind === "circle") {
return Math.PI * shape.radius ** 2;
} else {
return shape.width * shape.height;
}
}
let circle: Circle = { kind: "circle", radius: 5 };
let rectangle: Rectangle = { kind: "rectangle", width: 10, height: 20 };
console.log(calculateArea(circle));
// Output: 78.53981633974483
console.log(calculateArea(rectangle));
// Output: 200
Vollständigkeitsprüfung
Eine Vollständigkeitsprüfung stellt sicher, dass alle möglichen Fälle einer diskriminierten Union behandelt werden. Beispiel:
function getShapeInfo(shape: Shape): string {
switch (shape.kind) {
case "circle":
return `Circle with radius ${shape.radius}`;
case "rectangle":
return `Rectangle with dimensions ${shape.width}x${shape.height}`;
default:
// This line ensures all cases are handled
const _exhaustiveCheck: never = shape;
return _exhaustiveCheck;
}
}
Häufige Fehler
Hier sind einige häufige Fehler bei der Verwendung von Type Guards:
- Nicht alle Fälle eines Union-Typs zu berücksichtigen.
- In nicht allen Zweigen einer bedingten Logik einen Type Guard zu verwenden.
aszu missbrauchen, um Typen ohne geeignete Prüfungen umzuwandeln.
Tipp: Verwenden Sie immer Type Guards, um Typen einzugrenzen, bevor Sie auf deren spezifische Eigenschaften oder Methoden zugreifen!
Sehr gut!
Herzlichen Glückwunsch! Sie haben gelernt, wie Sie Type Guards in TypeScript verwenden, um Typen zur Laufzeit einzugrenzen und Typsicherheit zu gewährleisten. Type Guards sind unverzichtbar, wenn Sie komplexe Union-Typen verarbeiten und robusten, fehlerfreien Code erstellen möchten. In der nächsten Lektion befassen wir uns mit fortgeschrittenen gemappten Typen. Programmieren wir weiter!

Lerne TypeScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 101
- Lektionen
- 352
Häufig gestellte Fragen
Ist die Lektion „Typwächter“ kostenlos?
Ja — der vollständige Text von „Typwächter“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Typwächter“?
Arbeiten Sie mithilfe von Typwächtern sicher mit unknown- oder any-Typen Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um TypeScript Academy zu starten?
Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Typwächter“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.