Solving JSON to TypeScript via Recursion: The Strength of Zero Dependencies

Generate type definitions instantly from API responses. A behind-the-scenes look at a lightweight, high-speed implementation using recursive algorithms.

JSON to TypeScript Tool Illustration

Background: A Moment of “Futility” One Afternoon

In modern web development, it’s no exaggeration to say that half of a frontend engineer’s job is “talking to APIs.” You check the API response in Postman or Swagger, and then rewrite it into TypeScript interface or type definitions…

One afternoon, while staring at a giant JSON response with complex hierarchies, I suddenly stopped my fingers.
“What exactly am I doing, typing property names one by one? Is there any creativity as an engineer in this task?”

As a project grows, the hierarchy of responses becomes deeper, and the risk of typos increases. I wanted to free myself from such “manual labor.”
“No configuration needed—get types that make sense the moment you paste.” I wanted a tool with the feel of a “craftsman’s tool,” and so I started the development for the JSON to TypeScript Generator.

Technical Ingenuity: The “Aesthetics” of Recursive Algorithms

The biggest challenge for this tool was “achieving professional-level accuracy using only pure logic, without any heavy external libraries.”

1. “Recursive Processing” Through Endless Hierarchies

JSON has a nested structure, like boxes inside boxes. No matter how deep it’s nested, you have to reach the deepest part in an instant. To handle this “indefinite depth,” I built the algorithm using pure recursive processing.

private static inferType(value: any, depth = 1): string {
    // Basic determination of primitive types
    if (value === null) return 'null';
    
    // In the case of an array, fully explore the contents again
    if (Array.isArray(value)) return this.formatArray(value, depth);
    
    // In the case of an object, recursively visit the properties
    if (typeof value === 'object') return this.formatObject(value, depth);
    
    return typeof value;
}

By refining this simple structure, I became able to generate robust type definitions in an instant, even for the most complex data structures.

2. A Dedication to “Union Types”

The thing that gave me the most trouble during development was the handling of arrays.
For example, if there is an array like [1, "text", null], simply outputting any[] is too lazy. On the other hand, deciding it’s number[] just by looking at the first element is extremely unhelpful.

In this tool, I built in logic that once scouts all the types of all elements within an array, eliminates duplicates, and then outputs them as a Union type joined by | (pipes).

const types = Array.from(new Set(arr.map(item => this.inferType(item))));
const union = types.length === 1 ? types[0] : `(${types.join(' | ')})`;
return union + '[]'; // Result: (number | string | null)[]

I’m certain that this kind of “thoughtfulness” is what greatly influences the user experience in actual development sites.

Consideration for the “Invisible Parts”

I was also obsessed with the “beauty” of the conversion results.
I repeated fine adjustments to the text—such as the indent depth and quoting of key names—aiming for a level of quality where “you can paste the converted code into your project and commit it without running a formatter once.”

Conclusion

At first glance, a JSON to TypeScript conversion tool is a plain tool. However, behind it lies “the beauty of recursive processing” and a strong commitment to “not wasting even a minute of an engineer’s time.”

Shift your development time from simple “type transcription” to “building valuable code.” I hope this can be a small part of that power.