JSON to TypeScript: Generate Types in 5 Seconds

Posted on by — No Comments ↓

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"
  }
}

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;
  };
}

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"
}

Command

Ctrl+Shift+P → “JSON to Types: Generate TypeScript”

Output (Instant)

interface RootObject {
  id: number;
  name: string;
  age: number;
  email: string;
}

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}
    ]
  }
}

TypeScript Output: 

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

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

interface Post {
  id: number;
  title: string;
  likes: number;
}

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}
]

TypeScript Output: 

interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}

Example 3: Configuration File

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

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"`
}

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

Method 2: From Selection

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

Method 3: Keyboard Shortcut (Optional)

Bind to Alt+Shift+J: 

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

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
}

Python Options

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

Go Options

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

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()
});

Just generate it: 

# Paste JSON
# Ctrl+Shift+P → "JSON to Types: Generate Zod"

Output: 

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

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

Leave a Reply