DE
RU
EN
ES
ZH
FR
PT
AR
HI
So meistern Sie das TypeScript-Vorstellungsgespräch: Top-Fragen für Fortgeschrittene
\n\nEin Vorstellungsgespräch für eine Position als Senior Frontend- oder Fullstack-Entwickler kommt selten ohne tiefgehende Fragen zu TypeScript aus. Wenn Sie grundlegende Typen und Interfaces bereits perfekt beherrschen, müssen Sie für ein erfolgreiches Technical Interview auf einem hohen Niveau die fortgeschrittene Typenstruktur verstehen. In diesem Artikel haben wir die Top-5 Fragen und Aufgaben zusammengestellt, die häufig in TypeScript-Vorstellungsgesprächen für Fortgeschrittene gestellt werden. Jeder Punkt wird mit einer Analyse und Codebeispielen begleitet.
\n\n1. Bedingte Typen (Conditional Types) und das Schlüsselwort infer
\n\nBedingte Typen ermöglichen es, Typen zu erstellen, die von einer Bedingung abhängen. In Kombination mit infer können Sie Teile von Typen „extrahieren", ähnlich wie beim Pattern Matching.
Frage: Schreiben Sie den Typ ReturnType (ohne Verwendung des eingebauten Typs).
Analyse: Wir verwenden einen bedingten Typ mit infer, um den Rückgabewert einer Funktion zu erfassen.
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;\n\n// Beispiel zur Verwendung\nfunction greet(name: string): string {\n return `Hallo, ${name}`;\n}\n\ntype GreetReturn = MyReturnType<typeof greet>; // stringWie man im Vorstellungsgespräch antwortet: Erklären Sie, dass infer R eine neue Typvariable R erstellt, die den Rückgabetyp aus der Funktionssignatur erfasst. Wenn die Bedingung nicht erfüllt ist (es wurde keine Funktion übergeben), wird der Typ zu never.
2. Mapped Types und Modifikatoren
\n\nMapped Types ermöglichen es, neue Typen zu erstellen, indem Eigenschaften eines vorhandenen Typs umgewandelt werden. Das fortgeschrittene Niveau umfasst die Arbeit mit den Modifikatoren +, -, as und Schlüsseln über keyof.
Frage: Erstellen Sie einen Typ DeepReadonly, der alle Eigenschaften eines Objekts (einschließlich verschachtelter) readonly macht.
type DeepReadonly<T> = {\n readonly [K in keyof T]: T[K] extends Record<string, unknown> \n ? DeepReadonly<T[K]> \n : T[K];\n};\n\ninterface User {\n name: string;\n address: {\n city: string;\n zip: number;\n };\n}\n\ntype ReadonlyUser = DeepReadonly<User>;\n// Alle Eigenschaften wurden readonly, einschließlich address.cityWie man antwortet: Zeigen Sie den rekursiven Aufruf von DeepReadonly für verschachtelte Objekte. Erklären Sie, wie Record<string, unknown> verwendet wird, um zu prüfen, ob ein Wert ein Objekt ist.
3. Template Literal Types (Schablonen-String-Typen)
\n\nTemplate Literal Types ermöglichen die Manipulation von String-Typen auf Kompilierungsebene. Dies ist ein leistungsstarkes Werkzeug zur Erstellung strenger APIs.
\n\nFrage: Implementieren Sie einen Typ EventName, der einen String akzeptiert und den Typ "on{String}" mit korrekter Capitalize-Funktion zurückgibt.
type EventName<T extends string> = `on${Capitalize<T>}`;\n\ntype ClickEvent = EventName<'click'>; // "onClick"\ntype FocusEvent = EventName<'focus'>; // "onFocus"\n\n// Fortgeschrittenes Beispiel: Extrahieren aus einem String\ntype ExtractAction<T extends string> = \n T extends `on${infer Action}` ? Uncapitalize<Action> : never;\n\ntype Action = ExtractAction<'onSubmit'>; // "submit"Wie man antwortet: Weisen Sie auf die eingebauten Typen Capitalize und Uncapitalize hin. Zeigen Sie, wie infer innerhalb von Template Literals zum Parsen von Strings funktioniert.
4. Generics mit Einschränkungen und variadischen Tupeln (Variadic Tuple Types)
\n\nVariadic Tuple Types (eingeführt in TS 4.0) ermöglichen die Arbeit mit Tupeln beliebiger Länge. Sie sind unverzichtbar für die Erstellung typsicherer Funktionen mit einer variablen Anzahl von Argumenten.
\n\nFrage: Schreiben Sie einen Typ für eine Funktion
Blogs
Buchempfehlungen
Lesen Sie auch
