JSON ↔ TypeScript 타입 변환기

JSON 샘플과 TypeScript 타입 선언을 서로 변환해 타입 초안과 JSON 샘플을 만듭니다.

카테고리: 변환 도구

언제 사용하나요?

API 응답 JSON을 붙여넣어 TypeScript 인터페이스 초안을 빠르게 만들거나, TypeScript 타입 선언에서 목업 JSON 데이터를 생성해야 할 때 사용합니다.

사용 방법

  • 변환 방향(JSON → TypeScript 또는 TypeScript → JSON)을 선택합니다.
  • 데이터를 붙여넣습니다.
  • 변환된 타입 선언 또는 JSON 샘플을 복사합니다.

입력값 안내

변환할 기준이 되는 JSON 객체 또는 배열 데이터를 붙여넣거나, 반대로 샘플 데이터를 생성할 TypeScript 인터페이스 코드를 입력합니다.

계산·변환 기준

JSON 입력 시에는 객체를 재귀적으로 순회하며 데이터 타입(string, number, boolean 등)을 추론하여 인터페이스를 자동 생성하고, TypeScript 입력 시에는 AST 파싱을 통해 정의된 타입에 맞는 랜덤 더미 데이터를 생성해 JSON으로 반환합니다.

사용 예시

  • API 응답 타입 작성 - 샘플 JSON 응답을 붙여넣어 TypeScript 인터페이스 초안을 만듭니다.
  • 목업 데이터 생성 - TypeScript interface 또는 type 선언에서 JSON 샘플을 생성합니다.
  • 타입 정의 점검 - JSON 응답이 기존 타입 선언과 맞는지 변환 결과로 비교합니다.

예시

  • {"name": "Kim", "age": 20} → interface Root { name: string; age: number; }
  • TypeScript interface를 붙여넣기 → 타입에 맞는 더미 JSON 데이터 생성

주의사항

  • 자동 생성된 타입은 초안입니다. 실제 사용 전 타입 정확성을 검토하세요.
  • 인코딩 표준(UTF-8)이 맞지 않거나 복잡한 중첩 구조를 가진 소스 데이터를 변환할 경우 데이터 구조가 깨지거나 누락될 수 있습니다.

계산·사용 가이드

샘플 기반 타입 생성

JSON에서 TypeScript 타입을 만들 때는 입력한 샘플 데이터의 형태를 기준으로 추론합니다. 선택 필드나 다양한 배열 형태는 직접 보완해야 합니다.

API 응답 문서화

반복되는 API 응답을 타입으로 정리하면 프론트엔드 코드에서 자동완성과 타입 검사를 활용할 수 있습니다.

자주 묻는 질문

완전한 스키마 검증 도구인가요?

아니요. 샘플 JSON과 타입 선언을 바탕으로 초안을 만드는 도구입니다.

중첩 객체도 처리하나요?

네, 중첩 객체는 별도 interface로 분리해 생성합니다.

선택적 속성도 표시되나요?

샘플에 있는 속성을 기준으로 만들므로, 선택적(optional) 여부는 직접 ?로 표시해야 합니다.

배열 타입도 추론하나요?

네. 배열 안 요소의 타입을 추론해 적절한 배열 타입으로 만듭니다.

관련 도구

  • JSON Schema 생성기 - JSON 샘플에서 JSON Schema 초안을 생성합니다.
  • JSON flatten 변환기 - 중첩 JSON을 평평한 key-value 구조로 변환합니다.
  • JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
  • YAML ↔ JSON 변환기 - YAML과 JSON 데이터를 브라우저에서 양방향으로 변환합니다.
  • URL 인코딩/디코딩 - 텍스트를 URL 안전 형식(%XX)으로 인코딩하거나 인코딩된 URL을 원래 텍스트로 디코딩합니다.
  • Base64 변환기 - 텍스트를 Base64로 인코딩하거나 Base64 문자열을 원래 텍스트로 디코딩합니다.