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 numberTypinferenz 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.
Aufgabe
EinfachDir wird Folgendes aus der vorherigen Aufgabe bereitgestellt:
- Die generische Funktion
wrapInObject<T>, die ein Element des TypsTentgegennimmt 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 duwrapInObject<string>mit"TypeScript"aufrufst - Erstelle eine Variable
explicitNumber, indem duwrapInObject<number>mit25aufrufst - Erstelle eine Variable
explicitBoolean, indem duwrapInObject<boolean>mitfalseaufrufst
Typinferenz verwenden:
- Erstelle eine Variable
inferredString, indem duwrapInObjectmit"Generics"aufrufst (lasse TypeScript den Typ ableiten) - Erstelle eine Variable
inferredNumber, indem duwrapInObjectmit99aufrufst (lasse TypeScript den Typ ableiten) - Erstelle eine Variable
inferredBoolean, indem duwrapInObjectmittrueaufrufst (lasse TypeScript den Typ ableiten)
Gib die folgenden Ausgaben aus:
- Gib
explicitString.valueaus - Gib
explicitNumber.valueaus - Gib
explicitBoolean.valueaus - Gib
inferredString.valueaus - Gib
inferredNumber.valueaus - Gib
inferredBoolean.valueaus
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 ausDiese 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
1Erste Schritte mit TS
Was ist TypeScript?Warum TypeScript verwenden?Dein erster TypeScript-CodeKompilierungsprozess & FehlerZusammenfassung: Einführung in TS4Arbeiten mit Funktionen
Typisierung von Parametern & RückgabewertenTypisierung von Arrow-FunktionenDer Rückgabetyp 'void'Optionale Parameter mit '?'Standard-ParameterwerteTypisierung von Rest-ParameternDefinieren von FunktionstypenZusammenfassung: Typisierte Funktionen erstellen2Basis-Typen
Basis-Typen: str, num, booleanDer 'any'-Typ: Der NotausgangDer 'unknown'-TypArbeiten mit 'null' & 'undef'Typinferenz in der PraxisExplizite Typ-AnnotationenZusammenfassung: Übung zu Basis-Typen5Typen: Aliase, Unions & Intersections
Typ-Aliase für primitive DatentypenUnion-Typen ('|')Arbeiten mit Union-TypenLiteral-TypenIntersection-Typen ('&')Kombinieren von Typ-AliasenZusammenfassung: Fortgeschrittene Typ-Kombinationen3Datenstruktur: Arrays & Tupel
Typisierte Arrays'readonly'-Modifikator für ArraysWas ist ein Tupel?Deklarieren von und Zugriff auf TupelDestrukturierung von TupelnReadonly-TupelMehrdimensionale typisierte ArraysSpread-Operator mit ArraysZusammenfassung: Arrays und Tupel6Typisierung von Objekten und Interfaces
Inline-Typanmerkungen für ObjekteType-Aliase für ObjekteEinführung in InterfacesInterfaces vs. Type-AliaseOptionale & Readonly-EigenschaftenErweitern von Interfaces und TypenMethoden zu Interfaces hinzufügenZusammenfassung: Objektstrukturen definieren9Generics: Ein erster Blick
Das Problem, das Generics lösenErstellen einer generischen Identity-FunktionVerwenden einer generischen FunktionGenerische ArraysGenerische InterfacesZusammenfassung: Praxis mit generischen FunktionenÜbe selbstständig: TypeScript-Playground