TypeScript-zu-Mock-JSON-Generator

Füge ein TypeScript-Interface ein und erzeuge direkt in deinem Browser realistisches Mock-JSON, das dazu passt. Dein Code bleibt auf deinem Gerät.

Dein TypeScript-Interface wird lokal in deinem Browser geparst und gemockt und niemals hochgeladen, und die erzeugten Daten sind zufällige Beispieldaten, keine echten Datensätze.

Hast du schon JSON? Wandle es mit JSON to TypeScript in TypeScript um.

Über TypeScript zu Mock-Daten

Dieses TypeScript-zu-Mock-Daten-Tool nimmt ein Interface oder einen Type-Alias, das du einfügst, und erzeugt realistisches Mock-JSON, das zu seiner Form passt. Es liest die Typstruktur und wählt für jede Eigenschaft einen Fake-Wert, gesteuert sowohl durch den Feldnamen als auch durch den deklarierten Typ: ein email-Feld wird zu einer plausiblen E-Mail, name wird zu einem vollständigen Namen, createdAt wird zu einem ISO-Datum, id wird zu einer UUID oder Zahl, und einfache Strings werden zu Wörtern. Verschachtelte Interfaces, Inline-Objekte, Arrays, String-Literal-Unions, optionale Member und Date werden alle verarbeitet, und du steuerst, wie viele Objekte erzeugt werden und ob optionale Felder erscheinen. Nutze es, um Tests zu befüllen, API-Antworten zu prototypen oder eine UI mit Beispieldaten zu füllen, statt Fixtures von Hand zu schreiben. Alles läuft in deinem Browser, sodass das eingefügte Interface lokal verarbeitet wird und dein Gerät nie verlässt.

Funktionen

So verwendest du TypeScript zu Mock-Daten

  1. Füge ein TypeScript-Interface oder einen Type-Alias in das Eingabefeld ein.
  2. Lege fest, wie viele Objekte erzeugt werden und ob optionale Felder enthalten sein sollen.
  3. Wenn du mehrere Interfaces eingefügt hast, wähle, welches als Wurzel dienen soll.
  4. Lies das erzeugte Mock-JSON rechts, kopiere es dann oder lade eine .json-Datei herunter.

Beispiel

Eingabe

interface User {
  id: number;
  fullName: string;
  email: string;
  role: 'admin' | 'editor' | 'viewer';
  tags: string[];
}

Ausgabe

{
  "id": 4821,
  "fullName": "Ada Lovelace",
  "email": "ada.lovelace@example.com",
  "role": "editor",
  "tags": [
    "design",
    "api"
  ]
}

Feldnamen steuern die Fake-Werte, während das Union-Feld sich zu einem seiner Member auflöst.

Häufige Fehler & Fehlerbehebung

Häufig gestellte Fragen

Wie werden TypeScript-Feldtypen in Fake-Werte umgewandelt?
Jede Eigenschaft wird zuerst nach ihrem Namen abgeglichen – email, name, phone, url, uuid, createdAt und ähnliche Hinweise werden auf passende Fake-Daten abgebildet – und andernfalls nach ihrem deklarierten Typ, sodass string, number, boolean und null jeweils einen sinnvollen erzeugten Wert erhalten.
Unterstützt es verschachtelte Interfaces, Arrays und Unions?
Ja. Verschachtelte Interfaces und Inline-Objekttypen werden rekursiv erweitert, Array-Typen wie string[] werden zu mehreren erzeugten Elementen, und eine String-Literal-Union wie 'admin' | 'editor' löst sich zu einem ihrer Member auf.
Kann ich ein Array vieler Objekte auf einmal erzeugen?
Ja. Setze die Objektanzahl über 1, und das Tool gibt ein JSON-Array mit so vielen erzeugten Objekten zurück; eine Anzahl von 1 gibt ein einzelnes Objekt statt eines Arrays zurück.
Wie werden optionale Eigenschaften behandelt?
Member, die mit prop?: als optional markiert sind, werden über den Optionals-Schalter gesteuert. Schalte ihn an, um sie stets einzuschließen, oder aus, um jedes optionale Feld aus der Ausgabe wegzulassen.
Was passiert mit einem Date-Feld oder einem ISO-Zeitstempel?
Ein Date-Typ sowie Namenshinweise wie createdAt, updatedAt oder timestamp erzeugen einen ISO-8601-Datumsstring, sodass das Mock-JSON gültig und leicht zu parsen bleibt.
Wird das TypeScript, das ich einfüge, irgendwohin gesendet?
Nein. Das Interface wird geparst und das Mock-JSON vollständig in deinem Browser erzeugt, sodass der eingefügte Code lokal verarbeitet wird und dein Gerät nie verlässt.

Verwandte Tools

Alle ArrayKit-Tools