본문으로 건너뛰기

JSON to TypeScript Generator

JSON 데이터를 TypeScript 인터페이스로 자동 변환하는 도구입니다. API 응답, 설정 파일 등의 JSON을 타입 안전하게 사용할 수 있습니다.

JSON Input

TypeScript Output

TypeScript interface will appear here...

주요 기능​

  • JSON 자동 파싱 및 인터페이스 생성
  • 중첩된 객체 지원
  • 배열 타입 자동 감지
  • Optional 속성 지원
  • 인터페이스 이름 커스터마이징
  • 5가지 예제 템플릿

사용 방법​

1. 기본 사용​

{
  "name": "John",
  "age": 30
}

↓

interface Root {
  name: string;
  age: number;
}

2. 중첩 객체​

{
  "user": {
    "profile": {
      "name": "John"
    }
  }
}

↓

interface Root {
  user: User;
}

interface User {
  profile: Profile;
}

interface Profile {
  name: string;
}

3. 배열​

{
  "users": [
    {"id": 1, "name": "John"}
  ]
}

↓

interface Root {
  users: User[];
}

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

활용 사례​

API 응답 타입 생성​

// API에서 받은 JSON 응답을 붙여넣으면
// 즉시 TypeScript 인터페이스 생성
fetch('/api/users')
  .then(res => res.json())
  .then((data: UserResponse) => {
    // 타입 안전하게 사용
  })

설정 파일 타입​

// config.json의 구조를 인터페이스로 변환
interface Config {
  apiUrl: string;
  timeout: number;
  features: Feature[];
}

팁​

  1. Optional 속성: 일부 필드가 선택적일 때 "Use Optional Properties" 체크
  2. 인터페이스 이름: 용도에 맞게 이름 변경 (예: UserResponse, ConfigData)
  3. 복잡한 JSON: 예제 템플릿에서 시작하여 수정

관련 도구​