JSON to TypeScript 인터페이스 생성기

JSON to TypeScript 변환이란?

JSON 페이로드를 붙여넣으면 TypeScript 인터페이스가 생성됩니다. 인터페이스는 객체가 어떤 속성을 가지며 각 속성의 타입이 무엇인지 정확히 기술하는 타입 계약입니다. 인터페이스 없이는 JSON.parse()에서 반환된 데이터가 any로 처리되어 에디터 지원도 없고 속성 접근이나 할당에 대한 컴파일러 검사도 받을 수 없습니다. JSON을 TypeScript로 변환하면 인터페이스를 직접 작성하지 않고도 이러한 안전성을 확보할 수 있습니다.

TypeScript는 JSON의 여섯 가지 값 타입을 모두 지원합니다: string, number, boolean, null, object, array. 중첩된 JSON 객체는 각각 별도의 명명된 인터페이스로 변환됩니다. 배열은 첫 번째 요소를 기반으로 타입이 지정됩니다. 결과는 런타임에서 JSON.parse()가 실제로 반환하는 값과 일치하므로, 인터페이스는 추측이 아닌 실제 데이터를 반영합니다.

크거나 깊게 중첩된 JSON의 인터페이스를 수동으로 작성하는 것은 번거롭고 오류가 발생하기 쉽습니다. JSON to TypeScript 생성기는 구조를 자동으로 읽고, 중첩을 재귀적으로 처리하며, 몇 초 안에 깔끔한 인터페이스 코드를 출력합니다. 이 도구는 낯선 API를 연동할 때, 목(mock) 데이터로 프로토타이핑할 때, 또는 JavaScript 코드베이스를 TypeScript로 마이그레이션할 때 특히 유용합니다. 중첩된 속성 이름과 타입을 수동으로 추적하는 수고를 덜어주어 타입 보일러플레이트 대신 애플리케이션 로직에 집중할 수 있습니다.

JSON to TypeScript 생성기를 사용하는 이유

TypeScript 인터페이스를 손으로 작성하는 것은 작은 객체에는 실용적이지만, 중첩 구조나 대용량 API 응답에서는 금세 한계에 부딪힙니다. 세 단계의 중첩을 가진 50개 필드 API 응답을 생각해보세요. 수동으로 작성하면 수십 개의 인터페이스가 필요하고, 각각이 오타나 누락된 nullable 필드의 잠재적 원인이 됩니다. 자동화된 생성기는 밀리초 안에 전체 인터페이스 세트를 생성하고 코드와 데이터 간 타입 불일치 가능성을 줄여줍니다. 정확성 외에도, 타입을 실제 API 계약과 동기화된 상태로 유지합니다. 서비스가 응답 형태를 변경할 때 업데이트된 JSON을 붙여넣고 다시 생성하기만 하면 됩니다. 수기 작성 인터페이스 파일 전체에서 변경된 속성을 일일이 찾는 것보다 훨씬 빠릅니다.

JSON to TypeScript 활용 사례

JSON to TypeScript 타입 매핑 참조

모든 JSON 값은 TypeScript 타입에 매핑됩니다. 아래 표는 각 JSON 기본형과 구조 타입이 어떻게 변환되는지 보여줍니다. 이 매핑은 ECMA-404 JSON 표준과 TypeScript의 내장 타입을 따릅니다.

TypeScript interface vs type 별칭

TypeScript는 객체 형태를 기술하는 두 가지 방법을 제공합니다: interface 선언과 type 별칭. 둘 다 JSON 구조를 표현하는 데 사용할 수 있지만, 확장 및 병합 동작에서 차이가 있습니다. 대부분의 JSON to TypeScript 생성기는 TypeScript에서 객체 형태의 관용적 선택이기 때문에 interface를 출력합니다.

코드 예제

다양한 언어와 도구에서 JSON으로부터 TypeScript 인터페이스를 생성하는 예제입니다. 각 코드 조각은 실행 가능한 출력을 생성합니다.

// Manual interface definition from a JSON shape
const json = '{"id": 1, "name": "Alice", "active": true}';
const parsed = JSON.parse(json);

interface User {
  id: number;
  name: string;
  active: boolean;
}

const user: User = parsed;
console.log(user.name); // "Alice" — fully typed

import JsonToTS from 'json-to-ts';

const json = {
  id: 1,
  name: "Alice",
  address: { street: "123 Main St", city: "Springfield" },
  tags: ["admin", "user"]
};

const interfaces = JsonToTS(json, { rootName: "User" });
console.log(interfaces.join("\n\n"));
// interface Address {
//   street: string;
//   city: string;
// }
//
// interface User {
//   id: number;
//   name: string;
//   address: Address;
//   tags: string[];
// }

# Install: pip install datamodel-code-generator
# Generate TypeScript-style types from JSON using Pydantic models

# Command line:
# datamodel-codegen --input data.json --output model.py

# Or generate TypeScript directly with quicktype:
# pip install quicktype
# quicktype --lang ts --src data.json --out types.ts

import json

data = {"id": 1, "name": "Alice", "scores": [98, 85, 92]}

# Python equivalent using TypedDict (Python 3.8+)
from typing import TypedDict, List

class User(TypedDict):
    id: int
    name: str
    scores: List[int]

user: User = data  # type-checked by mypy

# Install quicktype globally
npm install -g quicktype

# Generate TypeScript interfaces from a JSON file
quicktype --lang ts --src data.json --out types.ts

# From a JSON string via stdin
echo '{"id": 1, "name": "Alice"}' | quicktype --lang ts

# Output:
# export interface Root {
#   id:   number;
#   name: string;
# }

자주 묻는 질문