JSON to TypeScript

About this tool

Paste a JSON sample and get a TypeScript interface, or a type alias, for every object in it. Nested objects get their own named type, arrays become typed arrays, and a field that is missing from some items of an array is marked optional. Tick export, all optional or readonly to match your code style. Your JSON never leaves your browser.

Creating a TypeScript object from JSON

JSON.parse and response.json() return any, so tell TypeScript what to expect with the interface made here. Types only exist while compiling: if the API can send something else, check the data at run time too.

interface User {
  id: number;
  name: string;
  email?: string;
}

const user = JSON.parse(text) as User;

// or straight from fetch
const res = await fetch('/api/users/1');
const user2: User = await res.json();

Importing a .json file

To import a JSON file in TypeScript, turn on resolveJsonModule in tsconfig.json. TypeScript then works out the file's type from its contents, so config files need no interface.

// tsconfig.json
{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

// app.ts
import settings from './settings.json';
console.log(settings.title);

Is there a JSON type in TypeScript?

No. JSON.parse returns any and JSON.stringify accepts any. If you want one, a short recursive type covers every valid JSON value.

type Json = string | number | boolean | null | Json[] | { [key: string]: Json };

Checking JSON at run time with zod

An interface doesn't check data from a server. zod, a package on npm, does: describe the shape once, parse the data, and get the TypeScript type from the same schema. Start from the interface made here and rewrite it as a zod object.

import { z } from 'zod';

const User = z.object({ id: z.number(), name: z.string(), email: z.string().optional() });
type User = z.infer<typeof User>;

const user = User.parse(JSON.parse(text));   // throws if the data doesn't match

JSON Schema, VS Code and other languages

If you have a JSON Schema instead of a sample, the json-schema-to-typescript package on npm turns it into types, and VS Code extensions such as Paste JSON as Code do this page's job inside the editor. The JSON tools below make C#, Java, Kotlin and other classes from the same sample.