TypeScript Academy · Lektion

Das Schlüsselwort as für Typ-Assertions

Überschreiben Sie abgeleitete Typen bewusst mit as.

Das Schlüsselwort as für Typ-Assertions 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 eine Typassertion?

Eine Typassertion teilt dem Compiler mit: „Vertrauen Sie mir, ich weiß, dass dieser Wert vom Typ T ist.“ Sie verwenden das Schlüsselwort as: value as Type. Dadurch ändert sich nicht der Wert selbst, sondern nur die Sicht des Typprüfers auf ihn.

const raw: unknown = 'hello world';
const text = raw as string;
console.log(text.toUpperCase());

Die as-Syntax

Schreiben Sie zuerst den Ausdruck, dann as und anschließend den Zieltyp. Es gibt auch eine ältere Syntax mit spitzen Klammern, aber as wird bevorzugt, weil sie überall funktioniert, auch in JSX/TSX-Dateien.

const value: unknown = 42;
const n = value as number;
console.log(n + 8);

Assertionen ändern die Laufzeit nicht

Das ist entscheidend: Assertionen sind eine Anweisung, die nur zur Kompilierzeit gilt. Sie werden beim Ausführen des Codes entfernt. Es findet weder eine Konvertierung noch eine Validierung statt – wenn Sie eine falsche Assertion verwenden, bleibt der Laufzeitwert unverändert und kann sich fehlerhaft verhalten.

const v: unknown = 'not a number';
const n = v as number; // compiles, but v is still a string
console.log(typeof n); // 'string' at runtime!

Wann Assertionen zulässig sind

TypeScript erlaubt direkte Assertionen nur zwischen Typen, die sich überlappen – bei denen einer dem anderen zuweisbar ist. Sie können unknown zu string erklären oder innerhalb einer Typbeziehung einen Typ erweitern beziehungsweise einschränken.

const u: unknown = 'ok';
const s = u as string; // valid: unknown overlaps everything
const broad = s as string | number; // valid widening
console.log(s, broad);

Ungültige direkte Assertionen

Wenn sich zwei Typen nicht überlappen, lehnt TypeScript eine direkte Assertion als wahrscheinlichen Fehler ab. Beispielsweise wird verhindert, dass Sie einen string direkt zu einem number erklären.

const s = 'hello';
// const n = s as number; // Error: neither type sufficiently overlaps
console.log('Direct unrelated assertions are blocked');

Eine Union mit as eingrenzen

Eine häufige zulässige Verwendung besteht darin, einen Wert eines Union-Typs zu einem seiner Bestandteile zu erklären, wenn Sie Informationen haben, die dem Compiler fehlen. Verwenden Sie dies sparsam – eine Laufzeitprüfung ist normalerweise sicherer.

type Shape = { kind: 'circle'; r: number } | { kind: 'square'; s: number };
const data: Shape = { kind: 'circle', r: 5 };
const circle = data as { kind: 'circle'; r: number };
console.log(circle.r);

DOM-Elementtypen per Assertion festlegen

Eine klassische Verwendung aus der Praxis: DOM-Abfragen liefern einen allgemeinen Typ wie HTMLElement | null. Wenn Sie das konkrete Element kennen, können Sie es entsprechend erklären, um auf elementspezifische Eigenschaften zuzugreifen.

// document.getElementById returns HTMLElement | null
// const input = document.getElementById('email') as HTMLInputElement;
// console.log(input.value);
console.log('Assert HTMLElement to HTMLInputElement for .value');

Warum DOM-Assertionen nötig sind

Die DOM-APIs können nicht wissen, welches konkrete Element Sie erhalten, und geben deshalb allgemeine Typen zurück. Wenn Sie den spezifischen Untertyp erklären (z. B. HTMLInputElement), werden Eigenschaften wie value oder checked verfügbar.

// const canvas = document.querySelector('#c') as HTMLCanvasElement;
// const ctx = canvas.getContext('2d');
console.log('querySelector returns Element | null; assert to specialize');

const-Assertionen sind ein Sonderfall

Sie haben as const bereits kennengelernt. Dies ist eine spezielle Assertion, die einen Wert rekursiv schreibgeschützt macht und Literaltypen verwendet. Es ist die einzige Assertion, die immer sicher ist, da sie den Typ nur weiter einschränkt.

const tuple = [1, 2, 3] as const;
// type: readonly [1, 2, 3]
console.log(tuple.length);

Assertionen umgehen die Sicherheit

Da Assertionen dem Compiler sagen, dass er die Prüfung einstellen soll, übertragen sie die Verantwortung auf Sie. Eine falsche Assertion kann einen echten Typfehler verbergen, bis er zur Laufzeit einen Absturz verursacht. Verwenden Sie Assertionen nur, wenn Sie tatsächlich mehr wissen als der Compiler.

const data: unknown = { id: 1 };
const user = data as { id: number; name: string };
// name does not exist at runtime
console.log(user.name); // undefined, no compile error

Narrowing statt Assertionen bevorzugen

Wenn möglich, sollten Sie Laufzeit-Narrowing (Type Guards) Assertionen vorziehen. Narrowing weist den Typ nach, eine Assertion behauptet ihn lediglich. Verwenden Sie as nur in Fällen, die sich durch Narrowing nicht ausdrücken lassen, etwa bei der Spezialisierung von DOM-Elementen.

function safe(v: unknown): number {
  if (typeof v === 'number') return v; // proven
  return 0;
}
console.log(safe(10), safe('x'));

Schnelltest

Testen Sie Ihr Verständnis von Typassertionen.

Zusammenfassung: as-Assertionen

Sie haben gelernt:

value as Type weist den Compiler an, einen Wert als einen bestimmten Typ zu behandeln.
Assertionen gelten nur zur Kompilierzeit – es findet keine Konvertierung oder Prüfung zur Laufzeit statt.
Sie sind nur zwischen sich überlappenden Typen zulässig.
Häufige zulässige Verwendungen sind das Eingrenzen von unknown und das Spezialisieren von DOM-Elementtypen. Bevorzugen Sie Narrowing, wann immer dies möglich ist.

Als Nächstes geht es um den Non-Null-Assertion-Operator.

const raw: unknown = 'data';
const s = raw as string;
console.log(s.length);

Häufig gestellte Fragen

Ist die Lektion „Das Schlüsselwort as für Typ-Assertions“ kostenlos?

Ja — der vollständige Text von „Das Schlüsselwort as für Typ-Assertions“ 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 „Das Schlüsselwort as für Typ-Assertions“?

Überschreiben Sie abgeleitete Typen bewusst mit as. 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 „Das Schlüsselwort as für Typ-Assertions“?

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

← Zurück zu TypeScript Academy