Dynamisches Generieren von Schnittstellen und Validierungsschemata in TypeScript mit Yup

In einem aktuellen Projekt stieß ich auf ein Problem, das ein Objekt benötigte, das der Schlüssel dynamisch durch eine konstante Zuordnung definiert wurde, und mindestens ein Schlüssel hatte einen effektiven Wert.

Herausforderung

Wir haben ein Metadatamap -Objekt, das effektive Schlüssel und seine entsprechenden Typen definiert:

Nach dieser Zuordnung brauchen wir:

<code class="language-typescript">const MetadataMap = {  
 userId: Number,  
 utmSource: String,  
 utmMedium: String,  
 utmCampaign: String,  
} as const;</code>

generieren Sie dynamisch eine TypsScript -Schnittstelle, um die Sicherheitstyp zu erzwingen.

1. Erstellen Sie einen YUP -Verifizierungsmodus und basierend auf dem Mapping -Verifizierungsobjekt.
2. Stellen Sie sicher, dass mindestens ein Schlüssel im Objekt gültige Gültigkeitswerte (nicht definiert) hat.
3. Hartkodierschlüssel vermeiden, um die Aufrechterhaltung von Lösungen zu verbessern.
Das Typenkript ist jedoch gezwungen, den statischen Typ während der Zusammenstellung auszuführen, während die Yup -Verarbeitung während der Laufzeit überprüft wird.

Schritt 1: Schnittstelle

generieren Um die TypeScript -Schnittstelle aus Metadatamap zu generieren, haben wir den Typ

und Mapping verwendet. Das Folgende ist die Art und Weise, wie wir es definieren: keyof Diese Methode stellt sicher, dass jedes Update von Metadatamap automatisch in der Metadatenschnittstelle spiegelt. Zum Beispiel:

<code class="language-typescript">type Metadata = {  
 [K in keyof typeof MetadataMap]: typeof MetadataMap[K] extends NumberConstructor  
  ? number  
  : string;  
};</code>

// Metadatenschnittstelle generiert:

Schritt 2: Erzeugen Sie den Yup -Modus

<code class="language-typescript">interface Metadata {  
 userId?: number;  
 utmSource?: string;  
 utmMedium?: string;  
 utmCampaign?: string;  
}</code>

dynamisch

Wir müssen einen YUP -Modus dynamisch erstellen, der dem Schlüssel entspricht und Metadatamap eingeben. Verwenden Sie und können wir jeden Schlüssel zu seinem entsprechenden Yup -Verifizierungsgerät zuordnen:

Diese Methode beseitigt die harte Codierung und stellt sicher, dass Änderungen der Metadatamap im Modus ohne manuelle Aktualisierung reflektiert werden. Object.keys reduce Schritt 3: Hinzufügen "mindestens eine Schlüssel" -Regel

<code class="language-typescript">const metadataSchema = Yup.object(  
 Object.keys(MetadataMap).reduce((schema, key) => {  
  const type = MetadataMap[key as keyof typeof MetadataMap];  
  if (type === Number) {  
  schema[key] = Yup.number().optional();  
  } else if (type === String) {  
  schema[key] = Yup.string().optional();  
  }  
  return schema;  
 }, {} as Record<string, any>)  
);</code>

Die nächste Herausforderung besteht darin, sicherzustellen, dass mindestens ein Schlüssel im Objekt einen definierten Wert hat. Wir haben eine

Methode hinzugefügt:

Diese Logik:

.test Stellen Sie sicher, dass das Objekt effektiv ist.

<code class="language-typescript">metadataSchema.test(  
 "at-least-one-key",  
 "Metadata must have at least one valid key.",  
 (value) => {  
  if (!value || typeof value !== "object") return false;  
  const validKeys = Object.keys(MetadataMap) as (keyof typeof MetadataMap)[];  
  return validKeys.some((key) => key in value && value[key] !== undefined);  
 }  
);</code>

extrahieren Sie dynamisch einen gültigen Schlüssel aus Metadatamap.

Überprüfen Sie mindestens einen Schlüssel mit einem nicht definierten Wert.

Ergebnis Das Folgende ist das Verhalten des endgültigen Modus:
3. In diesem Beispiel ist die Überprüfung erfolgreich, da UTMSource ein effektiver Schlüssel mit einem nicht definierten Wert ist.

Das obige ist der detaillierte Inhalt vonDynamisches Generieren von Schnittstellen und Validierungsschemata in TypeScript mit Yup. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!