JSON → TypeScript 변환기

JSON을 붙여넣으면 중첩된 모든 객체에 대한 TypeScript 인터페이스가 생성되어 프로젝트에 바로 넣을 수 있습니다.

언어:

타입 이름:

입력 (JSON)

출력 (typescript)

JSON에서 TypeScript 인터페이스 생성

API 응답 타입을 손으로 작성하면 시간이 오래 걸리고 실수하기 쉽습니다. 이 변환기는 JSON 샘플을 읽어 객체 형태마다 export된 interface를 하나씩 만들어 줍니다. 중첩 객체는 별도의 이름을 가진 interface가 되고, 배열은 string[]처럼 타입이 지정된 배열이 되며, 숫자·문자열·불리언은 각각 number, string, boolean으로 매핑됩니다. 출력에는 런타임 코드 없이 타입 선언만 들어 있으므로 번들 크기가 전혀 늘어나지 않습니다.

사용 방법

연동하려는 API의 실제 응답을 붙여넣습니다. 예를 들어 브라우저 개발자 도구의 네트워크 탭에서 복사할 수 있습니다.
타입 이름을 루트 객체가 나타내는 이름으로 지정합니다. 예: User, ApiResponse.
생성된 interface를 types.ts 파일에 복사하고 fetch 결과에 타입을 지정합니다. 예: const user: User = await res.json().

자주 묻는 질문

interface와 type alias 중 무엇을 생성하나요?: export된 interface를 생성합니다. API 데이터의 타입을 지정하는 용도라면 객체 type alias와 동일하게 동작하며, 복사한 뒤 자유롭게 이름을 바꾸거나 type으로 변환해도 됩니다.
선택적 속성(field?: string)은 어떻게 만드나요?: 생성기는 샘플에 나타난 정보만 알 수 있습니다. 여러 객체를 배열에 넣고 그중 일부에서 해당 필드를 빼 두면 그 속성이 선택적으로 생성됩니다. 샘플에서 항상 null인 필드는 null 타입이 되므로, 실제 타입을 알고 있다면 실제 값을 넣어 주세요.
생성된 interface가 런타임에 데이터를 검증하나요?: 아니요. TypeScript 타입은 컴파일 시점에 사라지므로 잘못된 형식의 응답이 와도 에러가 발생하지 않습니다. 런타임 검증이 필요하다면 JSON Schema 도구로 스키마를 생성해 검증하거나 검증 라이브러리를 사용하세요.

예시: JSON to TypeScript

입력 JSON

{
  "id": 42,
  "name": "Ada Lovelace",
  "email": "ada@example.com",
  "roles": ["admin", "editor"],
  "profile": { "bio": "Mathematician", "website": "https://example.com" }
}

생성된 TypeScript 코드 (User)

export interface User {
    id:      number;
    name:    string;
    email:   string;
    roles:   string[];
    profile: Profile;
}

export interface Profile {
    bio:     string;
    website: string;
}