Mark null fields as optionalMark all fields as optionalAdd readonly modifier

JSON Input

TypeScript Output (.ts)

What is JSON to TypeScript with Optional Fields Generator?

TypeScript interfaces define the shape of data in your application, and the optional field marker (?) is critical for accurately modeling real-world APIs where some fields may be absent. This generator goes beyond basic JSON-to-TypeScript conversion by giving you fine-grained control over optionality: you can mark null fields as optional, mark every field as optional (useful for partial update payloads), or add readonly modifiers for immutable data structures. The tool automatically infers the correct TypeScript type for each field based on the JSON value, generates separate interface definitions for nested objects, and orders them children-first so that all referenced types are defined before they are used.

How to Use

Toggle "Mark null fields as optional" to add the ? modifier to fields whose JSON value is null
Toggle "Mark all fields as optional" to make every field optional — ideal for PATCH request body types
Toggle "Add readonly modifier" to make all properties immutable, preventing accidental reassignment
Paste your JSON data into the input area on the left
Click "Generate" and copy the TypeScript interfaces into your project
Adjust the generated types as needed — add union types, literal types, or additional optional fields

Why Use This Tool?

Precise type inference from JSON values — string, number, boolean, array, and nested object types are all correctly identified

Fine-grained control over optionality: null-based, all-optional, or none — matching different API contract patterns

Readonly modifier support for immutable data structures, state objects, and configuration types

Nested objects are extracted into separate interface definitions with proper naming and ordering

Children-first ordering ensures all referenced types are defined before they are used, preventing TypeScript errors

Tips & Best Practices

Use "Mark null fields as optional" when modeling API responses where null indicates the field may be missing
Use "Mark all fields as optional" when creating types for PATCH or PUT request bodies where only some fields are sent
The readonly modifier is especially useful for Redux state, React props, and configuration objects that should not be mutated
Nested objects become separate interfaces with PascalCase names derived from the JSON key
Combine with utility types like Partial<T> or Required<T> for additional flexibility in your codebase

Frequently Asked Questions

How are JSON types mapped to TypeScript types?

JSON strings become string, numbers become number, booleans become boolean, null values become optional fields (with the ? modifier) when enabled, arrays become T[] where T is the inferred element type, and nested objects become separate interface definitions with PascalCase names.

When should I NOT use this generator?

Skip this tool if your JSON uses union types (e.g., a field that can be either a string or a number) — TypeScript requires explicit union annotations that cannot be inferred from a single sample. Also, if you need discriminated unions, mapped types, or conditional types, those must be added manually after generation.

What does the optional field marker (?) do?

The ? modifier in TypeScript indicates that a field may be undefined at runtime. When accessing an optional field, TypeScript requires you to handle the undefined case explicitly. This is useful for API responses where certain fields may not always be present.

What is the readonly modifier for?

The readonly modifier prevents reassignment of properties after initialization, making your data structures immutable at compile time. This is useful for Redux state, React props, configuration objects, and any data that should not be accidentally mutated.

How are nested objects handled?

Nested JSON objects are converted to separate TypeScript interfaces with their own definitions and PascalCase names. They are ordered children-first so that referenced types are defined before they are used, preventing forward-reference errors.

Is my data sent to any external server?

No. All processing happens entirely inside your browser. Your JSON data never leaves your device, and no network requests are made during the conversion.

Real-world Examples

Modeling a nullable API response with optional fields

Generate TypeScript interfaces from an API response where null values indicate optional fields.

Input

{
  "id": 1,
  "name": "Alice",
  "email": "[email protected]",
  "age": null,
  "is_active": true,
  "address": {
    "street": "123 Main St",
    "city": "Springfield",
    "zipcode": null
  }
}

Output

interface Address {
  street: string;
  city: string;
  zipcode?: string;
}

interface Root {
  id: number;
  name: string;
  email: string;
  age?: string;
  is_active: boolean;
  address: Address;
}

Creating a PATCH request body type with all optional fields

Generate an interface where every field is optional, suitable for partial update payloads.