ProgrammierungFrontend-Entwickler

Erzählen Sie von den Excess Property Checks (Überprüfungen überflüssiger Eigenschaften) in TypeScript. Wie funktionieren sie für Objekte, was wird zur Kompilierzeit überprüft und welche Probleme können bei der Typisierung von Objekten mit dynamischen Eigenschaften auftreten?

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

Antwort.

TypeScript implementiert den Mechanismus der Überprüfung überflüssiger Eigenschaften (Excess Property Checking) zur zusätzlichen Sicherheit, um den Programmierer vor Fehlern bei der Deklaration von Objekten zu warnen, wenn ein Objektliteral einer Variablen eines Typs direkt zugewiesen wird. Dieser Mechanismus entstand, weil die strukturelle Typisierung von TypeScript unnötige nicht deklarierte Eigenschaften zulassen kann, was häufig zu logischen Fehlern im Programm führt, insbesondere bei der Arbeit mit APIs oder Formularen.

Hintergrund

Die Überprüfung überflüssiger Eigenschaften wurde eingeführt, um die Sicherheit in der Frontend-Entwicklung zu verbessern, wo die Struktur von Objekten oft einem strengen Vertrag folgt (zum Beispiel für die Serialisierung in JSON). Wenn ein Objekt als Literal erstellt und sofort einer Funktion übergeben oder einer Variablen eines bestimmten Typs zugewiesen wird, führt TS eine "überflüssige" Überprüfung durch – es sucht nach zusätzlichen Eigenschaften, die im angenommenen Typ nicht beschrieben sind.

Problem

Ein Fehler des Programmierers kann unbemerkt bleiben, wenn das Objekt einen Tippfehler oder eine überflüssige Eigenschaft enthält, und diese Eigenschaft nicht ordnungsgemäß verwendet wird oder ganz unsichtbar für die Geschäftslogik bleibt. Darüber hinaus können die Excess Property Checks unerwartet ausgelöst werden – zum Beispiel, wenn das Objekt nicht explizit typisiert ist oder mit Spread-Operatoren oder durch Zwischenvariablen verarbeitet wird.

Lösung

TypeScript wendet die Überprüfungen überflüssiger Eigenschaften auf Objektliterale an, die direkt einer Variablen oder einem Funktionsparameter zugewiesen werden. Die Überprüfung sucht nach allen Eigenschaften des Objekts und vergleicht sie mit dem deklarierten Typ – falls überflüssige vorhanden sind, wird ein Kompilierungsfehler angezeigt.

interface UserProfile { name: string; age: number; } const user: UserProfile = { name: "Sam", age: 25, email: "sam@mail.com" // Fehler: überflüssige Eigenschaft email };

Um die überflüssige Überprüfung zu umgehen, zum Beispiel für Objekte mit dynamischen Eigenschaften oder partieller Typisierung, werden Indexsignaturen oder Zwischenvariablen verwendet.

interface FlexibleUser { name: string; [prop: string]: any; // Indexsignatur erlaubt beliebige neue Eigenschaften } const user2: FlexibleUser = { name: "Sam", age: 25, email: "sam@mail.com" // Funktioniert korrekt };

Hauptmerkmale:

  • Überprüfungen überflüssiger Eigenschaften werden nur auf Objektliterale angewendet, die einer explizit typisierten Variablen zugewiesen werden.
  • Überprüfungen können durch Indexsignaturen oder Zuweisungen über Zwischenvariablen umgangen werden.
  • Schützt vor trivialen Tippfehlern und Fehlern in der Datenstruktur.

Fangfragen.

Wenn man ein Objekt mit einer überflüssigen Eigenschaft erstellt, es einer variablen ohne Typ zuweist und später den Typ erneut festlegt, wird dann die Excess Property Checks aktiviert?

Nein, die überflüssige Überprüfung funktioniert nur bei der direkten Zuweisung eines Literals. Wenn das Objekt zuvor erstellt wurde und danach nur der Typ angegeben wird, werden überflüssige Eigenschaften nicht erkannt.

const temp = { name: "John", age: 18, foo: "bar" }; const u: UserProfile = temp; // Kein Fehler, foo wird ignoriert

Gilt die Excess Property Checks für Klassen und Instanzen von Klassen?

Nein, diese Überprüfung wird nicht für Klassen und Instanzen von Klassen durchgeführt, sondern nur für Objektliterale.

Kann man die überflüssigen Überprüfungen global in den TS-Einstellungen deaktivieren?

Nein, es gibt keine separate Einstellung zur Deaktivierung. Man kann jedoch eine Indexsignatur für Eigenschaften angeben oder den Type Assertion-Operator ('as') verwenden, um explizit anzugeben, dass die Überprüfung nicht erforderlich ist.

const special: UserProfile = { name: "Max", age: 22, hobby: "js" } as UserProfile;

Typische Fehler und Anti-Pattern

  • Die Verwendung von Type Assertion zur Deaktivierung der Überprüfung (dies kann zu verpassten Fehlern in der Struktur von Objekten führen).
  • Unbegründete Nutzung von Indexsignaturen untergräbt die gesamte Striktheit der Typbeschreibung.

Beispiel aus dem Leben

Negativer Fall

Ein Entwickler erstellt ein Interface für ein Benutzerformular und erlaubt alle Eigenschaften durch [key: string]: any, um Fehler bei überflüssigen Feldern zu vermeiden.

Vorteile: Es treten keine Kompilierungsfehler bei dynamischen Daten auf.

Nachteile: Alle Strukturfehler des Formulars oder Tippfehler werden nicht erkannt, es ist schwierig, Bugs zu finden.

Positiver Fall

Ein Entwickler legt ein strenges Interface fest und verwendet eine separate Funktion zur Transformation dynamischer Daten in eine strenge Struktur, mit vorheriger Validierung.

Vorteile: Das Interface stimmt immer mit dem erwarteten Vertrag überein, der Compiler erkennt Tippfehler, hohe Wartbarkeit.

Nachteile: Es muss zusätzlicher Code zur Überprüfung und Mappung dynamischer Daten geschrieben werden.