개발
JSON → TypeScript 변환기
JSON을 TypeScript interface 또는 type alias로 자동 변환합니다. 배열 union 추론·optional 필드·중첩 분리 옵션을 지원합니다.
null 처리
JSON 입력
TypeScript 출력
사용 방법
- 왼쪽 입력창에 JSON을 직접 붙여넣거나 파일 업로드로 .json 파일을 불러옵니다.
- 출력 형식을 interface 또는 type alias 중에서 선택합니다.
- 루트 인터페이스 이름(기본
Root)을 입력합니다. PascalCase로 자동 정규화됩니다. - 필요 시 optional 추론(배열 안 객체에서 일부에만 있는 키)·중첩 분리(깊은 객체를 별도 인터페이스로)·null 처리 방식을 조정합니다.
- 오른쪽에 생성된 TypeScript 코드를 복사해 프로젝트에 붙여넣습니다.
JSON → TypeScript 변환기 자세히 알아보기
API 응답이나 설정 JSON을 TypeScript 프로젝트에 가져올 때 매번 손으로 interface를 짜는 일은 지루하고 실수가 잦습니다. JSON → TypeScript 변환기는 입력된 JSON을 재귀적으로 분석해 string·number·boolean·null·배열·객체를 정확한 TS 타입으로 추론하고, 배열 안에 서로 다른 타입이 섞여 있으면 자동으로 union 타입(예: `(string | number)[]`)으로 묶어 줍니다. 배열 안의 객체들이 키 구성이 다르면 모든 키를 합집합한 단일 객체 타입으로 통합하고, 일부 객체에만 존재하는 키는 `optional 추론` 옵션으로 `?:`를 자동 부여합니다. 정확하게 추론할 수 없는 값(예: 빈 배열·`undefined`로 직렬화된 값)은 `unknown[]`·`unknown`으로 폴백하므로, 결과 코드가 컴파일되지 않을 정도로 망가지는 일은 없습니다. 단, JSON에는 Date·Map·Set·BigInt 같은 런타임 타입이 직렬화되지 않으므로(문자열·숫자로 변환됨) 의미 단위 타입은 후처리로 직접 보강해야 합니다.
이럴 때 사용하세요
- •REST API 응답 샘플을 받아 프론트엔드 클라이언트의 응답 타입을 즉시 만들 때
- •타입 정의를 제공하지 않는 서드파티 SDK·외부 데이터 소스를 안전하게 다루기 위한 임시 타입이 필요할 때
- •백엔드 ↔ 프론트엔드 계약을 정리하면서 OpenAPI가 없는 구식 응답의 타입 베이스라인을 빠르게 잡을 때
- •Jupyter·Python 분석 결과를 JSON으로 export 한 뒤 Next.js에 시각화로 임포트할 때 타입을 깔는 용도
- •환경 설정·feature flag 같은 정적 JSON 파일을 type-safe 하게 import 하기 위한 .d.ts 베이스를 만들 때
JSON → TypeScript 변환기 자주 묻는 질문
interface와 type alias 중 뭘 고르는 게 좋나요?
객체 모양을 선언할 때는 interface를 권장합니다. 선언 병합(declaration merging)이 가능하고 IDE의 호버 정보가 더 깔끔합니다. union·intersection·conditional 같은 복잡한 표현이 필요하면 type alias를 쓰세요. 두 형식 모두 export 키워드를 붙여 출력합니다.
배열 안 객체의 키 구성이 다르면 어떻게 처리되나요?
모든 객체의 키를 합집합으로 모은 뒤 같은 키의 값들을 다시 union으로 병합합니다. 예를 들어 [{a:1},{a:2,b:'x'}]는 { a: number; b?: string } 한 타입으로 통합됩니다. optional 추론 옵션이 켜져 있어야 일부 객체에만 있는 키에 ?:가 붙습니다.
Date·Map·Set·BigInt 같은 런타임 타입은 추론되나요?
JSON은 이들 타입을 보존하지 않습니다. JSON.stringify 시 Date는 ISO 문자열로, BigInt는 직렬화 자체가 안 되거나 문자열로 처리되므로 본 도구는 string 또는 number로만 추론합니다. 의미 단위 타입(예: \`createdAt: Date\`)이 필요하면 출력된 타입에서 해당 필드만 직접 교체하세요.
옵셔널(?: ) 필드는 어떻게 결정되나요?
두 가지 경로가 있습니다. 첫째, optional 추론이 켜져 있고 같은 위치의 객체 배열에서 일부에만 등장하는 키. 둘째, null 처리 방식을 'optional'로 두면 \`string | null\` 같은 union이 \`string\`+ \`?:\`로 변환됩니다. 두 옵션은 독립적으로 동작합니다.
변환된 타입의 이름은 어떻게 정해지나요?
루트 이름은 입력한 값을 PascalCase로 정규화한 결과(기본 Root)가 됩니다. 중첩 분리 옵션을 켜면 부모 이름 + 키 이름을 PascalCase로 결합해 \`UserAddress\`처럼 자동 명명하고, 같은 이름이 충돌하면 \`UserAddress2\` 식으로 숫자 접미사를 붙입니다.