0Pricing
TypeScript Academy · Lektion

Kontextbezogene Typisierung: Ableitung aus dem Kontext

Verstehen Sie, wie TypeScript Typen aus dem umgebenden Kontext ableitet.

Kontextbezogene Typisierung: Ableitung aus dem Kontext 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.

Was ist kontextuelle Typisierung?

Kontextuelle Typisierung tritt auf, wenn TypeScript den Typ eines Ausdrucks anhand der Position ableitet, an der er vorkommt — der Kontext liefert den Typ, nicht der Wert selbst.

document.addEventListener("click", (e) => {
  // e is inferred as MouseEvent from the event type
  console.log(e.clientX);
});

Kontextuelle Typisierung in Callbacks

Wenn Sie einer typisierten Funktion einen Callback übergeben, leitet TypeScript die Parametertypen aus der erwarteten Callback-Signatur ab.

const nums = [1, 2, 3];
nums.forEach((n) => {
  // n inferred as number from Array<number>
  console.log(n.toFixed(2));
});

Kontextuelle Typisierung und Objekt-Literale

Wenn ein Objekt-Literal einer typisierten Variable zugewiesen wird, werden seine Eigenschaftstypen aus diesem Typ abgeleitet, wodurch präzise Prüfungen möglich werden.

interface Config { timeout: number; retries: number; }
const config: Config = {
  timeout: 3000,
  retries: 3,
  // extra: true // Error: excess property
};

Kontextuelle Typisierung in JSX

In React werden Event-Handler-Props kontextuell typisiert, sodass die Typen der Ereignisparameter automatisch abgeleitet werden.

function Button({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
  return <button onClick={onClick}>Click</button>;
}
// Caller: e is inferred as React.MouseEvent
<Button onClick={(e) => console.log(e.currentTarget)} />

Kontextuelle Typisierung und explizite Annotationen

Kontextuelle Typisierung ist leistungsfähig, kann aber durch explizite Annotationen überschrieben werden. Wenn beide vorhanden sind, hat die explizite Annotation Vorrang.

const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)

Kontextuelle Typisierung mit Destructuring

Destrukturierte Parameter in kontextuell typisierten Funktionen übernehmen ihre Typen ebenfalls aus dem Kontext.

const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
  // key: string, value: number — contextually typed
  console.log(key.toUpperCase(), value * 2);
});

Kontextuelle Typisierung und Rückgabetypen

Wenn eine Funktion einer typisierten Variable zugewiesen wird, wird auch der Rückgabetyp kontextuell abgeleitet.

type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OK

Kontextuelle Typisierung in bedingten Ausdrücken

TypeScript kann kontextuelle Typen in ternäre Ausdrücke und logische Operatoren übertragen.

const result: string | null =
  Math.random() > 0.5 ? "yes" : null; // both arms typed by context

Einschränkungen der kontextuellen Typisierung

Kontextuelle Typisierung wird nicht angewendet, wenn sich der Ausdruck an einer Position ohne Kontext befindet, etwa bei einer nicht annotierten eigenständigen Variable.

const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;

Bidirektionale Typinferenz

TypeScript führt eine bidirektionale Typinferenz durch: sowohl von oben nach unten (kontextuell) als auch von unten nach oben (ausgehend vom Ausdruck). Beide Ansätze wirken zusammen, um den genauesten Typ zu bestimmen.

function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as string

Zusammenfassung: Kontextuelle Typisierung

Durch kontextuelle Typisierung kann TypeScript Typen aus der Position ableiten, an der ein Ausdruck verwendet wird — Callbacks, Zuweisungen, JSX-Props und Destructuring profitieren von diesem Inferenzmechanismus.

Schnellüberprüfung

Wann wird die kontextuelle Typisierung auf einen Callback-Parameter angewendet?

Das haben Sie gelernt

Bei der kontextuellen Typisierung leitet TypeScript Typen aus der Position statt aus dem Wert ab. Dadurch bleiben Callbacks, Event-Handler und typisierte Zuweisungen kompakt und zugleich typsicher.

Häufig gestellte Fragen

Ist die Lektion „Kontextbezogene Typisierung: Ableitung aus dem Kontext“ kostenlos?

Ja — der vollständige Text von „Kontextbezogene Typisierung: Ableitung aus dem Kontext“ 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 „Kontextbezogene Typisierung: Ableitung aus dem Kontext“?

Verstehen Sie, wie TypeScript Typen aus dem umgebenden Kontext ableitet. 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 „Kontextbezogene Typisierung: Ableitung aus dem Kontext“?

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

  1. Mechanismen von Type Widening und Narrowing
  2. Kontextbezogene Typisierung: Ableitung aus dem Kontext
  3. Freshness und Prüfung überschüssiger Eigenschaften
  4. const-Assertions und as const
← Zurück zu TypeScript Academy