JSON to TypeScript Converter

About JSON to TypeScript converter

The JSON to TypeScript converter reads a sample JSON document and writes matching interfaces. Nested objects get their own named interfaces, arrays are typed from their contents, and keys missing from some array items are marked optional. It gives you a quick starting point for typing an API response instead of writing every field by hand.

How to use it

1. Paste a representative JSON sample into the JSON box; a starter example is already there.
2. Change the Root type name if you do not want Root.
3. Switch Export types and Mark inconsistent keys optional on or off.
4. Read the TypeScript output, then press Copy or Download .ts, which saves types.ts.

Nested object, null field and an array with a missing key

{"id":1,"name":"Ada","tags":["a"],"address":{"city":"London","zip":null},"posts":[{"title":"x","likes":3},{"title":"y"}]}

export interface Root {
  id: number
  name: string
  tags: string[]
  address: Address
  posts: Post[]
}

export interface Post {
  title: string
  likes?: number
}

export interface Address {
  city: string
  zip: null
}

When to use it

• Typing the response of a third-party API when you only have example payloads.
• Bootstrapping models for a front-end app from a saved fixture file.
• Documenting the shape of a configuration file for other developers.
• Comparing how an API's structure differs across two sample responses.

Questions about JSON to TypeScript converter

How are interface names created?

From the property name, converted to PascalCase. Array elements use the singular form, so posts becomes Post. If a name is already taken, a number is appended, and a name starting with a digit gets a T prefix.

What does Mark inconsistent keys optional do?

When objects inside an array do not all share a key, that key gets a question mark. This works only across the items in the sample, so a field missing in every item is simply absent from the interface.

Why is a null field typed as null?

A single sample cannot reveal what the field holds when it is present. Edit it yourself to string or null, or feed in a sample where the value is filled in.

What if the top level is an array?

The interface describes one element, and a line such as export type RootList = Root[] is added after it. An empty array is typed unknown[] because there is nothing to inspect.

How are unusual keys written?

Keys that are not valid identifiers, such as user-name or ones starting with a digit, are wrapped in quotes in the interface. Ordinary keys are written bare.

Related tools

• JSON Schema generatorGenerate a draft 2020-12 JSON Schema from a JSON sample, with format detection and optional enums.
• JSON validator & beautifierValidate JSON content and make it looks good.
• JSON viewerExplore and search JSON data in a collapsible tree view.
• JSON to CSV converterConvert a JSON array into CSV with nested flattening, a custom delimiter and an optional header row.
• CSV to JSON converterConvert CSV text into JSON with delimiter auto-detection, header-row and type-coercion toggles.
• JSON diff checkerCompare two JSON documents and see every added, removed and changed path.