GraphQL Schema to TypeScript Converter
Paste a GraphQL SDL schema to instantly generate matching TypeScript interfaces and string-literal union types, with nullability mapped onto optional and nullable fields. Free online developer tool.
Paste GraphQL Schema (SDL)
TypeScript Interfaces
TypeScript output will appear here...
Free GraphQL Schema to TypeScript Converter
Paste a GraphQL SDL schema to instantly generate matching TypeScript interfacedeclarations and string-literal union types, with GraphQL's nullability rules mapped onto TypeScript's optional and nullable field syntax.
How to Use It
Paste your GraphQL schema definition language (SDL) into the input box, or click "Load Example" to see a sample run. The tool builds a real schema with GraphQL.js, then walks every object, interface, and input type into a TypeScript interface, and every enum into a union of string literals. Scalars map onto their closest TypeScript equivalent, list types become arrays, and any field that isn't wrapped in GraphQL's non-null (!) marker becomes field?: T | null to reflect that it can be both omitted and explicitly null.
Example
A User type with id: ID!, email: String, and posts: [Post!]! generates id: string;, email?: string | null;, and posts: Post[]; — the non-null list of non-null posts stays a plain required array, while the nullable scalar becomes optional and nullable.
Common Use Cases
- Bootstrapping TypeScript types for a GraphQL API client without running a full codegen setup.
- Checking at a glance how a schema's nullability rules translate into TypeScript.
- Reviewing a schema design by reading its generated interfaces.
- Speeding up a manual TypeScript migration for a project already using GraphQL SDL.
FAQs
How are custom scalars handled?
Any scalar beyond the five built-ins (String, Int, Float,Boolean, ID) maps to TypeScript's any, and the tool adds a comment above the generated interfaces naming every custom scalar it encountered so you can refine the type by hand.
Why does a nullable field get both ? and | null?
GraphQL's nullable fields can be two different things: absent from the response entirely, or present with an explicit null value. TypeScript's optional marker (?) only covers the first case, so the tool adds | null as well to cover both.
Is my schema uploaded anywhere?
No — parsing and type generation happen entirely client-side in your browser. Nothing you paste is sent to a server.