Json To Yup Schema
Typsicherer Yup-Schema-Synthesizer

JSON zu Yup Validierungsschema-Generator

Konvertieren Sie JSON-Muster in typsichere Yup-Objekt-Validierungsschemas mit yup.string(), yup.number(), yup.array() und Pflichtfeldregeln.

100% clientseitige Privatsphäre
Null Serverübertragung
Voreinstellungen:
Einzug:
Pflichtfeld-Strategie:
Quell-JSON-Nutzdaten
import * as yup from "yup";

// --- Inferred Nested Sub-Schemas ---
const OrderCustomerSchema = yup.object({
    id: yup.number().integer().required(),
    fullName: yup.string().required(),
    email: yup.string().email().required(),
    phone: yup.string().required(),
    tier: yup.string().required(),
    loyaltyPoints: yup.number().integer().required(),
  });
const OrderShippingAddressCoordinatesSchema = yup.object({
      latitude: yup.number().required(),
      longitude: yup.number().required(),
    });
const OrderShippingAddressSchema = yup.object({
    street: yup.string().required(),
    suite: yup.string().required(),
    city: yup.string().required(),
    state: yup.string().required(),
    postalCode: yup.string().required(),
    country: yup.string().required(),
    coordinates: OrderShippingAddressCoordinatesSchema,
  });
const OrderItemsItemSchema = yup.object({
    sku: yup.string().required(),
    title: yup.string().required(),
    quantity: yup.number().integer().required(),
    unitPrice: yup.number().required(),
    discount: yup.number().nullable(),
    tags: yup.array().of(yup.string().required()).required(),
    inStock: yup.boolean().required(),
  });
const OrderPaymentSummarySchema = yup.object({
    currency: yup.string().required(),
    subtotal: yup.number().integer().required(),
    tax: yup.number().required(),
    shippingFee: yup.number().integer().required(),
    grandTotal: yup.number().required(),
    transactionRef: yup.string().required(),
    status: yup.string().required(),
  });

// --- Root Yup Schema Definition ---
orderSchema = yup.object({
  orderId: yup.string().uuid().required(),
  orderNumber: yup.string().required(),
  createdAt: yup.string().datetime().required(),
  isFulfilled: yup.boolean().required(),
  customer: OrderCustomerSchema,
  shippingAddress: OrderShippingAddressSchema,
  items: yup.array().of(OrderItemsItemSchema).required(),
  paymentSummary: OrderPaymentSummarySchema,
}).required();

// --- Inferred TypeScript Types ---
OrderCustomerType = yup.InferType<typeof OrderCustomerSchema>;
OrderShippingAddressCoordinatesType = yup.InferType<typeof OrderShippingAddressCoordinatesSchema>;
OrderShippingAddressType = yup.InferType<typeof OrderShippingAddressSchema>;
OrderItemsItemType = yup.InferType<typeof OrderItemsItemSchema>;
OrderPaymentSummaryType = yup.InferType<typeof OrderPaymentSummarySchema>;
OrderType = yup.InferType<typeof orderSchema>;
Strukturelle Komplexität
Tiefe: 45 Unterschemas
Erkannte Formate
3 Erkannte RegelnEmail, UUID, ISO, URL
TypeScript-Exporte
InferType ONsmart

100% Client-Side AST-Inferenz

JSON-Parsing und Yup-Schema-Synthese laufen vollständig im lokalen Browser-Sandbox ohne Netzwerk-Telemetrie.

Typsicheres Yup & TypeScript InferType

Erzeugt rekursive yup.object(), yup.array().of(), intelligente String-Formate und TypeScript-Typdefinitionen für Formik und React Hook Form.

Intelligente Validierungs- und Null-Regeln

Erkennt automatisch E-Mails, UUIDs, ISO-Daten, URLs und Zahlenbegrenzungen mit konfigurierbaren Required- und Nullable-Regeln.

Technische Referenz & Architektur-Leitfaden

JSON zu Yup Validierungsschema-Generator — Referenz-Leitfaden

Konvertieren Sie JSON-Muster in typsichere Yup-Objekt-Validierungsschemas mit yup.string(), yup.number(), yup.array() und Pflichtfeldregeln.

Wichtige Parameter & Steuerelemente

Root-Schema-Namestring

Bezeichner für das exportierte Haupt-Yup-Schema und die zugehörige abgeleitete TypeScript-Typdefinition.

Standard: rootSchema
Unterschemas extrahierenboolean

Zerlegt verschachtelte Objekthierarchien in wiederverwendbare, eigenständige Schema-Deklarationen.

Standard: true
Intelligente Formaterkennungboolean

Erkennt automatisch RFC 5322 E-Mails, UUIDs, URLs und ISO 8601 Datumsangaben und wendet .email(), .uuid(), .url() und .date() an.

Standard: true
Pflichtfeld-Strategieenum (all | optional | non-null)

Steuert, ob inferierte Eigenschaften mit .required() versehen, als .optional() belassen oder basierend auf Nullwerten bewertet werden.

Standard: all
Unbekannte Schlüssel verbieten (.noUnknown)boolean

Fügt Objektschemas .noUnknown() hinzu, um Payloads mit nicht deklarierten Schlüsseln abzuweisen.

Standard: false
TypeScript InferType exportierenboolean

Erzeugt export type RootType = yup.InferType<typeof rootSchema>; zur statischen Typensynchronisation.

Standard: true

Profi-Tipps & Best Practices

Nutzen Sie das generierte Schema

Nutzen Sie das generierte Schema direkt in Formik über validationSchema={rootSchema} oder in React Hook Form mit useForm({ resolver: yupResolver(rootSchema) }) aus @hookform/resolvers/yup.

Yup stoppt die Validierung

Yup stoppt die Validierung standardmäßig beim ersten Fehler. Übergeben Sie schema.validate(data, { abortEarly: false }), um alle Feldfehler in err.inner für eine umfassende Formularanzeige zu sammeln.

Vermeiden Sie doppelte

Vermeiden Sie doppelte Schnittstellendefinitionen, indem Sie TypeScript-Typen direkt mit export type FormData = yup.InferType<typeof rootSchema>; ableiten, sodass Schemaänderungen automatisch synchronisiert bleiben.

Bereinigen Sie Benutzereingaben

Bereinigen Sie Benutzereingaben während der Validierung, indem Sie .transform((value) => (value === '' ? null : value)) oder .trim() an yup.string()-Regeln anhängen, um Leerstrings und Leerzeichen zu normalisieren.

Häufige Fallstricke & Fehlerbehebung

ValidationError meldet nur den ersten aufgetretenen Fehler anstatt aller ungültigen Eingabefelder.

Yup arbeitet standardmäßig mit abortEarly: true. Übergeben Sie bei schema.validate(data) oder schema.validateSync(data) die Option { abortEarly: false } und durchsuchen Sie err.inner nach allen Einzelfehlern.

Zusätzliche JSON-Eigenschaften verschwinden nach der Validierung oder verursachen unerwartete Validierungsfehler.

Yup entfernt standardmäßig nicht deklarierte Schlüssel. Wenn Sie unbekannte Eigenschaften verbieten wollen, verwenden Sie .noUnknown(). Sollen sie erhalten bleiben, setzen Sie { stripUnknown: false } in den Validierungsoptionen.

ISO 8601 Datums-Strings schlagen fehl oder werden in ungültige JavaScript Date-Objekte umgewandelt.

yup.date() parst Eingaben mit new Date(), was bei leeren Strings fehlschlägt. Verwenden Sie .nullable().transform((curr, orig) => orig === '' ? null : curr) oder validieren Sie Zeitstempel mit yup.string().matches() für strikte ISO-Muster.

Häufig gestellte Fragen (FAQ)

Was ist der Hauptunterschied zwischen Yup und Zod in TypeScript-Projekten?▼

Beide validieren Laufzeitdaten, jedoch wurde Zod von Grund auf für TypeScript-Typinferenz entwickelt. Yup ist traditionell tief im React-Ökosystem verankert (insbesondere Formik und React Hook Form), bietet flexible Typumwandlungen und zeichnet sich durch mächtige bedingte Validierungen über .when() aus.

Wie verbinde ich das generierte Yup-Schema mit Formik oder React Hook Form?▼

Übergeben Sie das Schema bei Formik direkt an die Komponente: <Formik validationSchema={rootSchema} ... />. Installieren Sie für React Hook Form @hookform/resolvers und initialisieren Sie das Formular mit useForm({ resolver: yupResolver(rootSchema) }).

Wie verarbeitet der Generator unterschiedliche Datentypen in JSON-Arrays?▼

Der Generator prüft alle Elemente des Arrays. Bei übereinstimmenden Strukturen wird ein konsistentes yup.array().of(yup.object({...})) erzeugt. Bei unterschiedlichen Feldern werden Eigenschaften als optional markiert oder verallgemeinert.

Werden meine JSON-Daten oder Validierungscodes an externe Server übertragen?▼

Nein. Sämtliche AST-Analysen, Schemasynthesen und Typenableitungen laufen zu 100 % lokal in der Sandbox Ihres Browsers ab. Es werden keinerlei Daten oder Telemetrien über das Netzwerk gesendet.

Kann ich TypeScript-Typen aus dem generierten Yup-Schema ableiten, ohne manuelle Interfaces zu schreiben?▼

Ja. Yup stellt den integrierten Utility-Typ yup.InferType<typeof schema> bereit. Mit export type MyType = yup.InferType<typeof rootSchema>; bleiben Ihre TypeScript-Typen stets automatisch mit den Laufzeitregeln synchron.

Verwandte Werkzeuge & Dienstprogramme

Alle Werkzeuge →