Mechanismen von Type Widening und Narrowing
Lernen Sie, wie TypeScript Typen erweitert und wann Sie dies verhindern sollten.
Mechanismen von Type Widening und Narrowing ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Was ist Type Widening?
Type Widening bezeichnet den Fall, dass TypeScript einen allgemeineren Typ ableitet, als Sie angegeben haben. Die Zuweisung let x = "hello" wird zu string erweitert, nicht zum Literaltyp "hello".
let x = "hello"; // inferred: string, not "hello"
let y = 42; // inferred: number, not 42Widening mit let und const
Mit const deklarierte Variablen behalten ihren Literaltyp, da sie nicht neu zugewiesen werden können. let wird zum Basistyp erweitert.
const a = "world"; // type: "world"
let b = "world"; // type: stringWidening durch Typannotationen verhindern
Eine explizite Typannotation für eine let-Variable verhindert das Widening und legt den Literaltyp fest.
let direction: "left" | "right" = "left";
// direction = "up"; // Error: not assignableNarrowing mit typeof
TypeScript grenzt einen Union-Typ innerhalb von typeof-Prüfungen ein und stellt Ihnen innerhalb dieses Zweigs einen präzisen Typ bereit.
function format(val: string | number) {
if (typeof val === "string") {
return val.toUpperCase(); // val: string here
}
return val.toFixed(2); // val: number here
}Narrowing mit Gleichheitsprüfungen
Auch Gleichheitsprüfungen gegen Literalwerte grenzen den Typ innerhalb des Zweigs ein.
type Direction = "left" | "right" | "up";
function handle(dir: Direction) {
if (dir === "left") {
console.log("Going left"); // dir: "left"
}
}Kontrollflussanalyse
TypeScript verfolgt Zuweisungen im Kontrollfluss und grenzt den Typ nach jedem Zweig weiter ein.
function process(x: string | null) {
if (x === null) return;
// x is string here — TypeScript knows null is ruled out
console.log(x.length);
}Widening in Objekt-Literalen
Auch Eigenschaftswerte von Objekt-Literalen werden erweitert, sofern Sie nicht as const verwenden.
const config = { mode: "dark" };
// config.mode: string (widened)
const config2 = { mode: "dark" } as const;
// config2.mode: "dark" (literal)Freshness und Widening
Wenn Sie ein Objekt-Literal direkt einer typisierten Variable zuweisen, führt TypeScript eine Prüfung auf überschüssige Eigenschaften durch — sobald das Objekt jedoch zu einer benannten Variable erweitert wurde, findet diese Prüfung nicht mehr statt.
interface Options { timeout: number; }
const opts = { timeout: 3000, retry: true };
// No error — widened type, excess property check skipped
const o: Options = opts;Narrowing mit dem in-Operator
Der in-Operator grenzt Union-Typen von Objekten ein, indem er prüft, ob eine Eigenschaft vorhanden ist.
type Cat = { meow(): void };
type Dog = { bark(): void };
function speak(animal: Cat | Dog) {
if ("meow" in animal) animal.meow();
else animal.bark();
}Narrowing mit Assertion-Funktionen
Assertion-Funktionen verwenden Rückgabetypen mit asserts condition, um den Typ nach dem Aufruf einzugrenzen.
function assertString(val: unknown): asserts val is string {
if (typeof val !== "string") throw new Error("Expected string");
}
const x: unknown = "hi";
assertString(x);
x.toUpperCase(); // OK — narrowed to stringZusammenfassung: Widening und Narrowing
Widening erweitert abgeleitete Typen für mehr Flexibilität, während Narrowing einen allgemeinen Typ innerhalb eines bedingten Zweigs auf einen präzisen Typ verfeinert. Wenn Sie beides verstehen, können Sie sichereren TypeScript-Code schreiben.
Schnellüberprüfung
Welche Deklaration verhindert die Erweiterung zum Basistyp?
Das haben Sie gelernt
Sie verstehen nun Type Widening (wie TypeScript abgeleitete Typen erweitert) und Narrowing (wie bedingte Prüfungen präzise Typen erzeugen). Verwenden Sie as const, um Widening zu verhindern, und Kontrollflussprüfungen, um Unions sicher einzugrenzen.
Häufig gestellte Fragen
Ist die Lektion „Mechanismen von Type Widening und Narrowing“ kostenlos?
Ja — der vollständige Text von „Mechanismen von Type Widening und Narrowing“ 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 „Mechanismen von Type Widening und Narrowing“?
Lernen Sie, wie TypeScript Typen erweitert und wann Sie dies verhindern sollten. 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 1 von 4.
Wie lange dauert die Lektion „Mechanismen von Type Widening und Narrowing“?
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
- Mechanismen von Type Widening und Narrowing
- Kontextbezogene Typisierung: Ableitung aus dem Kontext
- Freshness und Prüfung überschüssiger Eigenschaften
- const-Assertions und as const