Wie man ein TypeScript-Vorstellungsgespräch besteht: Top-Fragen für Fortgeschrittene

Fortgeschrittenes TypeScript-Vorstellungsgespräch: Wie man den Arbeitgeber beeindruckt

TypeScript ist längst nicht mehr nur ein „Add-on“ zu JavaScript. In modernen Vorstellungsgesprächen für Senior-Positionen wird nicht nur das Wissen über Typen geprüft, sondern auch die Fähigkeit, mit bedingten Typen, Mapping, Dekorateuren und dem Typinferenzsystem zu arbeiten. In diesem Artikel analysieren wir 4 Schlüsselthemen, die Ihnen helfen, ein technisches Interview zu TypeScript auf fortgeschrittenem Niveau souverän zu bestehen.

1. Bedingte Typen (Conditional Types) und das Schlüsselwort infer

Bedingte Typen ermöglichen es, basierend auf einer Bedingung einen von zwei Typen auszuwählen. Sie sind nach dem Prinzip des ternären Operators aufgebaut: T extends U ? X : Y. Im Vorstellungsgespräch könnten Sie gebeten werden, einen Typ zu schreiben, der den Rückgabetyp einer Funktion extrahiert.

// Beispiel: Extrahieren des Rückgabetyps einer Funktiontype ReturnTypeExtract<T> = T extends (...args: any[]) => infer R ? R : never;

function greet(name: string): string {  return "Hello, " + name;}

type GreetReturn = ReturnTypeExtract<typeof greet>; // string

Das Schlüsselwort infer wird innerhalb von bedingten Typen verwendet, um eine neue Typvariable zu deklarieren. Es ermöglicht, einen Teil eines Typs aus einer komplexen Struktur „herauszuziehen“. Häufig wird gefragt: „Was ist infer und wo wird es angewendet?“. Antwort: Zum Extrahieren von Typen aus Promises, Funktionen, Tupeln.

// Extrahieren des Elementtyps aus einem Promisetype UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Result = UnwrapPromise<Promise<number>>; // numbertype Result2 = UnwrapPromise<string>; // string

2. Gemappte Typen (Mapped Types) und die Modifikatoren readonly/optional

Gemappte Typen ermöglichen es, neue Typen zu erstellen, indem die Eigenschaften eines vorhandenen Typs durchlaufen werden. Dies ist ein mächtiges Werkzeug zur Erstellung von Hilfstypen wie Partial<T> oder Readonly<T>. Im Vorstellungsgespräch könnte man Sie bitten, Ihre eigene Version von Pick<T, K> zu implementieren.

// Eigene Implementierung von Picktype MyPick<T, K extends keyof T> = {  [P in K]: T[P];};

interface User {  id: number;  name: string;  email: string;}

type UserBasic = MyPick<User, 'id' | 'name'>;// { id: number; name: string }

Beachten Sie keyof T – dies ist ein Operator, der die Vereinigung der Schlüssel eines Objekts zurückgibt. In Kombination mit Mapping ermöglicht er eine flexible Transformation von Typen. Auch wird häufig nach den Modifikatoren readonly und ? (optional) gefragt. Diese können mit den Präfixen + und - hinzugefügt oder entfernt werden:

// Entfernen von readonly aus allen Eigenschaftentype Mutable<T> = {  -readonly [P in keyof T]: T[P];};

type ImmutableUser = Readonly<User>;type MutableUser = Mutable<ImmutableUser>; // alle Felder sind wieder änderbar

3. Dekorateure und ihre Typisierung

Dekorateure sind eine experimentelle Funktion von TypeScript, die häufig in Angular und NestJS verwendet wird. Im Vorstellungsgespräch könnte man Sie fragen, wie man einen Klassen- oder Methodendekorateur typisiert. Es ist wichtig zu verstehen, dass ein Dekorateur einfach eine Funktion ist, die ein Zielobjekt entgegennimmt und es (oder ein neues) zurückgibt.

// Klassendekorateur mit Typisierungfunction Logger<T extends { new (...args: any[]): {} }>(constructor: T) {  console.log(`Klasse ${constructor.name} erstellt`);  return class extends constructor {    constructor(...args: any[]) {      super(...args);      console.log('Instanz erstellt');    }  };}

@Loggerclass MyService {  constructor(public name: string) {}}

const service = new MyService('Test'); // In der Konsole: "Klasse MyService erstellt", dann "Instanz erstellt"

Bei fortgeschrittenen Fragen könnte man Sie bitten, einen Dekorateur zu implementieren, der Metadaten oder Validierung hinzufügt. Beachten Sie die Verwendung von Generics – <T extends { n