Skip to content

yetanotheraryan/json-to-typescript-interfaces

Repository files navigation

πŸš€ JSON to TypeScript Interfaces

Convert JSON into TypeScript types instantly β€” inside VS Code. Handles messy json as well, repairs and then converts into typescript type.

No context switching. No online tools. Just select JSON and generate types in seconds.


✨ Features

  • ⚑ Convert JSON β†’ TypeScript types instantly
  • 🎯 Works on selected JSON or entire file
  • 🧠 Smart type inference (objects, arrays, primitives)
  • ✏️ Editable type name (no more T pain)
  • πŸ“Œ Cursor placed exactly where you need to edit
  • 🧩 Seamless VS Code integration

πŸ“¦ Installation

From VS Code Marketplace

Search for:

JSON to TypeScript Interfaces

Manual (Development)

git clone https://github.com/YOUR_USERNAME/json-to-typescript-interfaces.git
cd json-to-typescript-interfaces
npm install

Then press:

F5

πŸš€ Usage

1. Open a JSON file

{
  "name": "Aryan",
  "age": 24,
  "isActive": true
}

2. Select JSON (or leave unselected for full file)


3. Run command


1. select the json
2. Ctrl + Shift + T

or

1. select the json
2. Ctrl + Shift + P
3. search for "Generate TypeScript from JSON" and hit enter



βœ… Output

type T = {
  name: string;
  age: number;
  isActive: boolean;
}

πŸ‘‰ The type name is pre-selected β€” just start typing to rename.


🧠 How It Works

  • Parses selected JSON
  • Infers TypeScript types
  • Generates a clean type definition
  • Inserts it directly into your editor with smart cursor positioning

🎯 Example

Input

{
  "user": {
    "id": 1,
    "name": "John"
  },
  "tags": ["dev", "ts"]
}

Output

type T = {
  user: { id: number; name: string; };
  tags: string[];
}

🧠 Handles Messy JSON (Powered by relax-json)

Real-world JSON is rarely perfect.

Logs, LLM outputs, and APIs often return invalid or sloppy JSON like:

{
  a: lam,
  c: "2",
  d: 3,
}

❌ This would normally crash JSON.parse


✨ What this extension does differently

Before generating types, it automatically repairs malformed JSON using relax-json.

It intelligently fixes:

  • Unquoted keys β†’ "a"
  • Single quotes β†’ "value"
  • Unquoted string values β†’ "lam"
  • Trailing commas
  • Comments (// and /* */)

πŸ”§ Example

Input (invalid JSON)

{
  a: lam,
  c: "2",
  d: 3,
}

Internally repaired to:

{
  "a": "lam",
  "c": "2",
  "d": 3
}

Final Output

type T = {
  a: string;
  c: string;
  d: number;
}

πŸš€ Why this matters

Most tools fail on anything that isn’t perfectly valid JSON.

This extension:

  • βœ… Recovers broken JSON automatically
  • βœ… Works with real-world data (not just ideal inputs)
  • βœ… Saves time debugging tiny syntax issues

⚠️ Note

Repair is best-effort, not magic:

  • Extremely broken structures may still fail
  • Always review generated types for critical systems

⚠️ Limitations (v1)

  • Mixed-type arrays are simplified ((string | number)[] not yet supported)
  • No optional field detection yet
  • Nested types are inlined (no separate interfaces)

πŸ›£οΈ Roadmap

  • Optional field detection
  • JSON schema support

🀝 Contributing

Contributions are welcome!

git clone https://github.com/YOUR_USERNAME/json-to-typescript-interfaces.git

Open an issue or submit a PR πŸš€


⭐ Support

If you find this useful:

  • ⭐ Star the repo
  • 🐦 Share with other devs
  • 🧠 Suggest improvements

πŸ“„ License

MIT


πŸ’‘ Why this exists

Because switching to random websites to convert JSON β†’ TS breaks flow.

This extension keeps you in the zone.


Made with ❀️ for developers

About

VS Code extension which converts selected JSON into Typescript types

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors