JSON → TypeScript 생성기

타입 추론 규칙

• null → 선택적 null(field?: null)
• 문자열 → string
• 숫자 → number
• 불리언 → boolean
• 빈 배열 → unknown[]
• 객체 배열 → 병합된 인터페이스 + ItemName[]
• 혼합 기본 타입 배열 → 유니언 타입(예: (string | number)[])
• 중첩 객체 → 별도의 명명된 인터페이스

예시

다음 JSON을 입력하면:

{"user": {"name": "Alice", "age": 30}, "tags": ["admin", "user"]}

다음과 같이 생성됩니다:

interface RootObject {
  user: User;
  tags: string[];
}

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

예시: API 응답

{
  "user": {
    "id": 42,
    "name": "Alice",
    "email": "alice@example.com",
    "roles": ["admin", "editor"],
    "preferences": { "theme": "dark", "notifications": true },
    "lastLogin": null
  },
  "pagination": { "page": 1, "perPage": 20, "total": 143 }
}

에서 다음이 생성됩니다:

interface RootObject {
  user: User;
  pagination: Pagination;
}

interface User {
  id: number;
  name: string;
  email: string;
  roles: string[];
  preferences: Preferences;
  lastLogin?: null;
}

interface Preferences {
  theme: string;
  notifications: boolean;
}

interface Pagination {
  page: number;
  perPage: number;
  total: number;
}

루트 인터페이스가 맨 앞에 오고, 중첩 인터페이스는 발견된 순서대로 이어집니다. null 값은 null 타입으로 쓰이고 선택적 속성이 됩니다. 샘플 하나로는 값이 있을 때의 타입을 알 수 없기 때문입니다. API 문서를 확인한 뒤 lastLogin: string | null처럼 고치세요.

예시: 모양이 다른 요소가 섞인 배열

{
  "items": [
    { "id": 1, "name": "a", "tags": [] },
    { "id": 2, "price": 9.5, "tags": ["x", 1] }
  ],
  "messages": [
    { "type": "text", "content": "hi" },
    { "type": "image", "url": "/a.png" }
  ]
}

에서 다음이 생성됩니다:

interface RootObject {
  items: ItemsItem[];
  messages: MessagesItem[];
}

interface ItemsItem {
  id: number;
  name?: string;
  tags: (unknown[] | (string | number)[]);
  price?: number;
}

interface MessagesItem {
  type: string;
  content?: string;
  url?: string;
}

배열 안의 객체는 모두 병합되며, 일부 요소에만 있는 키에는 ?가 붙습니다. messages는 사실 type으로 구분되는 두 가지 모양입니다. 병합된 인터페이스는 “url이 있는 text 메시지” 같은 잘못된 조합도 허용하므로 구별된 유니언 타입으로 다시 쓰세요(TypeScript Handbook: Narrowing):

type Message =
  | { type: "text"; content: string }
  | { type: "image"; url: string };

예시: 같은 키 이름의 객체가 둘인 경우

{
  "order": { "id": "A-1001", "meta": { "createdBy": "alice", "source": "web" } },
  "payment": { "status": "paid", "meta": { "provider": "stripe", "fee": 0.3 } }
}

생성 결과

interface RootObject {
  order: Order;
  payment: Payment;
}

interface Order {
  id: string;
  meta: Meta;
}

interface Meta {
  createdBy: string;
  source: string;
}

interface Payment {
  status: string;
  meta: PaymentMeta;
}

interface PaymentMeta {
  provider: string;
  fee: number;
}

order.meta는 Meta라는 이름을 받습니다. payment.meta는 필드가 달라 별도 인터페이스가 되며, 부모 이름을 앞에 붙여 PaymentMeta가 됩니다. order.meta와 필드가 같다면 둘이 Meta를 함께 씁니다. 둘을 모든 필드가 선택적인 Meta 하나로 합치면 어느 API도 돌려주지 않는 객체까지 받아들이므로, 모양마다 타입을 따로 둡니다. 이름이 이미 쓰였으면 번호를 붙입니다(Meta2). 중첩된 키가 루트와 이름이 같아도 루트는 지정한 이름을 유지합니다.

직접 다듬을 부분

• null 필드: ?: null을 실제 타입과 | null로 바꿉니다.
• 빈 배열: []은 unknown[]이 되므로 요소 타입을 채웁니다.
• 날짜: ISO 8601 문자열과 Unix 타임스탬프는 각각 string, number로 남습니다.
• 식별자로 쓸 수 없는 키(user-name, 2fa)는 따옴표로 감싸 출력되며 TypeScript에서 유효합니다.
• PaymentMeta, Meta2 같은 이름은 JSON 키에서 만들어집니다. 용도에 맞게 이름을 바꾸세요.
• 올바른 타입 이름이 되지 않는 키(2fa, 빈 키)는 인터페이스 이름 앞에 T를 붙입니다(T2fa). 속성 자체는 원래 키를 따옴표로 감싸 씁니다.

제한 사항

• 입력은 유효한 JSON이어야 합니다(주석, 끝 쉼표 불가). 오류 메시지에 위치가 표시됩니다.
• 타입은 붙여넣은 샘플에서만 결정됩니다. 샘플에서는 문자열이지만 실제로는 가끔 숫자인 필드도 string으로 남습니다.
• interface 대신 type 사용을 선택하면 각 선언이 type Name = { ... }로 출력되지만 상태 표시는 “인터페이스” 그대로입니다.