JSON → TypeScript 타입

JSON → TypeScript 타입 사용 가이드

API 응답을 TypeScript 코드에서 다루려면 타입부터 정의해야 하는데, 필드가 많으면 손으로 옮기다 오타가 나기 쉽습니다. 이 도구는 실제 응답 샘플을 읽어 'interface Root { … }' 형태의 선언을 만들고, 중첩 객체는 들여쓴 블록으로 안쪽에 적습니다.

배열에 객체가 여러 개 들어 있으면 모든 항목을 하나의 모양으로 합칩니다. 어떤 주문에만 coupon이 있으면 'coupon?: string'처럼 선택 필드가 되고, 같은 키에 문자열과 null이 섞여 있으면 'string | null'로 적습니다.

키 이름이 my-key처럼 식별자로 쓸 수 없는 형태면 "my-key"로 따옴표를 붙여 문법 오류가 나지 않게 합니다. 빈 객체는 Record<string, unknown>, 빈 배열은 unknown[]으로 표시해 나중에 직접 채울 자리를 알려 줍니다.

사용 방법

1. 1'JSON 샘플' 칸에 실제 API 응답이나 데이터 예시를 붙여 넣습니다.
2. 2'실행'을 누르면 interface 선언이 나옵니다. 최상위가 배열이면 'type Root = …[]' 형태로 나옵니다.
3. 3결과를 복사하거나 .ts 파일로 받아 Root를 원하는 이름으로 바꿔 씁니다.

{"id":1,"name":"Kim","orders":[{"no":"A-1","total":12000},{"no":"A-2","total":8000,"coupon":"WELCOME"}]}

interface Root {
  id: number;
  name: string;
  orders: {
    no: string;
    total: number;
    coupon?: string;
  }[];
}

이럴 때 쓰면 좋아요

• 새 API를 연동하면서 응답 타입을 빠르게 초안으로 만들 때
• 목 데이터(JSON)로부터 프런트엔드 컴포넌트 props 타입을 잡을 때
• 백엔드 응답이 바뀌었을 때 새 샘플로 타입을 다시 만들어 차이를 볼 때
• 문서에 데이터 구조를 설명하면서 필드 이름과 종류를 한 번에 보여 줄 때

문제가 생겼을 때

활용 팁

• 샘플에 null로만 나온 필드는 타입이 null이 됩니다. 실제 타입을 알면 string | null처럼 고쳐 쓰세요.
• 날짜 문자열은 string으로 나옵니다. JSON에는 날짜 형식이 따로 없기 때문이므로 필요하면 주석으로 형식을 적어 두세요.

자주 묻는 질문