GraphQL zu TypeScript
GraphQL Code Generator

GraphQL SDL to TypeScript Types & Interfaces Converter

Konvertieren Sie GraphQL Schema Definition Language (SDL) Typen, Inputs und Enums direkt im Browser in saubere, abhängigkeitsfreie TypeScript-Interfaces.

Voreinstellungen:
Eingabe
/**
 * -----------------------------------------------------------------------------
 * GraphQL SDL to TypeScript Types & Interfaces
 * Zero-dependency, client-synthesized TypeScript definitions.
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * GRAPHQL SCALARS & UTILITY HELPER TYPES
 * ============================================================================= */

export type Maybe<T> = T | null;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };

/** All custom GraphQL scalar types defined in schema */
export type DateTime = string;
export type JSON = Record<string, any>;


/* =============================================================================
 * ENUMS
 * ============================================================================= */

export enum UserRole {
  ADMIN = 'ADMIN',
  CUSTOMER = 'CUSTOMER',
  VENDOR = 'VENDOR',
}

export enum OrderStatus {
  PENDING = 'PENDING',
  PROCESSING = 'PROCESSING',
  SHIPPED = 'SHIPPED',
  DELIVERED = 'DELIVERED',
  CANCELLED = 'CANCELLED',
}


/* =============================================================================
 * GRAPHQL INTERFACES, OBJECT TYPES & UNIONS
 * ============================================================================= */

export interface Node {
  id: string;
}

export interface Timestamps {
  createdAt: string;
  updatedAt: string | null;
}

/**
 * Represents a customer or administrator account in the store.
 */
export interface User extends Node, Timestamps {
  id: string;
  email: string;
  displayName: string;
  role: UserRole;
  orders: Order[];
  defaultAddress: Address | null;
  createdAt: string;
  updatedAt: string | null;
}

export interface Product extends Node, Timestamps {
  id: string;
  sku: string;
  title: string;
  price: number;
  inventoryCount: number;
  tags: string[];
  createdAt: string;
  updatedAt: string | null;
}

export interface Order extends Node, Timestamps {
  id: string;
  orderNumber: string;
  customer: User;
  status: OrderStatus;
  items: OrderItem[];
  totalAmount: number;
  shippingAddress: Address;
  createdAt: string;
  updatedAt: string | null;
}

export interface OrderItem {
  id: string;
  product: Product;
  quantity: number;
  unitPrice: number;
}

export interface Address {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

export interface Query {
  me: User | null;
  user: User | null;
  product: Product | null;
  products: Product[];
  search: SearchResult[];
}

export interface Mutation {
  createProduct: Product;
  checkoutCart: Order;
  cancelOrder: Order;
}

export type SearchResult = Product | User | Order;


/* =============================================================================
 * GRAPHQL INPUT OBJECTS & OPERATION ARGUMENTS
 * ============================================================================= */

export interface CreateProductInput {
  sku: string;
  title: string;
  price: number;
  inventoryCount?: number | null;
  tags?: string[] | null;
}

export interface CheckoutCartInput {
  userId: string;
  itemIds: string[];
  shippingAddress: AddressInput;
}

export interface AddressInput {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

/**
 * Arguments for User.orders
 */
export interface UserOrdersArgs {
  limit?: number | null;
  offset?: number | null;
}

/**
 * Arguments for Query.user
 */
export interface QueryUserArgs {
  id: string;
}

/**
 * Arguments for Query.product
 */
export interface QueryProductArgs {
  id: string;
}

/**
 * Arguments for Query.products
 */
export interface QueryProductsArgs {
  limit?: number | null;
  cursor?: string | null;
}

/**
 * Arguments for Query.search
 */
export interface QuerySearchArgs {
  query: string;
  limit?: number | null;
}

/**
 * Arguments for Mutation.createProduct
 */
export interface MutationCreateProductArgs {
  input: CreateProductInput;
}

/**
 * Arguments for Mutation.checkoutCart
 */
export interface MutationCheckoutCartArgs {
  input: CheckoutCartInput;
}

/**
 * Arguments for Mutation.cancelOrder
 */
export interface MutationCancelOrderArgs {
  orderId: string;
  reason?: string | null;
}

Schema Symbols
15 Entitäten
Object types, inputs, interfaces, enums and unions parsed
Felder
56 Generiert
Strongly-typed TypeScript attributes and argument definitions
Compilation Speed
$<span suppressHydrationWarning>{generated.metrics.parseTimeMs}ms</span> (Reines Client-AST)
Beschreibung

Zero-Knowledge Lokale Ausführung

Alle Datenverarbeitungen, Parsen und Generierungen laufen streng im lokalen Browserspeicher ab. Keine externen Server-Uploads.

Sub-Millisekunden AST-Engine

All data payloads remain strictly local with zero external server communication.

Production Ready Export

Clean, optimized output formats ready for immediate deployment.

Technische Referenz & Architektur-Leitfaden

GraphQL SDL zu TypeScript Typen & Interfaces Konverter — Referenz-Leitfaden

Konvertieren Sie GraphQL Schema Definition Language (SDL) Typen, Inputs und Enums direkt im Browser in saubere, abhängigkeitsfreie TypeScript-Interfaces.

Wichtige Parameter & Steuerelemente

DeklarationsformatEnum (interface | type)

Gibt TypeScript-Strukturen als erweiterbare Interfaces oder strikte Type-Alias-Unions aus.

Standard: interface
Strategie für Nullable-FelderEnum (null | undefined | both)

Typisierungsstrategie für optionale und nullbare GraphQL-Felder ohne das Nicht-Null-Ausrufezeichen (!).

Standard: both
Array-SyntaxEnum (T[] | Array<T>)

Typisierungskonvention für GraphQL-Listenstrukturen [Type].

Standard: T[]
Enum-DarstellungEnum (enum | union | const_object)

TypeScript-Ausgabeformat für GraphQL-Enum-Definitionen (Standard-Enum, String-Literal-Union oder const-Objekt).

Standard: union
Benutzerdefiniertes Skalar-MappingRecord<string, string>

JSON-Zuordnungswörterbuch für domänenspezifische GraphQL-Skalare auf native TypeScript-Typen.

Standard: {"DateTime": "string", "JSON": "Record<string, unknown>"}

Profi-Tipps & Best Practices

__typename für Diskriminierung

Aktivieren Sie die Eigenschaft __typename in generierten Interfaces, um die automatische Typeneingrenzung diskriminierter Unions in Apollo Client, Urql und Relay-Caches zu nutzen.

String-Literal-Unions für Enums

Generieren Sie Enums als String-Literal-Unions ("ADMIN" | "USER") anstelle von TypeScript-Enums, um zusätzlichen JavaScript-Laufzeitcode zu vermeiden und optimales Tree-Shaking zu gewährleisten.

Input-Typen sauber trennen

Halten Sie GraphQL-Input-Objekttypen und Query-Argument-Interfaces (z. B. CreateUserInput) strikt getrennt von Domänenmodellen, um saubere Komponenten-Props zu gewährleisten.

Nullability bei Listen beachten

Beachten Sie die GraphQL-Listenregeln: [Item!]! erzeugt Item[], [Item]! erzeugt (Item | null)[] und [Item!] erzeugt Item[] | null.

Häufige Fallstricke & Fehlerbehebung

TypeScript-Kompilierungsfehler TS2304: Cannot find name für benutzerdefinierte Skalare

Hinterlegen Sie explizite Typzuordnungen in der Konfiguration für benutzerdefinierte Skalare (z. B. DateTime zu string oder Date und BigInt zu string).

Zirkuläre Typenabhängigkeiten bei rekursiven GraphQL-SDL-Definitionen

Wechseln Sie das Deklarationsformat von "type" auf "interface", da TypeScript-Interfaces zirkuläre und selbstreferenzierende Deklarationen nativ ohne Tiefenbeschränkung auflösen.

Warnungen bei benutzerdefinierten GraphQL-Schema-Direktiven

Der Parser übersetzt @deprecated-Direktiven automatisch in JSDoc-Tags; stellen Sie sicher, dass eigene Direktiven der gültigen SDL-AST-Syntax entsprechen.

Häufig gestellte Fragen (FAQ)

Wie werden GraphQL-Nicht-Null-Einschränkungen (!) in TypeScript übersetzt?▼

Ein Nicht-Null-Feld (z. B. name: String!) wird als Pflichteigenschaft (name: string) generiert. Felder ohne ! werden gemäß gewählter Strategie als optional oder nullbar (name?: string | null) abgebildet.

Unterstützt das Tool GraphQL-Unions und -Interfaces?▼

Ja. GraphQL-Interfaces werden in erweiterbare TypeScript-Interfaces übersetzt, während GraphQL-Unions in diskriminierte Union-Typen mit dem __typename-Diskriminator umgewandelt werden.

Werden Direktiven wie @deprecated in TypeScript-Kommentare übernommen?▼

Ja. Direktiven wie @deprecated(reason: "...") werden aus dem SDL-AST extrahiert und als standardkonforme JSDoc /** @deprecated ... */ Annotationen über der Eigenschaft ausgegeben.

Wird mein proprietäres GraphQL-Schema an externe Server übertragen oder gespeichert?▼

Nein. Sämtliche SDL-Syntaxanalysen, AST-Erstellungen und die Generierung der TypeScript-Interfaces erfolgen zu 100 % lokal in der Sandbox Ihres Webbrowsers ohne externe Netzanfragen.

Können sowohl GraphQL input- als auch type-Definitionen konvertiert werden?▼

Ja. Sowohl reguläre GraphQL-Objekttypen (type) als auch Eingabeobjekttypen (input) werden vollständig unterstützt und für typsichere Mutations-Payloads aufbereitet.

Verwandte Werkzeuge & Dienstprogramme

Alle Werkzeuge →
K8S Configmap Secret Generator Entwickler-ReferenzEntwickler

Generieren Sie produktionsreife Kubernetes ConfigMap- und Secret- (Opaque, TLS, docker-registry) YAML-Manifeste mit Base64-Kodierung und Unveränderlichkeit.

Werkzeug öffnen→
Kubernetes HorizontalPodAutoscaler (HPA v2) GeneratorEntwickler

Erstellen Sie autoskalierende HPA v2 YAML-Manifeste mit CPU- und Speicher-Zielauslastung, benutzerdefinierten Metriken und Stabilisierungsrichtlinien für Scale-Up und Scale-Down.

Werkzeug öffnen→
Redis (redis.conf) Konfigurations-Builder & Performance-TunerEntwickler

Erstellen Sie produktionsreife redis.conf-Konfigurationen mit optimierten maxmemory-Richtlinien, RDB/AOF-Persistenz, Netzwerkbindung und robuster ACL-Sicherheit.

Werkzeug öffnen→
PostgreSQL (postgresql.conf) Hardware-Tuning & Builder Entwickler-HandbuchEntwickler

Berechnen und generieren Sie optimierte postgresql.conf-Einstellungen basierend auf Hardwarespezifikationen (shared_buffers, work_mem, effective_cache_size, max_connections).

Werkzeug öffnen→
Tägliche Off-Peak-DatenbanksicherungEntwickler

Erstellen Sie produktionsreife systemd-Timer-Units und zugehörige Oneshot-Services mit OnCalendar-Planung, OnBootSec-Intervallen, Persistent-Ausführung und zufälligen Verzögerungen.

Werkzeug öffnen→
TypeScript (tsconfig.json) Konfigurations-Generator Entwickler-HandbuchEntwickler

Erstellen Sie moderne, robuste tsconfig.json-Konfigurationen für Next.js, Node.js, Vite oder Bibliotheken mit Strict Mode, Pfad-Aliasen und optimaler Modulauflösung.

Werkzeug öffnen→