GraphQL to TypeScript
Generate TypeScript types from a GraphQL SDL: type, interface, input, enum, scalar, union and extend are supported, nullability and lists follow GraphQL semantics (String!, [String!]!), descriptions become JSDoc and @deprecated is marked automatically.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Generated TypeScript
Paste a GraphQL SDL to generate types
What this tool does
- The backend only ships a GraphQL schema and the frontend needs typed query results: generate the interfaces instead of copying fields by hand.
- Produce TypeScript types for a code generator or mock server and treat the schema as the single source of truth, so renamed fields fail at compile time.
- Get a quick overview of an inherited schema: how many object types, enums and inputs it has, and which fields are nullable.
- Write resolvers or data loaders with accurate return types: `String!` and `[Post!]!` are expanded to `string` and `Post[]` exactly as GraphQL defines them.
Example
Input
type User implements Node {
id: ID!
"""Display name"""
name: String!
nickname: String
posts(limit: Int = 10): [Post!]!
role: Role!
}
interface Node {
id: ID!
}
type Post {
id: ID!
title: String!
author: User!
}
enum Role {
ADMIN
MEMBER
}
input CreateUserInput {
name: String!
role: Role = MEMBER
}
scalar DateTime
union SearchResult = User | PostOutput
export interface User extends Node {
id: string;
/** Display name */
name: string;
nickname: string | null;
posts: Post[];
role: Role;
}
export interface Node {
id: string;
}
export interface Post {
id: string;
title: string;
author: User;
}
export type Role = "ADMIN" | "MEMBER";
export interface CreateUserInput {
name: string;
role: Role | null;
}
export type DateTime = unknown;
export type SearchResult = User | Post;Nullability and lists follow GraphQL semantics: `String` → `string | null`, `[String!]!` → `string[]`, `[String]` → `(string | null)[] | null`. Description strings become JSDoc comments.
Frequently asked questions
Does it use the official graphql library?
No. To avoid an extra dependency this tool ships its own SDL lexer and recursive-descent parser, covering only the type system: type, interface, input, enum, scalar, union, extend, plus field types, arguments, directives and description strings.
What happens to field arguments?
Arguments do not take part in TypeScript type generation (they belong to queries, not to the data shape) and are skipped during parsing. Arguments with default values such as `posts(limit: Int = 10)` are skipped correctly too and never break the following fields.
How are custom scalars handled?
A scalar declared in the schema becomes an alias such as `export type DateTime = unknown;` and is referenced by name. Referencing an undeclared type falls back to `unknown` and is reported as a note instead of emitting a name that would not compile.
Do interface and implements become extends?
Yes. `type A implements B` becomes `export interface A extends B { ... }`. Because GraphQL requires implementing types to redeclare interface fields, the fields are emitted as well, so the generated TypeScript matches the GraphQL type-checking rules.
Is my schema uploaded anywhere?
No. Parsing and generation run entirely in your browser with JavaScript, the page makes no network requests, and it keeps working with the network disconnected.
Keywords：graphqlgraphql 转 typescriptgraphql to tssdlschema 转类型typescript 类型codegengraphql 类型生成接口类型gql