TypeScript Exakte Typen: Strikte Objektform-Übereinstimmung für robusten Code

TypeScript, eine Obermenge von JavaScript, bringt statische Typisierung in die dynamische Welt der Webentwicklung. Während TypeScript erhebliche Vorteile in Bezug auf Typsicherheit und Wartbarkeit des Codes bietet, kann sein strukturelles Typisierungssystem manchmal zu unerwartetem Verhalten führen. Hier kommt das Konzept der "exakten Typen" ins Spiel. Obwohl TypeScript keine integrierte Funktion mit dem expliziten Namen "exakte Typen" hat, können wir ein ähnliches Verhalten durch eine Kombination von TypeScript-Funktionen und -Techniken erzielen. Dieser Blog-Beitrag befasst sich eingehend damit, wie Sie in TypeScript eine strengere Übereinstimmung der Objektform erzwingen können, um die Code-Robustheit zu verbessern und häufige Fehler zu vermeiden.

Verständnis der strukturellen Typisierung von TypeScript

TypeScript verwendet strukturelle Typisierung (auch bekannt als Duck-Typisierung), was bedeutet, dass die Typkompatibilität durch die Member der Typen bestimmt wird, anstatt durch ihre deklarierten Namen. Wenn ein Objekt alle von einem Typ geforderten Eigenschaften hat, wird es als mit diesem Typ kompatibel betrachtet, unabhängig davon, ob es zusätzliche Eigenschaften hat.

Zum Beispiel:

interface Point {
  x: number;
  y: number;
}

const myPoint = { x: 10, y: 20, z: 30 };

function printPoint(point: Point) {
  console.log(`X: ${point.x}, Y: ${point.y}`);
}

printPoint(myPoint); // Das funktioniert einwandfrei, obwohl myPoint die Eigenschaft 'z' hat

In diesem Szenario erlaubt TypeScript, dass `myPoint` an `printPoint` übergeben wird, da es die erforderlichen Eigenschaften `x` und `y` enthält, auch wenn es eine zusätzliche Eigenschaft `z` hat. Obwohl diese Flexibilität praktisch sein kann, kann sie auch zu subtilen Fehlern führen, wenn Sie versehentlich Objekte mit unerwarteten Eigenschaften übergeben.

Das Problem mit überschüssigen Eigenschaften

Die Nachsicht der strukturellen Typisierung kann manchmal Fehler verdecken. Betrachten Sie eine Funktion, die ein Konfigurationsobjekt erwartet:

interface Config {
  apiUrl: string;
  timeout: number;
}

function setup(config: Config) {
  console.log(`API URL: ${config.apiUrl}`);
  console.log(`Timeout: ${config.timeout}`);
}

const myConfig = { apiUrl: "https://api.example.com", timeout: 5000, typo: true };

setup(myConfig); // TypeScript beschwert sich hier nicht!

console.log(myConfig.typo); //gibt true aus. Die zusätzliche Eigenschaft existiert stillschweigend

In diesem Beispiel hat `myConfig` eine zusätzliche Eigenschaft `typo`. TypeScript gibt keinen Fehler aus, da `myConfig` immer noch die `Config`-Schnittstelle erfüllt. Der Tippfehler wird jedoch nie erkannt, und die Anwendung verhält sich möglicherweise nicht wie erwartet, wenn der Tippfehler als `typoo` gedacht war. Diese scheinbar unbedeutenden Probleme können sich zu großen Kopfschmerzen beim Debuggen komplexer Anwendungen entwickeln. Eine fehlende oder falsch geschriebene Eigenschaft kann besonders schwer zu erkennen sein, wenn es sich um Objekte handelt, die in Objekten verschachtelt sind.

Ansätze zur Erzwingung exakter Typen in TypeScript

Obwohl echte "exakte Typen" in TypeScript nicht direkt verfügbar sind, gibt es hier verschiedene Techniken, um ähnliche Ergebnisse zu erzielen und eine strengere Übereinstimmung der Objektform zu erzwingen:

1. Verwenden von Typzusicherungen mit `Omit`

Der Hilfstyp `Omit` ermöglicht es Ihnen, einen neuen Typ zu erstellen, indem Sie bestimmte Eigenschaften von einem vorhandenen Typ ausschließen. In Kombination mit einer Typzusicherung kann dies dazu beitragen, überschüssige Eigenschaften zu verhindern.

interface Point {
  x: number;
  y: number;
}

const myPoint = { x: 10, y: 20, z: 30 };

// Erstellen Sie einen Typ, der nur die Eigenschaften von Point enthält
const exactPoint: Point = myPoint as Omit & Point;

// Fehler: Der Typ '{ x: number; y: number; z: number; }' ist dem Typ 'Point' nicht zuweisbar.
// Ein Objektliteral darf nur bekannte Eigenschaften angeben, und 'z' existiert nicht im Typ 'Point'.

function printPoint(point: Point) {
  console.log(`X: ${point.x}, Y: ${point.y}`);
}


//Korrektur
const myPointCorrect = { x: 10, y: 20 };
const exactPointCorrect: Point = myPointCorrect as Omit & Point;
printPoint(exactPointCorrect);

Dieser Ansatz wirft einen Fehler, wenn `myPoint` Eigenschaften hat, die nicht in der `Point`-Schnittstelle definiert sind.

Erläuterung: `Omit` erstellt einen Typ, der alle in `Point` vorhandenen Schlüssel aus dem Typ von `myPoint` auslässt. `& Point` schneidet diesen Typ dann mit dem `Point`-Typ, wodurch im Wesentlichen gefordert wird, dass das Objekt dem `Point`-Typ entspricht. Indem wir das Objekt auf diesen kombinierten Typ zusichern, prüft der Compiler auf zusätzliche Eigenschaften und wirft einen Fehler, wenn welche gefunden werden. Dies zwingt uns, die korrekte Form bei der ersten Definition unseres Objekts zu deklarieren.

2. Verwenden einer Funktion zum Erstellen von Objekten

Sie können eine Factory-Funktion erstellen, die nur die in der Schnittstelle definierten Eigenschaften akzeptiert. Dieser Ansatz bietet eine starke Typüberprüfung zum Zeitpunkt der Objekterstellung.

interface Config {
  apiUrl: string;
  timeout: number;
}

function createConfig(config: Config): Config {
  return {
    apiUrl: config.apiUrl,
    timeout: config.timeout,
  };
}

const myConfig = createConfig({ apiUrl: "https://api.example.com", timeout: 5000 });

//Dies wird nicht kompiliert:
//const myConfigError = createConfig({ apiUrl: "https://api.example.com", timeout: 5000, typo: true });
//Das Argument vom Typ '{ apiUrl: string; timeout: number; typo: true; }' ist dem Parameter vom Typ 'Config' nicht zuweisbar.
// Ein Objektliteral darf nur bekannte Eigenschaften angeben, und 'typo' existiert nicht im Typ 'Config'.

Indem Sie ein Objekt zurückgeben, das nur mit den in der `Config`-Schnittstelle definierten Eigenschaften erstellt wurde, stellen Sie sicher, dass sich keine zusätzlichen Eigenschaften einschleichen können. Dies macht es sicherer, die Konfiguration zu erstellen.

3. Verwenden von Type Guards

Type Guards sind Funktionen, die den Typ einer Variablen innerhalb eines bestimmten Bereichs einschränken. Obwohl sie überschüssige Eigenschaften nicht direkt verhindern, können sie Ihnen helfen, explizit danach zu suchen und entsprechende Maßnahmen zu ergreifen.

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

function isUser(obj: any): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'id' in obj && typeof obj.id === 'number' &&
    'name' in obj && typeof obj.name === 'string' &&
    Object.keys(obj).length === 2 //Überprüfen Sie die Anzahl der Schlüssel. Hinweis: brüchig und hängt von der genauen Schlüsselanzahl von User ab.
  );
}

const potentialUser1 = { id: 123, name: "Alice" };
const potentialUser2 = { id: 456, name: "Bob", extra: true };

if (isUser(potentialUser1)) {
  console.log("Valider Benutzer:", potentialUser1.name);
} else {
  console.log("Ungültiger Benutzer");
}

if (isUser(potentialUser2)) {
  console.log("Valider Benutzer:", potentialUser2.name); //Wird hier nicht erreicht
} else {
  console.log("Ungültiger Benutzer");
}

In diesem Beispiel prüft der `isUser`-Type Guard nicht nur auf das Vorhandensein erforderlicher Eigenschaften, sondern auch auf deren Typen und die *genaue* Anzahl der Eigenschaften. Dieser Ansatz ist expliziter und ermöglicht es Ihnen, ungültige Objekte auf elegante Weise zu behandeln. Die Überprüfung der Anzahl der Eigenschaften ist jedoch fragil. Immer wenn `User` Eigenschaften erhält/verliert, muss die Überprüfung aktualisiert werden.

4. Nutzen von `Readonly` und `as const`

Während `Readonly` die Änderung vorhandener Eigenschaften verhindert und `as const` ein schreibgeschütztes Tupel oder Objekt erstellt, bei dem alle Eigenschaften tief schreibgeschützt sind und Literaltypen haben, können sie verwendet werden, um eine strengere Definition und Typüberprüfung in Kombination mit anderen Methoden zu erstellen. Allerdings verhindert keines von beiden allein überschüssige Eigenschaften.

interface Options {
  width: number;
  height: number;
}

//Erstellen Sie den Readonly-Typ
type ReadonlyOptions = Readonly;

const options: ReadonlyOptions = { width: 100, height: 200 };

//options.width = 300; //Fehler: 'width' kann nicht zugewiesen werden, da es sich um eine schreibgeschützte Eigenschaft handelt.

//Verwenden von as const
const config = { api_url: "https://example.com", timeout: 3000 } as const;

//config.timeout = 5000; //Fehler: 'timeout' kann nicht zugewiesen werden, da es sich um eine schreibgeschützte Eigenschaft handelt.

//Überschüssige Eigenschaften sind jedoch weiterhin zulässig:
const invalidOptions: ReadonlyOptions = { width: 100, height: 200, depth: 300 }; //kein Fehler. Ermöglicht weiterhin überschüssige Eigenschaften.


interface StrictOptions {
  readonly width: number;
  readonly height: number;
}

//Dies führt nun zu einem Fehler:
//const invalidStrictOptions: StrictOptions = { width: 100, height: 200, depth: 300 };
//Der Typ '{ width: number; height: number; depth: number; }' ist dem Typ 'StrictOptions' nicht zuweisbar.
//  Ein Objektliteral darf nur bekannte Eigenschaften angeben, und 'depth' existiert nicht im Typ 'StrictOptions'.

Dies verbessert die Unveränderlichkeit, verhindert aber nur die Mutation, nicht das Vorhandensein zusätzlicher Eigenschaften. In Kombination mit `Omit` oder dem Funktionsansatz wird es effektiver.

5. Verwenden von Bibliotheken (z. B. Zod, io-ts)

Bibliotheken wie Zod und io-ts bieten leistungsstarke Laufzeit-Typvalidierung und Schema-Definitionsfunktionen. Mit diesen Bibliotheken können Sie Schemas definieren, die die erwartete Form Ihrer Daten genau beschreiben, einschließlich der Verhinderung überschüssiger Eigenschaften. Obwohl sie eine Laufzeitabhängigkeit hinzufügen, bieten sie eine sehr robuste und flexible Lösung.

Beispiel mit Zod:

import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
});

type User = z.infer;

const validUser = { id: 1, name: "John" };
const invalidUser = { id: 2, name: "Jane", extra: true };

const parsedValidUser = UserSchema.parse(validUser);
console.log("Geparster gültiger Benutzer:", parsedValidUser);

try {
  const parsedInvalidUser = UserSchema.parse(invalidUser);
  console.log("Geparster ungültiger Benutzer:", parsedInvalidUser); // Dies wird nicht erreicht
} catch (error) {
  console.error("Validierungsfehler:", error.errors);
}

Die `parse`-Methode von Zod wirft einen Fehler, wenn die Eingabe nicht dem Schema entspricht, wodurch überschüssige Eigenschaften effektiv verhindert werden. Dies bietet eine Laufzeitvalidierung und generiert auch TypeScript-Typen aus dem Schema, wodurch die Konsistenz zwischen Ihren Typdefinitionen und der Laufzeitvalidierungslogik sichergestellt wird.

Best Practices für die Erzwingung exakter Typen

Hier sind einige Best Practices, die Sie bei der Erzwingung einer strengeren Übereinstimmung der Objektform in TypeScript berücksichtigen sollten:

• Wählen Sie die richtige Technik: Der beste Ansatz hängt von Ihren spezifischen Anforderungen und Projektanforderungen ab. Für einfache Fälle reichen möglicherweise Typzusicherungen mit `Omit` oder Factory-Funktionen aus. Für komplexere Szenarien oder wenn eine Laufzeitvalidierung erforderlich ist, sollten Sie die Verwendung von Bibliotheken wie Zod oder io-ts in Betracht ziehen.
• Seien Sie konsistent: Wenden Sie Ihren gewählten Ansatz konsistent in Ihrer gesamten Codebasis an, um ein einheitliches Maß an Typsicherheit aufrechtzuerhalten.
• Dokumentieren Sie Ihre Typen: Dokumentieren Sie Ihre Schnittstellen und Typen klar, um anderen Entwicklern die erwartete Form Ihrer Daten zu vermitteln.
• Testen Sie Ihren Code: Schreiben Sie Unit-Tests, um zu überprüfen, ob Ihre Typeinschränkungen wie erwartet funktionieren und Ihr Code ungültige Daten elegant verarbeitet.
• Berücksichtigen Sie die Kompromisse: Die Erzwingung einer strengeren Übereinstimmung der Objektform kann Ihren Code robuster machen, aber auch die Entwicklungszeit verlängern. Wägen Sie die Vorteile gegen die Kosten ab und wählen Sie den Ansatz, der für Ihr Projekt am sinnvollsten ist.
• Schrittweise Einführung: Wenn Sie an einer großen, bestehenden Codebasis arbeiten, sollten Sie diese Techniken schrittweise einführen und mit den kritischsten Teilen Ihrer Anwendung beginnen.
• Bevorzugen Sie Schnittstellen gegenüber Typaliasen bei der Definition von Objektformen: Schnittstellen werden im Allgemeinen bevorzugt, da sie die Deklarationszusammenführung unterstützen, die für die Erweiterung von Typen über verschiedene Dateien hinweg nützlich sein kann.

Real-World-Beispiele

Schauen wir uns einige reale Szenarien an, in denen exakte Typen von Vorteil sein können:

• API-Anforderungspayloads: Beim Senden von Daten an eine API ist es entscheidend, sicherzustellen, dass der Payload dem erwarteten Schema entspricht. Die Erzwingung exakter Typen kann Fehler verhindern, die durch das Senden unerwarteter Eigenschaften verursacht werden. Beispielsweise reagieren viele Zahlungsabwicklungs-APIs äußerst empfindlich auf unerwartete Daten.
• Konfigurationsdateien: Konfigurationsdateien enthalten oft eine große Anzahl von Eigenschaften, und Tippfehler sind häufig. Die Verwendung exakter Typen kann helfen, diese Tippfehler frühzeitig zu erkennen. Wenn Sie Serverstandorte in einer Cloud-Bereitstellung einrichten, wird ein Tippfehler in einer Standorteinstellung (z. B. eu-west-1 vs. eu-wet-1) äußerst schwierig zu debuggen, wenn er nicht im Vorfeld erkannt wird.
• Datentransformationspipelines: Beim Transformieren von Daten von einem Format in ein anderes ist es wichtig sicherzustellen, dass die Ausgabedaten dem erwarteten Schema entsprechen.
• Message Queues: Beim Senden von Nachrichten über eine Message Queue ist es wichtig sicherzustellen, dass der Message Payload gültig ist und die richtigen Eigenschaften enthält.

Beispiel: Internationalisierungs- (i18n-) Konfiguration

Stellen Sie sich vor, Sie verwalten Übersetzungen für eine mehrsprachige Anwendung. Sie könnten ein Konfigurationsobjekt wie dieses haben:

interface Translation {
  greeting: string;
  farewell: string;
}

interface I18nConfig {
  locale: string;
  translations: Translation;
}

const englishConfig: I18nConfig = {
  locale: "en-US",
  translations: {
    greeting: "Hello",
    farewell: "Goodbye"
  }
};


//Dies wird ein Problem sein, da eine überschüssige Eigenschaft vorhanden ist, die stillschweigend einen Fehler einführt.
const spanishConfig: I18nConfig = {
  locale: "es-ES",
  translations: {
    greeting: "Hola",
    farewell: "Adiós",
    typo: "unbeabsichtigte Übersetzung"
  }
};

//Lösung: Verwenden von Omit
const spanishConfigCorrect: I18nConfig = {
  locale: "es-ES",
  translations: {
    greeting: "Hola",
    farewell: "Adiós"
  } as Omit & Translation
};

Ohne exakte Typen könnte ein Tippfehler in einem Übersetzungsschlüssel (wie das Hinzufügen eines `typo`-Felds) unbemerkt bleiben, was zu fehlenden Übersetzungen in der Benutzeroberfläche führt. Durch die Erzwingung einer strengeren Übereinstimmung der Objektform können Sie diese Fehler während der Entwicklung erkennen und verhindern, dass sie in die Produktion gelangen.

Schlussfolgerung

Obwohl TypeScript keine integrierten "exakten Typen" hat, können Sie ähnliche Ergebnisse erzielen, indem Sie eine Kombination aus TypeScript-Funktionen und -Techniken wie Typzusicherungen mit `Omit`, Factory-Funktionen, Type Guards, `Readonly`, `as const` und externen Bibliotheken wie Zod und io-ts verwenden. Durch die Erzwingung einer strengeren Übereinstimmung der Objektform können Sie die Robustheit Ihres Codes verbessern, häufige Fehler verhindern und Ihre Anwendungen zuverlässiger machen. Denken Sie daran, den Ansatz zu wählen, der Ihren Anforderungen am besten entspricht, und ihn konsistent in Ihrer gesamten Codebasis anzuwenden. Indem Sie diese Ansätze sorgfältig berücksichtigen, können Sie eine größere Kontrolle über die Typen Ihrer Anwendung erlangen und die langfristige Wartbarkeit erhöhen.