Einschränkung anhand des Diskriminators
Lassen Sie TypeScript Varianten in switch-Anweisungen einschränken.
Einschränkung anhand des Diskriminators ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Anhand der Diskriminante eingrenzen
Sobald Sie die Diskriminante überprüfen, grenzt TypeScript die Union auf das passende Mitglied ein und gibt dessen spezifische Felder frei. Das ist der entscheidende Vorteil dieses Musters.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape) {
if (s.kind === "circle") return Math.PI * s.radius ** 2;
return s.side ** 2;
}
console.log(area({ kind: "circle", radius: 2 }).toFixed(2));Eine Switch-Anweisung für die Diskriminante verwenden
Eine switch-Anweisung über die Diskriminante ist die übersichtlichste Möglichkeit, jede Variante zu verarbeiten. Innerhalb jedes case wird der Typ automatisch eingegrenzt.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.radius ** 2;
case "square": return s.side ** 2;
}
}
console.log(area({ kind: "square", side: 5 }));Mitgliedsspezifische Felder pro Fall
Im Fall "circle" ist s.radius verfügbar, s.side jedoch nicht. TypeScript weiß genau, in welchem Mitglied Sie sich befinden.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function describe(s: Shape) {
switch (s.kind) {
case "circle": return "r=" + s.radius;
case "square": return "side=" + s.side;
}
}
console.log(describe({ kind: "circle", radius: 9 }));Eingrenzung mit if
Sie benötigen keine Switch-Anweisung. Ein einfaches if, das die Diskriminante vergleicht, grenzt den Typ genauso effektiv ein.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function perimeter(s: Shape): number {
if (s.kind === "circle") {
return 2 * Math.PI * s.radius;
}
return 4 * s.side;
}
console.log(perimeter({ kind: "square", side: 3 }));Der Zugriff auf das falsche Feld schlägt fehl
Vor der Eingrenzung können Sie nicht auf ein mitgliedsspezifisches Feld zugreifen. TypeScript meldet einen Fehler, weil die Eigenschaft nicht bei jedem Mitglied existiert.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function broken(s: Shape) {
// Error: radius does not exist on Square
// return s.radius;
return s.kind;
}
console.log(broken({ kind: "square", side: 1 }));Eingrenzung mit booleschen Diskriminanten
Bei einer Union { ok: true } | { ok: false } grenzt die Prüfung if (r.ok) den Typ auf das Erfolgsmitglied ein.
type Result =
| { ok: true; data: string }
| { ok: false; error: string };
function handle(r: Result): string {
if (r.ok) return "Data: " + r.data;
return "Error: " + r.error;
}
console.log(handle({ ok: false, error: "boom" }));Eingrenzung durch vorzeitige Rückgabe
Wenn Sie bei einer Variante vorzeitig zurückgeben, wird der verbleibende Code auf die anderen Varianten eingegrenzt. So können Sie Fälle nacheinander übersichtlich abarbeiten.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function label(s: Shape): string {
if (s.kind === "circle") return "circle";
// s is now narrowed to Square here
return "square with side " + s.side;
}
console.log(label({ kind: "square", side: 8 }));Mit anderen Bedingungen kombinieren
Sie können die Prüfung der Diskriminante mit weiterer Logik kombinieren. TypeScript behält die Eingrenzung bei, solange die Bedingung für die Diskriminante in diesem Zweig wahr ist.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function bigCircle(s: Shape): boolean {
return s.kind === "circle" && s.radius > 100;
}
console.log(bigCircle({ kind: "circle", radius: 150 }));Eingrenzung in Array-Filtern
Die Eingrenzung funktioniert auch innerhalb von Callbacks. Hier wird jede Form einzeln geprüft, während wir sie durchlaufen.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const shapes: Shape[] = [
{ kind: "circle", radius: 1 },
{ kind: "square", side: 2 }
];
shapes.forEach(s => {
if (s.kind === "circle") console.log("c", s.radius);
else console.log("s", s.side);
});Typsichere Rückgaben aus Switch-Anweisungen
Wenn eine Switch-Anweisung jeden Fall behandelt und einen Wert zurückgibt, leitet TypeScript aus der Union aller Fallergebnisse einen präzisen Rückgabetyp ab.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function tag(s: Shape) {
switch (s.kind) {
case "circle": return s.radius;
case "square": return s.side;
}
}
console.log(tag({ kind: "circle", radius: 4 }));Die Eingrenzung zusammenführen
Ob Sie switch oder if verwenden: Die Prüfung der Diskriminante ermöglicht den sicheren Zugriff auf die Felder eines Mitglieds. Als Nächstes stellen wir sicher, dass jeder Fall behandelt wird.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape): number {
return s.kind === "circle" ? Math.PI * s.radius ** 2 : s.side ** 2;
}
console.log(Math.round(area({ kind: "circle", radius: 10 })));Kurze Überprüfung: Eingrenzung
Testen Sie Ihr Verständnis der Eingrenzung anhand der Diskriminante.
Zusammenfassung: Anhand der Diskriminante eingrenzen
Sie haben gesehen, dass die Prüfung der Diskriminante mit switch oder if die Union auf ein einzelnes Mitglied eingrenzt und nur dessen Felder freigibt. Vorzeitige Rückgaben und kombinierte Bedingungen erhalten die Eingrenzung ebenfalls.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const s: Shape = { kind: "square", side: 7 };
console.log(s.kind === "square" ? s.side : 0);Häufig gestellte Fragen
Ist die Lektion „Einschränkung anhand des Diskriminators“ kostenlos?
Ja — der vollständige Text von „Einschränkung anhand des Diskriminators“ 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 „Einschränkung anhand des Diskriminators“?
Lassen Sie TypeScript Varianten in switch-Anweisungen einschränken. 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 2 von 4.
Wie lange dauert die Lektion „Einschränkung anhand des Diskriminators“?
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.
Alle Lektionen in diesem Kurs
- Diskriminierte Unions erstellen
- Einschränkung anhand des Diskriminators
- Vollständigkeitsprüfung mit never
- Zustandsautomaten modellieren