Sitelet https://coddy.tech/learn/de/javascript/introduction_to_typescript/using_a_generic_function
Menu
CoddyTech

Verwenden einer generischen Funktion

Teil des Abschnitts Einführung in TypeScript der JavaScript-Journey von Coddy. Lektion 59 von 73.

Es gibt zwei Möglichkeiten, eine generische Funktion zu verwenden: mit expliziten Typargumenten oder indem du TypeScript den Typ automatisch ableiten lässt.

So kannst du eine generische Funktion mit expliziten Typargumenten aufrufen:

const result1 = wrapInObject<string>("hello");
const result2 = wrapInObject<number>(42);

<string> und <number> teilen TypeScript ausdrücklich mit, welcher Typ für T verwendet werden soll. Dadurch hast du vollständige Kontrolle über den Typparameter.

TypeScript ist jedoch intelligent genug, den Typ in den meisten Fällen aus dem Argument abzuleiten, das du übergibst:

const result1 = wrapInObject("hello");  // T inferred as string
const result2 = wrapInObject(42);       // T inferred as number

Typinferenz macht deinen Code übersichtlicher und besser lesbar und erhält dabei dieselbe Typsicherheit. TypeScript analysiert das Argument und bestimmt automatisch, was T sein sollte, sodass du die explizite Typannotation nicht schreiben musst, es sei denn, du möchtest den inferierten Typ überschreiben.

challenge icon

Aufgabe

Einfach

Dir wird Folgendes aus der vorherigen Aufgabe bereitgestellt:

  • Die generische Funktion wrapInObject<T>, die ein Element des Typs T entgegennimmt und { value: T } zurückgibt

Rufe die Funktion wrapInObject sowohl mit expliziten Typargumenten als auch mit Typinferenz auf:

Explizite Typargumente verwenden:

  • Erstelle eine Variable explicitString, indem du wrapInObject<string> mit "TypeScript" aufrufst
  • Erstelle eine Variable explicitNumber, indem du wrapInObject<number> mit 25 aufrufst
  • Erstelle eine Variable explicitBoolean, indem du wrapInObject<boolean> mit false aufrufst

Typinferenz verwenden:

  • Erstelle eine Variable inferredString, indem du wrapInObject mit "Generics" aufrufst (lasse TypeScript den Typ ableiten)
  • Erstelle eine Variable inferredNumber, indem du wrapInObject mit 99 aufrufst (lasse TypeScript den Typ ableiten)
  • Erstelle eine Variable inferredBoolean, indem du wrapInObject mit true aufrufst (lasse TypeScript den Typ ableiten)

Gib die folgenden Ausgaben aus:

  • Gib explicitString.value aus
  • Gib explicitNumber.value aus
  • Gib explicitBoolean.value aus
  • Gib inferredString.value aus
  • Gib inferredNumber.value aus
  • Gib inferredBoolean.value aus

Probier es selbst

// Generische Funktion aus der vorherigen Challenge
function wrapInObject<T>(item: T): { value: T } {
    return { value: item };
}

// TODO: Schreibe deinen Code hier
// Erstelle Variablen mit expliziten Typargumenten
// Erstelle Variablen mit Typinferenz

// Gib die Ergebnisse aus
quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Einführung in TypeScript

Übe selbstständig: TypeScript-Playground