Type Safety

JSON → TypeScript Interfaces 명확한 타입 정의와 주석

JSON2Class는 JSON payload를 기반으로 중첩 인터페이스, 배열 타입, nullable 여부를 추론해 즉시 붙여넣을 수 있는 TypeScript 정의를 생성합니다. 백엔드와 협업할 때 필요한 필드 경로 주석도 함께 제공합니다.

JSON 입력 모든 출력 보기

🧭 타입 가이드

string | number | boolean nullable 표기 & readonly 옵션

JSON Payload

Interface 설계를 위한 임시 입력 영역

메인 변환기를 열지 않아도 API 응답을 모아두고 구조를 검토할 수 있도록 JSON 메모장을 제공합니다. 루트 인터페이스명을 정해 두면 이후 타입 정의를 붙여넣을 때 혼선을 줄일 수 있습니다.

TypeScript 인터페이스

// JSON을 입력하고 `TypeScript 변환 실행` 버튼을 눌러 주세요.

Interface Tree

JSON depth에 따라 인터페이스를 분리하고, 각 블록의 경로를 주석으로 남겨 API 문서와 싱크를 맞춥니다.

  • 중첩 타입 자동 분리
  • 필드 경로 주석 포함
  • 네이밍 충돌 방지

Nullable & readonly

배열 Nullable 토글, 숫자 추론 옵션을 통해 `type[] | null` 또는 `readonly type[]` 형태로 규칙을 통일할 수 있습니다.

  • 팀 규칙에 맞는 선택적 필드
  • strictNullChecks 대응
  • readonly 옵션 권장

Docs Friendly

같은 변환으로 Markdown, Confluence 표까지 생성되므로 인터페이스와 문서를 동시에 업데이트할 수 있습니다.

  • 필드 설명 템플릿
  • Confluence-ready
  • 협업 속도 향상

TypeScript 변환 절차

  1. JSON을 붙여 넣고 루트 이름을 CamelCase로 지정합니다.
  2. 필요시 Nullable 배열을 해제하여 `type[]`으로 고정합니다.
  3. TS 탭에서 전체 인터페이스를 복사해 프로젝트에 붙여넣습니다.

협업 팁

  1. 생성된 주석을 OpenAPI 문서와 동일하게 유지하세요.
  2. DTO가 커지면 파일을 나누고 export 문을 추가해 재사용성을 높입니다.
  3. 프런트엔드/백엔드 스키마 diff 를 줄이기 위해 변경 이력을 PR에 첨부하세요.

샘플 출력

InventoryResponse 인터페이스

JSON2Class는 객체 키를 기반으로 PascalCase 이름을 생성하고, 배열 요소 타입을 따로 선언합니다. Optional 필드는 `?`로 표시되어 strict 모드에서도 안전합니다. 

export interface InventoryResponse {
  readonly warehouseId: string;
  readonly updatedAt: string;
  readonly items: readonly InventoryItem[];
}

export interface InventoryItem {
  readonly sku: string;
  readonly stock: number;
  readonly tags?: readonly string[];
  readonly location?: LocationHint | null;
}

export interface LocationHint {
  readonly zone: string;
  readonly rack?: string;
}