How to Convert JSON to TypeScript Types (Without Writing Them by Hand)

try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 3886334) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } Tahmid Posted on Apr 28 How to Convert JSON to TypeScript Types (Without Writing Them by Hand) #webdev #javascript #beginners #tutorial You just got access to a new API. The response comes back — it's a deeply nested JSON object with 40 fields, some optional, some arrays, some nested objects three levels deep. Your team lead says: "We need this typed properly." So you open a new .ts file and start typing interface... That's an hour of your life you're not getting back — and the types might still be wrong. Manual JSON-to-TypeScript conversion is one of those tasks that feels like real work but is basically just copying data shapes from one format to another. Here's a better way. The Problem With Manual Type Writing Hand-typing TypeScript interfaces from JSON has three common failure modes: Missing optional fields — APIs often return null or omit fields in edge cases. If you type from a single example response, you'll likely mark optional fields as required. Wrong primitive types — A field that looks like a number ("count": 42) might occasionally come back as a string ("count": "42") from a legacy backend. You won't catch this until runtime. It doesn't scale — When the API response changes, you have to re-read and re-type the whole thing manually. Real Example: Before and After Say you get this from an API: { "user": { "id": 1024, "name": "Alice", "email": "[email protected]", "roles": ["admin", "editor"], "profile": { "bio": "Engineer at Acme", "avatar_url": "https://example.com/alice.png", "joined_at": "2024-01-15T09:30:00Z" }, "settings": { "notifications_enabled": true, "theme": "dark" } } } Enter fullscreen mode Exit fullscreen mode If you wrote this by hand, you'd probably produce something like this: interface Profile { bio: string; avatar_url: string; joined_at: string; } interface Settings { notifications_enabled: boolean; theme: string; } interface User { id: number; name: string; email: string; roles: string[]; profile: Profile; settings: Settings; } interface ApiResponse { user: User; } Enter fullscreen mode Exit fullscreen mode That works — but you typed it from one example. Real-world responses can have bio: null, or avatar_url might be absent entirely. You'd discover those gaps at runtime, not at compile time. Using the JSON to TypeScript converter, you paste the JSON and get properly structured interfaces in seconds. It handles nested objects, arrays, and can mark fields as optional — which is a much safer default for API responses. Going Further: Runtime Validation With Zod TypeScript types are compile-time only. They don't protect you at runtime — and if you're fetching from an external API, that's exactly when things go wrong. A common pattern is pairing your TypeScript interfaces with a Zod schema so you can validate actual API responses at runtime: import { z } from "zod"; const ProfileSchema = z.object({ bio: z.string().nullable(), avatar_url: z.string().optional(), joined_at: z.string(), }); const UserSchema = z.object({ id: z.number(), name: z.string(), email: z.string(), roles: z.array(z.string()), profile: ProfileSchema, settings: z.object({ notifications_enabled: z.boolean(), theme: z.string(), }), }); //…

This excerpt is published under fair use for community discussion. Read the full article at DEV Community.