Does my JSON leave the browser?

Pasted JSON and uploaded files are converted entirely in your browser. The Extract from URL tab is the only path that touches the server, and only to proxy the URL you supply so CORS does not block direct fetches. Nothing is stored.

interface or type — which one?

interface is right for shapes you may want to extend or merge later. type is right for unions, mapped types, or when you need exact assignability. Both produce equivalent runtime behavior and identical IntelliSense in modern TS.

What does Extract nested types do?

On: every nested object becomes its own named interface (User, UserProfile, UserProfileAddress…) and the parent references it by name. Off: nested objects are inlined into their parent — fewer top-level names but harder to share types across the codebase.

Why does my field have a `?` at the end?

Optional fields = Optional all wraps every property in `?`. Smart marks fields whose value is null in the sample as `T | null`. The default Required keeps the JSON shape exact.

What does 'enum string literals' do?

When a string field has a small fixed set of values across the sample (and Use enums for arrays is on), the inferred type becomes a string literal union like `'admin' | 'editor' | 'viewer'` instead of plain string.

Why prefer `unknown` over `any`?

`unknown` keeps strict type-checking at the use site so consumers must narrow before access. `any` opts out of type-checking entirely. Recommended: keep Prefer unknown on for safer downstream code.

appkiro.com

Data

Đổi JSON sang TypeScript

Data

Đổi dữ liệu JSON thành TypeScript ngay trong trình duyệt — tiện cho dev khi cần chuyển format API response, fixture test hay migration data.

Input JSON

Example JSON loaded.

Output TypeScript

1export interface Root {2  user: User;3}4 5export interface Address {6  city: string;7  zip: string;8}9 10export interface Profile {11  age: number;12  address: Address;13}14 15export interface User {16  id: number;17  name: string;18  email: string;19  isActive: boolean;20  roles: string[];21  profile: Profile;22  lastLogin: string;23}24

JSON to TypeScript converts API responses, fixture files, and pasted JSON into TypeScript interfaces or type aliases that drop directly into your codebase. Nested types extract into named interfaces, optional fields, readonly modifiers, and string literal unions are all configurable so the output matches your team conventions.

Why this tool exists

Hand-typing every API response shape is tedious. A typo between the type and the runtime payload breaks autocomplete and lets bad data slip into production. This tool reads the JSON, infers the exact shape, and emits clean TypeScript that compiles on the first try.

Workflow at a glance

Bring data in: paste raw JSON, fetch a public URL, or upload a .json file.
Set the Root type name (e.g. UserResponse).
Pick the output style and optional-field strategy.
Toggle Extract nested types, readonly modifiers, semicolons, and enum literals.
Copy or download a .ts file ready to import.

What each part of the interface does

Input JSON card hosts three input tabs: Paste content for direct text, Extract from URL for public JSON endpoints (server-proxied to bypass CORS), and Upload JSON for local .json/.txt files up to 5 MB.

Output TypeScript renders the result in a compact line-numbered viewer (Raw Output) and an inlined view (Inline Preview), with Copy and Download .ts actions.

TypeScript Options control root name, output style, optional-field strategy, array notation, nested-type extraction, modifiers, export keyword, semicolons, fallback type, and enum literal detection.

Advanced exposes indent size for the generated code.

When to flip each option

Output style — interface for declaration merging and shape contracts; type for unions, mapped types, or template literal types.
Optional fields — Required matches the JSON exactly; Optional all when fields may be missing; Smart turns null samples into T | null.
Array style — Shorthand T[] for clean code; Generic Array<T> when team conventions or complex unions need it.
Extract nested types — on for shareable types and editor jump-to-definition; off for self-contained inline shapes.
Readonly fields — on for immutable consumers (reducers, props); off for mutable state shapes.
Export keyword — on for module exports; off for local-only declarations or ambient files.
Prefer unknown over any — keep on; consumers must narrow before access, catching bugs early.
Enum string literals — on when a string field has a small fixed set (status, role, plan tier).

Tips that save real time

Fetch a real API response with the URL tab so the types match production data.
Use Inline Preview to verify the deeply-inlined shape before committing the extracted version.
For permissive APIs, combine Optional all with Prefer unknown for runtime safety.
For immutable Redux-style stores, turn on Readonly fields to prevent accidental mutation.

1export interface Root {2 user: User;3}4 5export interface Address {6 city: string;7 zip: string;8}9 10export interface Profile {11 age: number;12 address: Address;13}14 15export interface User {16 id: number;17 name: string;18 email: string;19 isActive: boolean;20 roles: string[];21 profile: Profile;22 lastLogin: string;23}24