Verwenden Sie keine solchen Typ -Typ -Typen. Verwenden Sie stattdessen das Kartenmuster

Diese Typscript -Implementierung zeigt einen Refactoring -Prozess zur Verbesserung der Flexibilität und Wartbarkeit. Lassen Sie es uns für Klarheit und verbesserten Fluss umformulieren.

Flexibilität der Typenkript mit dem Kartenmuster verbessern: Eine Fallstudie

Während eines aktuellen Projekts stieß ich auf eine Typuskriptimplementierung, die zwar funktionsfähig war, aber flexibilität. In diesem Beitrag wird das Problem, seine Lösung mit dem Kartenmuster und wie dieser Ansatz die Code -Wartbarkeit verbessert.

verbessert.

Inhaltsverzeichnis

Das anfängliche Problem
Einschränkungen des ursprünglichen Ansatzes
Implementierung der Kartenmusterlösung
Implementierung von Clean Code
Durchsetzung der Sicherheitstypsicherheit mit zulässigen Reaktionen
visuelles Vergleich
Schlussfolgerung

1. Das anfängliche Problem

Der ursprüngliche Code verwendete folgende Typen:

<code class="language-typescript">// Reaction.ts
export type Reaction = {
  count: number;
  percentage: number;
};

// FinalResponse.ts
import { Reaction } from './Reaction';

export type FinalResponse = {
  totalScore: number;
  headingsPenalty: number;
  sentencesPenalty: number;
  charactersPenalty: number;
  wordsPenalty: number;
  headings: string[];
  sentences: string[];
  words: string[];
  links: { href: string; text: string }[];
  exceeded: {
    exceededSentences: string[];
    repeatedWords: { word: string; count: number }[];
  };
  reactions: {
    likes: Reaction;
    unicorns: Reaction;
    explodingHeads: Reaction;
    raisedHands: Reaction;
    fire: Reaction;
  };
};</code>

FinalResponse Dieser

-Typ wurde in einer Bewertungsfunktion verwendet:

<code class="language-typescript">// calculator.ts
export const calculateScore = (
  // ... input parameters ...
  reactions: {
    likes: Reaction;
    unicorns: Reaction;
    explodingHeads: Reaction;
    raisedHands: Reaction;
    fire: Reaction;
  },
): FinalResponse => {
  // Score calculation logic...
};</code>

2. Einschränkungen des ursprünglichen Ansatzes

FinalResponse.ts Hinzufügen einer neuen Reaktion erforderte Änderungen in mehreren Dateien (calculator.ts,

und möglicherweise andere). Diese enge Kopplung erhöhte das Fehlerrisiko und machte den Code weniger aufrechterhalten.

3. Implementierung der Kartenmusterlösung

Map Um dies anzugehen

<code class="language-typescript">// FinalResponse.ts
import { Reaction } from './Reaction';

type AllowedReactions =
  | 'likes'
  | 'unicorns'
  | 'explodingHeads'
  | 'raisedHands'
  | 'fire';

export type ReactionMap = {
  [key in AllowedReactions]: Reaction;
};

export type FinalResponse = {
  // ... other properties ...
  reactions: ReactionMap;
};</code>

4. Clean Code Implementierung

Die Funktion

verwendet jetzt die calculateScore: ReactionMap

<code class="language-typescript">// calculator.ts
export const calculateScore = (
  // ... input parameters ...
  reactions: ReactionMap,
): FinalResponse => {
  // Score calculation logic...
};</code>

5. Durchsetzung der Typensicherheit mit zulässigen Reaktionen

Während das

Flexibilität bietet, ist es entscheidend, die Sicherheit der Typ zu erhalten. Der ReactionMap -Nionentyp beschränkt die zulässigen Reaktionstasten und verhindert die Zugabe beliebiger Reaktionen. AllowedReactions

6. Visueller Vergleich

7. Schlussfolgerung

Dieser nachgeaktete Ansatz gleicht die Flexibilität und die Type von Typen aus. Das Hinzufügen neuer Reaktionen erfordert nur die Aktualisierung des

-Typs, wodurch die Wartbarkeit signifikant verbessert und das Fehlerrisiko im Vergleich zum ursprünglichen eng gekoppelten Design verringert wird. Die Verwendung eines AllowedReactions -Typs emuliert effektiv die Vorteile einer Karte ohne den Laufzeitaufwand eines Record -Objekts. Map

Das obige ist der detaillierte Inhalt vonVerwenden Sie keine solchen Typ -Typ -Typen. Verwenden Sie stattdessen das Kartenmuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!