Frontend Academy · Lektion

Narrowing: typeof, instanceof, diskriminierte Unions

Verwenden Sie Type Guards, um Union-Typen zur Laufzeit mit typeof, instanceof und Mustern für diskriminierte Unions einzugrenzen.

Lektion 4 von 413 Schritte

Narrowing: typeof, instanceof, diskriminierte Unions ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist Type Narrowing?

TypeScript beginnt mit einem weit gefassten Typ (z. B. string | number). Type Narrowing bezeichnet den Prozess, den Typ innerhalb eines bedingten Blocks auf einen spezifischeren Typ einzugrenzen. TypeScript verfolgt diese Eingrenzung automatisch.

Eingrenzung mit typeof

Der Operator typeof grenzt primitive Typen ein. Innerhalb eines if-Blocks kennt TypeScript den exakten Typ.

function format(value: string | number | boolean): string {
  if (typeof value === 'string') {
    return value.toUpperCase(); // string here
  }
  if (typeof value === 'number') {
    return value.toFixed(2);   // number here
  }
  return String(value);        // boolean here
}

Eingrenzung mit instanceof

instanceof grenzt Instanzen von Klassen ein. Innerhalb des Blocks kennt TypeScript die konkrete Klasse.

function processError(err: unknown) {
  if (err instanceof Error) {
    console.error(err.message); // Error methods available
  } else if (err instanceof Response) {
    console.error('HTTP error:', err.status);
  } else {
    console.error('Unknown:', err);
  }
}

Eingrenzung über Truthiness

Bei Truthiness-Prüfungen grenzt TypeScript null und undefined aus.

function printLength(value: string | null | undefined) {
  if (value) {
    console.log(value.length); // string here (null/undefined filtered)
  }
}

Eingrenzung durch Gleichheit

Strikte Gleichheit grenzt auf den Literaltyp ein. Das ist für diskriminierte Unions und String-Enums nützlich.

function handle(action: 'submit' | 'cancel' | 'reset') {
  if (action === 'submit') {
    // action is exactly 'submit'
    doSubmit();
  }
}

Eingrenzung mit dem in-Operator

Der in-Operator grenzt Objekt-Union-Typen ein, indem er prüft, welche Eigenschaften vorhanden sind.

interface Cat { meow(): void; }
interface Dog { bark(): void; }

function speak(animal: Cat | Dog) {
  if ('meow' in animal) {
    animal.meow(); // Cat
  } else {
    animal.bark(); // Dog
  }
}

Diskriminierte Unions — Eingrenzung anhand eines Tags

Eine diskriminierte Union besitzt eine gemeinsame Eigenschaft mit einem Literaltyp (den Diskriminator). TypeScript grenzt die Union in switch/if anhand dieser Eigenschaft ein.

type LoadingState = { status: 'loading' };
type SuccessState = { status: 'success'; data: User[] };
type ErrorState   = { status: 'error'; message: string };
type State = LoadingState | SuccessState | ErrorState;

function render(state: State) {
  switch (state.status) {
    case 'loading': return '<Spinner />';
    case 'success': return renderUsers(state.data);  // state.data available
    case 'error':   return renderError(state.message);
  }
}

Typprädikate — Benutzerdefinierte Type Guards

Eine Typprädikatfunktion grenzt den Typ für den Aufrufer ein. Verwenden Sie param is Type als Rückgabetyp.

function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'name' in value &&
    typeof (value as User).name === 'string'
  );
}

const data: unknown = await fetchJson('/api/me');
if (isUser(data)) {
  console.log(data.name); // typed as User
}

Assertionsfunktionen

Eine Assertionsfunktion löst einen Fehler aus, wenn die Bedingung nicht erfüllt ist, und grenzt den Typ nach dem Aufruf ein.

function assertIsString(val: unknown): asserts val is string {
  if (typeof val !== 'string') throw new Error('Expected string');
}

const val: unknown = getInput();
assertIsString(val);
console.log(val.toUpperCase()); // val is string here

Prüfung auf Vollständigkeit

Wenn ein switch über eine diskriminierte Union im default-Zweig den Typ never hinterlässt, stellt TypeScript sicher, dass alle Fälle behandelt werden. Fügen Sie ein default hinzu, das einer Variablen vom Typ never zugewiesen wird, damit beim Hinzufügen einer neuen Variante ein Kompilierungsfehler entsteht.

function render(state: State): string {
  switch (state.status) {
    case 'loading': return '...';
    case 'success': return state.data.length.toString();
    case 'error':   return state.message;
    default:
      const _exhaustive: never = state;
      throw new Error('Unhandled state: ' + _exhaustive);
  }
}

Eingrenzung mit Array.isArray

Array.isArray() grenzt einen Wert auf den Array-Typ ein.

function processInput(input: string | string[]) {
  if (Array.isArray(input)) {
    return input.join(', '); // string[]
  }
  return input.toUpperCase(); // string
}

Schnelltest

Welche Technik zur Typ-Eingrenzung verwendet eine gemeinsame Literal-Eigenschaft, um Varianten eines Union-Typs zu unterscheiden?

Zusammenfassung: Type Narrowing in TypeScript

typeof für primitive Typen. instanceof für Klassen. Der in-Operator für Objektstrukturen. Truthiness filtert null/undefined heraus. Diskriminierte Unions mit einer gemeinsamen Literal-Eigenschaft ermöglichen vollständige switch-Anweisungen. Benutzerdefinierte Typprädikate (is) für komplexe Prüfungen zur Laufzeit. Prüfung auf Vollständigkeit mit never in default-Zweigen.

Kostenlos starten

Lerne HTML 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
41
Lektionen
163

Häufig gestellte Fragen

Ist die Lektion „Narrowing: typeof, instanceof, diskriminierte Unions“ kostenlos?

Ja — der vollständige Text von „Narrowing: typeof, instanceof, diskriminierte Unions“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Narrowing: typeof, instanceof, diskriminierte Unions“?

Verwenden Sie Type Guards, um Union-Typen zur Laufzeit mit typeof, instanceof und Mustern für diskriminierte Unions einzugrenzen. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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 „Narrowing: typeof, instanceof, diskriminierte Unions“?

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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

  1. Generics: T extends und Constraints
  2. Utility-Typen: Partial, Required, Pick, Omit
  3. Mapped Types und Conditional Types
  4. Narrowing: typeof, instanceof, diskriminierte Unions
← Zurück zu Frontend Academy