DEV Community

miccho27
miccho27

Posted on

JSON to TypeScript: Generate Types in 5 Seconds

#typescript #vscode #codegen

JSON to TypeScript: Generate Types in 5 Seconds

Published on: Dev.to
Tags: #typescript #vscode #productivity #code-generation #extension
Reading time: 5 min

The Problem: Manual Type Definition is Tedious

You just received a JSON response from an API:

{
  "id": 123,
  "name": "John Doe",
  "email": "john@example.com",
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "zip": "10001"
  },
  "tags": ["admin", "developer"],
  "createdAt": "2024-01-01T00:00:00Z",
  "metadata": {
    "loginCount": 5,
    "lastLogin": "2024-04-12T10:30:00Z"
  }
}
Enter fullscreen mode Exit fullscreen mode

Now you need to write a TypeScript interface:

interface User {
  id: number;
  name: string;
  email: string;
  address: {
    street: string;
    city: string;
    zip: string;
  };
  tags: string[];
  createdAt: string;
  metadata: {
    loginCount: number;
    lastLogin: string;
  };
}
Enter fullscreen mode Exit fullscreen mode

The problem: Typing this manually takes 5 minutes and is error-prone. One typo and your types are wrong.

Better question: Why not generate it automatically?

Introducing: JSON to Types

JSON to Types converts any JSON to TypeScript interfaces, Python dataclasses, Go structs, Rust, Zod schemas, and more.

How It Works (30 Seconds)

  1. Paste JSON anywhere in VS Code
  2. Open Command Palette: Ctrl+Shift+P
  3. Search: "JSON to Types: Generate"
  4. Choose target language (TypeScript, Python, Go, etc.)
  5. Done — Types appear as code snippet

Step-by-Step Example

Input

Paste this JSON:

{
  "id": 123,
  "name": "John",
  "age": 30,
  "email": "john@example.com"
}
Enter fullscreen mode Exit fullscreen mode

Command

Ctrl+Shift+P → "JSON to Types: Generate TypeScript"

Output (Instant) 

interface RootObject {
  id: number;
  name: string;
  age: number;
  email: string;
}
Enter fullscreen mode Exit fullscreen mode

Supported Output Languages

Language Output Format
TypeScript interface
Python dataclass or TypedDict
Go struct with tags
Rust struct with derives
Java class with fields
C# class or record
Kotlin data class
Zod Zod schema
JSON Schema JSON Schema

Real-World Examples

Example 1: API Response 

{
  "status": "success",
  "data": {
    "userId": 456,
    "posts": [
      {"id": 1, "title": "Hello", "likes": 5},
      {"id": 2, "title": "World", "likes": 10}
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

TypeScript Output:

interface RootObject {
  status: string;
  data: Data;
}

interface Data {
  userId: number;
  posts: Post[];
}

interface Post {
  id: number;
  title: string;
  likes: number;
}
Enter fullscreen mode Exit fullscreen mode

Example 2: Database Query Response 

[
  {"id": 1, "name": "Product A", "price": 19.99, "inStock": true},
  {"id": 2, "name": "Product B", "price": 29.99, "inStock": false}
]
Enter fullscreen mode Exit fullscreen mode

TypeScript Output:

interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}
Enter fullscreen mode Exit fullscreen mode

Example 3: Configuration File 

{
  "apiUrl": "https://api.example.com",
  "timeout": 5000,
  "retries": 3,
  "features": {
    "authentication": true,
    "logging": true,
    "metrics": false
  }
}
Enter fullscreen mode Exit fullscreen mode

Go Output:

type Config struct {
    ApiUrl string `json:"apiUrl"`
    Timeout int `json:"timeout"`
    Retries int `json:"retries"`
    Features Features `json:"features"`
}

type Features struct {
    Authentication bool `json:"authentication"`
    Logging bool `json:"logging"`
    Metrics bool `json:"metrics"`
}
Enter fullscreen mode Exit fullscreen mode

Installation (3 Steps)

  1. Open VS Code Extensions: Ctrl+Shift+X
  2. Search: "JSON to Types"
  3. Click Install

Usage Guide

Method 1: Paste & Generate 

# 1. Paste JSON in your editor or select existing JSON
# 2. Open Command Palette: Ctrl+Shift+P
# 3. Type: "JSON to Types: Generate TypeScript"
# 4. Select output language from dropdown
# 5. Types are inserted above your JSON
Enter fullscreen mode Exit fullscreen mode

Method 2: From Selection 

# 1. Select JSON text
# 2. Right-click → "JSON to Types: Generate"
# 3. Choose language
Enter fullscreen mode Exit fullscreen mode

Method 3: Keyboard Shortcut (Optional)

Bind to Alt+Shift+J:

{
  "key": "alt+shift+j",
  "command": "m27-json-to-types.generate"
}
Enter fullscreen mode Exit fullscreen mode

Settings & Customization

TypeScript Options 

{
  "m27-json-to-types.tsFormat": "interface",  // or "type"
  "m27-json-to-types.strictNulls": true,      // Add undefined for optional fields
  "m27-json-to-types.exportTypes": true       // Add 'export' keyword
}
Enter fullscreen mode Exit fullscreen mode

Python Options 

{
  "m27-json-to-types.pythonFormat": "dataclass",  // or "typeddict"
  "m27-json-to-types.pythonVersion": "3.10"
}
Enter fullscreen mode Exit fullscreen mode

Go Options 

{
  "m27-json-to-types.goPackage": "models",   // Package name
  "m27-json-to-types.goOmitEmpty": true      // Add omitempty tags
}
Enter fullscreen mode Exit fullscreen mode

Why This Saves Time

Before (Manual Typing)

  • JSON response arrives
  • You manually type each field
  • You check each type
  • 5-10 minutes for complex JSON
  • Risk of typos

After (JSON to Types)

  • JSON response arrives
  • Paste or select
  • Ctrl+Shift+P → "Generate TypeScript"
  • 15 seconds
  • Zero typos

Time saved per week: ~2 hours for active API development

Common Questions

Q: What if my JSON is very large?
A: Works great. The extension handles 1000+ line JSON files efficiently.

Q: Does it handle nested objects?
A: Yes. It generates separate interfaces for each nested object.

Q: What about optional fields?
A: Use strictNulls: true to mark fields as fieldName?: type if they might be undefined.

Q: Can I generate multiple interfaces?
A: Yes. The extension detects nested objects and creates separate interfaces.

Advanced: Zod Schema Generation

If you're using Zod for validation:

// Instead of manually writing:
const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  age: z.number().positive()
});
Enter fullscreen mode Exit fullscreen mode

Just generate it:

# Paste JSON
# Ctrl+Shift+P → "JSON to Types: Generate Zod"
Enter fullscreen mode Exit fullscreen mode

Output:

const RootObject = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string(),
  age: z.number()
});
Enter fullscreen mode Exit fullscreen mode

Installation & Quick Start

Install JSON to Types

Next Step:

  1. Open your project
  2. Paste any JSON example
  3. Ctrl+Shift+P → "JSON to Types: Generate TypeScript"
  4. Watch as types appear
  5. Copy to your codebase

What's your favorite way to generate types? Share in the comments! 👇

Keywords: typescript, code-generation, vscode, productivity, api, json, type-safety

Top comments (1)

Collapse
 
albertwei profile image
Albert •

Getting type safety in 5 seconds is a huge productivity booster, especially when copy-pasting API response mock data. One thing I find annoying with automatic 'JSON to TypeScript' generators is how they handle optional nested null fields, sometimes they generate any or strict null instead of optional types. Do you typically post-process the generated files or just adjust the generator settings to make them more permissive?