손으로 TypeScript 인터페이스를 작성하지 마세요 — JSON을 자동으로 변환하세요

Source: Dev.to

API에서 JSON 응답을 받고 직접 TypeScript 인터페이스를 작성해야 했던 경험이 몇 번이나 되셨나요?

즉시 변환해 주는 무료 도구를 만들었습니다: JSON to TypeScript Converter.

이 JSON을 붙여넣으세요

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "address": {
    "street": "123 Main St",
    "city": "Springfield",
    "zip": "62701"
  },
  "orders": [
    { "id": 101, "total": 29.99, "status": "shipped" }
  ]
}

다음과 같은 TypeScript가 생성됩니다

interface Address {
  street: string;
  city: string;
  zip: string;
}

interface OrdersItem {
  id: number;
  total: number;
  status: string;
}

interface Root {
  id: number;
  name: string;
  email: string;
  address: Address;
  orders: OrdersItem[];
}

변환기가 처리하는 내용

• 중첩 객체 – 별도의 인터페이스를 생성합니다
• 배열 – 요소 타입을 추론합니다
• 혼합 타입 – 예: string | number
• null 값 – unknown으로 처리합니다

제작 동기

저는 SnapAPI라는 JSON으로 즉시 REST API를 생성하는 도구를 개발하면서 API 응답을 TypeScript로 변환해야 하는 상황이 자주 발생했습니다. 그래서 별도 유틸리티로 변환기를 만들게 되었습니다.

추가 무료 도구

• JSON Formatter – JSON을 보기 좋게 정렬하고 압축합니다
• JSON Validator – 실시간 구문 검증을 제공합니다
• Fake Data Generator – 현실적인 테스트 데이터를 생성합니다

모든 도구는 무료이며, 회원가입 없이 사용할 수 있고, 오픈 소스입니다.