ProgrammierungFrontend-Entwickler

Wie funktioniert die Typisierung von Funktionen mit REST und der Destrukturierung von Parametern in TypeScript? Welche Fehler treten bei falscher Typisierung solcher Funktionen auf?

Bestehen Sie Vorstellungsgespräche mit dem Hintsage-KI-Assistenten

Antwort

TypeScript unterstützt eine präzise Typisierung von Funktionen mit Rest-Parametern und Destrukturierung. Dies ist besonders wichtig für Funktionen, die eine variable Anzahl von Argumenten oder komplexe Objekte akzeptieren.

Destrukturierung in den Funktionsparametern ermöglicht es, die Struktur der erwarteten Eigenschaften explizit anzugeben:

function printUser({ name, age }: { name: string; age: number }) { console.log(`${name} (${age})`); }

Rest-Parameter ermöglichen es, eine variable Anzahl von Argumenten und deren Typ anzugeben:

function sum(...numbers: number[]): number { return numbers.reduce((acc, cur) => acc + cur, 0); }

Die kombinierte Verwendung tritt in Funktionen auf, die ein Hauptobjekt und ein zusätzliches Array von Parametern akzeptieren:

function logEvent(event: { type: string }, ...meta: any[]) { console.log(event.type, meta.join(',')); }

Eine korrekte Typisierung ermöglicht es, Fehler vor der Ausführung des Codes zu identifizieren, aber eine falsche Typisierung führt zu einem Verlust der Typensicherheit und zu Laufzeitfehlern.

Testfrage

Wie gibt man den Typ für eine Funktion mit destrukturierten Parametern standardmäßig an und macht sie optional?

Viele geben den Typ des Objekts an, vergessen jedoch, jedes Feld optional zu machen oder Standardwerte gleichzeitig mit dem Typ festzulegen:

function foo({x = 1, y = 2}: {x?: number; y?: number} = {}) { console.log(x, y); }

Hier sind Standardwerte festgelegt und alle Parameter werden mit ? optional gemacht. Ohne dies führt der Aufruf ohne Parameter zu einem Fehler, obwohl ein Standardwert erwartet wird.

Beispiele für reale Fehler aufgrund von Unkenntnis der Feinheiten des Themas


Geschichte

Im Projekt wurde bei der Migration von Funktionen mit Parametern von JavaScript nach TypeScript der Typ nur für das Objekt und nicht für die einzelnen Felder angegeben. Infolgedessen führte der Aufruf der Funktion ohne Parameter zum Absturz der Anwendung mit einem Destrukturierungsfehler: undefined hat keine Eigenschaft name.

Geschichte

Bei der Arbeit mit Rest-Parametern wurde vergessen, den Typ des Arrays explizit anzugeben. In der Funktion war der Typ any[], was die Übergabe von nicht nur Zahlen erlaubte. In der Produktion wurden plötzlich Zahlen und Strings addiert, was zu falschen Ergebnissen in den Berichten führte.

Geschichte

Es wurde eine Destrukturierung mit einem tief verschachtelten Objekt verwendet, aber die verschachtelten Typen wurden nicht angegeben. Dadurch "verirrte" sich TS und gab keinen Hinweis auf das Fehlen eines erforderlichen Feldes in den Objekten, was zu einem Fehler TypeError: Cannot read property 'id' of undefined auf der Client-Seite führte.