0Pricing
Frontend Academy · Lektion

Generics: T extends und Constraints

Schreiben Sie generische Funktionen und Interfaces, beschränken Sie Typparameter mit extends und verwenden Sie generische Standardwerte für flexible APIs.

Generics: T extends und Constraints ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind Generics?

Generics ermöglichen Ihnen, Funktionen, Klassen und Interfaces zu schreiben, die mit mehreren Typen arbeiten und dabei typsicher bleiben. Statt für jeden Typ separate Funktionen zu schreiben, schreiben Sie eine generische Funktion, die durch eine Typvariable parametrisiert ist.

Eine einfache generische Funktion

Der Typparameter T wird in spitzen Klammern deklariert. TypeScript leitet T aus dem Argumenttyp ab — an der Aufrufstelle ist keine explizite Annotation erforderlich.

function identity<T>(value: T): T {
  return value;
}

identity(42);      // T is inferred as number, returns number
identity('hello'); // T inferred as string
identity<boolean>(true); // explicit

Generische Interfaces und Typen

Parametrisieren Sie Interfaces und Typen mit Generics, um wiederverwendbare Datenstrukturen zu beschreiben.

interface Box<T> {
  value: T;
  label?: string;
}

const numBox: Box<number> = { value: 42 };
const strBox: Box<string> = { value: 'hello', label: 'greeting' };

extends — Generische Typen einschränken

Verwenden Sie T extends SomeType, um einzuschränken, welche Typen T annehmen darf. Die Funktion akzeptiert nur Typen, die diese Einschränkung erfüllen.

function getLength<T extends { length: number }>(item: T): number {
  return item.length; // safe: T is guaranteed to have length
}

getLength('hello');       // 5
getLength([1, 2, 3]);    // 3
getLength({ length: 7 }); // 7
// getLength(42);         // Error: number has no length

keyof und generische Einschränkungen

keyof T erzeugt eine Union aus den Eigenschaftsschlüsseln von T. In Kombination mit Generics ermöglicht es den typsicheren Zugriff auf Eigenschaften.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Alice', age: 30 };
getProperty(user, 'name');  // string
getProperty(user, 'age');   // number
// getProperty(user, 'foo'); // Error

Standardwerte für Generics

Geben Sie für einen generischen Parameter mit T = DefaultType einen Standardtyp an. Das wird verwendet, wenn ein sinnvoller Standard existiert, Aufrufer ihn aber überschreiben können.

interface Paginated<T = unknown> {
  items: T[];
  total: number;
  page: number;
}

const rawPage: Paginated = { items: [], total: 0, page: 1 };
const typedPage: Paginated<User> = { items: [], total: 0, page: 1 };

Mehrere Typparameter

Funktionen können mehrere unabhängige Typparameter haben.

function zip<A, B>(arrA: A[], arrB: B[]): Array<[A, B]> {
  return arrA.map((a, i) => [a, arrB[i]]);
}

zip([1, 2, 3], ['a', 'b', 'c']);
// [[1,'a'], [2,'b'], [3,'c']]

Generische Klassen

Auch Klassen können generisch sein. Das ist bei Datenstrukturen wie Stacks, Queues und beobachtbaren Stores üblich.

class Stack<T> {
  private items: T[] = [];
  push(item: T) { this.items.push(item); }
  pop(): T | undefined { return this.items.pop(); }
  peek(): T | undefined { return this.items.at(-1); }
  get size() { return this.items.length; }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
stack.pop(); // 2

Asynchrone generische Funktionen

Generische asynchrone Funktionen werden häufig für typisierte API-Aufrufe verwendet.

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<T>;
}

const users = await fetchJson<User[]>('/api/users');
const profile = await fetchJson<UserProfile>('/api/me');

infer in bedingten Typen

Das Schlüsselwort infer innerhalb eines bedingten Typs extrahiert einen Typ aus einem Muster. Es wird in Bibliothekscode verwendet, um beispielsweise den Rückgabetyp einer Funktion oder den Elementtyp eines Arrays zu extrahieren.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type ElementType<T> = T extends Array<infer E> ? E : never;

type Fn = () => { name: string };
type Result = ReturnType<Fn>; // { name: string }

Wann Sie Generics verwenden sollten

Verwenden Sie Generics, wenn: 1) dieselbe Logik für mehrere Typen gilt, 2) Sie eine Beziehung zwischen Eingabe- und Ausgabetypen benötigen, 3) Sie eine wiederverwendbare Datenstruktur oder Utility erstellen. Verwenden Sie Generics nicht nur um ihrer selbst willen — konkrete Typen sind klarer, wenn es nur einen Anwendungsfall gibt.

Kurztest

Was stellt die Einschränkung T extends { length: number } sicher?

Zusammenfassung: Generics

Generics parametrisieren Typen, sodass eine Funktion, Klasse oder ein Interface mit mehreren Typen funktioniert. T extends SomeType fügt Einschränkungen hinzu. keyof T liefert Unions der Eigenschaftsschlüssel. Mit T = Default legen Sie Standardwerte für Generics fest. infer extrahiert Typen in bedingten Typen. Verwenden Sie Generics für wiederverwendbare typisierte Utilities und Datenstrukturen.

Häufig gestellte Fragen

Ist die Lektion „Generics: T extends und Constraints“ kostenlos?

Ja — der vollständige Text von „Generics: T extends und Constraints“ 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 „Generics: T extends und Constraints“?

Schreiben Sie generische Funktionen und Interfaces, beschränken Sie Typparameter mit extends und verwenden Sie generische Standardwerte für flexible APIs. 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 1 von 4.

Wie lange dauert die Lektion „Generics: T extends und Constraints“?

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