Mit TypeScript markierte Unions sind OP

Hatten Sie jemals Probleme mit der Handhabung mehrerer Objektformen in TypeScript und wünschten sich eine typsicherere Lösung?

Wenn ja, sind Sie nicht allein. Viele Entwickler sind sich des vollen Potenzials nicht bewusst, das Tagged Unions (auch als diskriminierte Unions bezeichnet) in TypeScript bieten. Diese leistungsstarke Funktion kann die Sicherheit, Lesbarkeit und Wartbarkeit Ihres Codes verbessern. In diesem Artikel werden wir uns eingehend mit getaggten Unions befassen und untersuchen, wie sie Ihre TypeScript-Kenntnisse verbessern können.

?️ Was sind getaggte Gewerkschaften?

Tagged Unions ermöglichen es Ihnen, Typen zu erstellen, die eine von mehreren möglichen Formen darstellen, jede mit einer Unterscheidungseigenschaft, die als „Tag“ oder „Diskriminator“ bekannt ist. Dadurch kann TypeScript die Typen in bedingten Prüfungen eingrenzen und sicherstellen, dass Ihr Code alle möglichen Fälle explizit behandelt.

? Warum sollte es Sie interessieren?

Verbesserte Typensicherheit

Mit Tags versehene Unions helfen dabei, Fehler zur Kompilierungszeit zu erkennen, indem sie sicherstellen, dass alle möglichen Fälle behandelt werden. Dies reduziert Laufzeitfehler und macht Ihren Code robuster.

Klarer und wartbarer Code

Durch die explizite Definition der Form jedes einzelnen Falls wird Ihr Code besser lesbar und einfacher zu warten. Zukünftige Entwickler (oder sogar Sie selbst) werden es Ihnen danken!

Vollständigkeitsprüfung

TypeScript kann Sie warnen, wenn Sie vergessen, einen möglichen Fall zu behandeln, und so sicherstellen, dass Ihr Code alle Szenarien berücksichtigt.

? Markiert Gewerkschaften nach Beispiel

Stellen Sie sich ein Szenario vor, in dem Sie unterschiedliche Formen haben und deren Flächen berechnen möchten:

// Define interfaces with a discriminant property 'kind'
interface Circle {
  kind: 'circle';
  radius: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

interface Triangle {
  kind: 'triangle';
  base: number;
  height: number;
}

// Create a union type of all shapes
type Shape = Circle | Rectangle | Triangle;

// Function to calculate the area based on shape kind
function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;

    case 'rectangle':
      return shape.width * shape.height;

    case 'triangle':
      return (shape.base * shape.height) / 2;

    default:
      // The 'never' type ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

Was passiert hier?

• Diskriminanzeigenschaft (kind): Jede Schnittstelle enthält eine kind-Eigenschaft mit einem Literaltyp. Diese Eigenschaft fungiert als Tag für die Union.
• Vereinigungstyp (Form): Kombiniert alle Formschnittstellen zu einem einzigen Typ.
• Type Narrowing: Innerhalb der switch-Anweisung weiß TypeScript anhand der kind-Eigenschaft genau, um welche Form es sich handelt.
• Vollständigkeitsprüfung: Der Standardfall mit dem Typ „Never“ stellt sicher, dass TypeScript einen Fehler bei der Kompilierung erzeugt, wenn eine neue Form hinzugefügt, aber nicht verarbeitet wird.

?️ Beispiel: Staatsverwaltung

Mit Tags versehene Unions sind in Zustandsverwaltungsszenarien unglaublich nützlich, z. B. bei der Darstellung der verschiedenen Zustände eines asynchronen Vorgangs (z. B. Datenabruf).

interface LoadingState {
  status: 'loading';
}

interface SuccessState {
  status: 'success';
  data: string;
}

interface ErrorState {
  status: 'error';
  error: string;
}

type AppState = LoadingState | SuccessState | ErrorState;

function renderApp(state: AppState) {
  switch (state.status) {
    case 'loading':
      return 'Loading...';
    case 'success':
      return `Data: ${state.data}`;
    case 'error':
      return `Error: ${state.error}`;
    // default case can be omitted because typescript is making sure all cases are covered!
  }
}

? Warum ist das gut?

• Klare Darstellung der Zustände: Jede Schnittstelle stellt einen bestimmten Zustand der Anwendung dar, sodass sie leicht zu verstehen und zu verwalten ist.

• Typsicherheit mit Datenzugriff: Wenn der Status „Erfolg“ ist, weiß TypeScript, dass dieser Status eine Dateneigenschaft hat. Wenn der Status „Fehler“ lautet, ist ihm die Fehlereigenschaft ebenfalls bekannt. Dies verhindert, dass Sie versehentlich auf Eigenschaften zugreifen, die in einem bestimmten Zustand nicht vorhanden sind.

• Vollständigkeitsprüfung: Wenn Sie einen neuen Status hinzufügen (z. B. EmptyState mit dem Status „leer“), werden Sie von TypeScript benachrichtigt, diesen neuen Fall in der renderApp-Funktion zu behandeln.

• Verbesserte Wartbarkeit: Wenn Ihre Anwendung wächst, wird die Verwaltung verschiedener Zustände einfacher. Änderungen in einem Teil des Codes führen zu notwendigen Aktualisierungen an anderer Stelle und reduzieren so Fehler.

? Tipps zur Verwendung von Tagged Unions

Konsistenter Diskriminator: Verwenden Sie für alle Typen denselben Eigenschaftsnamen (z. B. Typ, Art oder Status).
Literaltypen: Stellen Sie sicher, dass die Diskriminatoreigenschaft Literaltypen („E-Mail“, „SMS“ usw.) für eine genaue Typeingrenzung verwendet.
Vermeiden Sie String-Enums: Bevorzugen Sie String-Literal-Typen gegenüber Enums für Diskriminatoren, um die Typeingrenzung unkompliziert zu halten.

? Abschluss

Tagged Unions sind eine leistungsstarke Funktion in TypeScript, die Ihnen dabei helfen kann, sichereren und wartbareren Code zu schreiben. Indem Sie jeden möglichen Typ explizit behandeln, verringern Sie die Wahrscheinlichkeit unerwarteter Fehler und machen Ihren Code verständlicher.

Probieren Sie Tagged Unions in Ihrem aktuellen oder nächsten TypeScript-Projekt aus und erleben Sie die Vorteile aus erster Hand!

? Weiterführende Literatur

• TypeScript-Handbuch: Unions und Schnittmengentypen
• Was sind TypeScript Discriminated Unions?

Das obige ist der detaillierte Inhalt vonMit TypeScript markierte Unions sind OP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!