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": "[email protected]",
"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)
Paste JSON anywhere in VS Code
Open Command Palette:Ctrl+Shift+P
Search: "JSON to Types: Generate"
Choose target language (TypeScript, Python, Go, etc.)
Done — Types appear as code snippet
Step-by-Step Example
Input
Paste this JSON:
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)
- Open VS Code Extensions:
Ctrl+Shift+X
- Search: "JSON to Types"
- 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
Next Step:
- Open your project
- Paste any JSON example
Ctrl+Shift+P→ "JSON to Types: Generate TypeScript"- Watch as types appear
- 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
SOCIAL SHARE CARD GENERATOR