새 API 응답을 받았습니다. 200줄의 JSON입니다. 타입 안전한 코드를 위해 TypeScript 인터페이스가 필요합니다. 손으로 작성할 수도 있지만, JSON을 붙여 넣고 2초 만에 인터페이스를 생성하는 방법이 있습니다.

인터페이스를 직접 작성할 때의 문제

API 응답용 TypeScript 인터페이스를 손으로 작성하는 건 지루하고 실수하기 쉽습니다:

  • 중첩된 객체에는 중첩된 인터페이스가 필요
  • 배열에는 올바른 요소 타입 지정 필요
  • 선택적 필드(?)를 놓치기 쉬움
  • null vs undefined vs 필드 누락 동작을 추측해야 함
  • API가 변경되면 타입을 수동으로 업데이트해야 함

간단한 응답이라면 대처할 수 있지만, 깊이 중첩된 객체·객체 배열·nullable 필드가 있는 응답에서는 상당한 시간이 소요됩니다.

JSON to TypeScript 생성기가 하는 일

생성기는 JSON을 읽어 TypeScript 인터페이스를 생성합니다. 다음 JSON을 입력하면:

{
  "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 Preferences {
  theme: string;
  notifications: boolean;
}

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

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

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

ZeroTool JSON to TypeScript 생성기 사용해보기 →

JSON을 붙여 넣으면 TypeScript 인터페이스가 즉시 생성됩니다. 설치 불필요. 모두 브라우저 내에서 동작하므로 민감한 API 응답도 비공개로 유지됩니다.

타입 추론 동작 방식

생성기는 JSON 타입을 TypeScript 타입으로 매핑합니다:

JSONTypeScript
"string"string
42number
true / falseboolean
nullnull(또는 컨텍스트에 따라 T | null)
[1, 2, 3]number[]
[{…}, {…}]InterfaceName[]
{}이름 있는 인터페이스

배열 처리

객체 배열의 경우, 생성기는 모든 요소에 걸쳐 모든 키를 유니온하여 필드 누락을 방지합니다. 요소 0에 name이 있고 요소 1에 없으면, 생성된 인터페이스는 name을 선택적으로 표시합니다:

interface Item {
  id: number;
  name?: string;   // 모든 요소에 존재하지 않음
}

null과 혼합 타입 처리

null 값은 까다롭습니다. 생성기는 필드가 항상 nullable인지 가끔 값이 있는지 알 수 없습니다. 두 가지 일반적인 전략:

보수적: 샘플 값이 null일 때 T | null로 표시.

낙관적: 필드 이름이 문자열 타입을 시사하면 string | null로 표시.

이 생성기는 보수적인 접근 방식을 사용합니다: lastLogin: null. API 문서를 확인한 후 lastLogin: string | null로 개선할 수 있습니다.

주의해야 할 엣지 케이스

날짜 문자열

JSON에는 네이티브 날짜 타입이 없습니다. 타임스탬프는 문자열("2026-04-06T09:10:00Z")이나 숫자(Unix 에포크)로 옵니다. 생성기는 이를 string 또는 number로 타입 지정합니다.

// 생성된 것
lastLogin: string;

// 개선된 것
lastLogin: string;  // ISO 8601 — new Date(lastLogin)으로 변환

판별 유니온

API가 type 필드에 따라 다형적 형태를 반환하는 경우:

{"type": "text", "content": "hello"}
{"type": "image", "url": "...", "alt": "..."}

생성기는 모든 가능한 키의 유니온을 생성합니다. 적절한 판별 유니온으로 개선이 필요합니다:

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

빈 배열

JSON의 []는 요소 타입 정보가 없습니다. 생성기는 unknown[] 또는 any[]를 생성합니다. 요소 타입을 수동으로 지정해야 합니다.

통합 패턴

라이브 API 엔드포인트에서

curl https://api.example.com/users/1 | pbcopy
# 그런 다음 생성기에 붙여 넣기

Swagger / OpenAPI에서

API에 OpenAPI 스펙이 있으면, 전체 스키마 지원을 갖춘 프로덕션급 타입 생성을 위해 openapi-typescript를 사용합니다:

npx openapi-typescript https://petstore.swagger.io/v2/swagger.json -o ./types/petstore.ts

브라우저 생성기는 빠른 탐색·프로토타이핑·일회성 API 통합에 이상적입니다. 안정적인 API 계약이 있는 프로덕션 코드베이스에는 스키마 기반 생성을 고려하세요.

Zod 스키마 생성

TypeScript 타입과 함께 런타임 검증이 필요하다면, JSON을 생성기에 붙여 넣고 출력을 Zod용으로 조정합니다:

// 생성기에서
interface User {
  id: number;
  name: string;
  email: string;
}

// Zod에 수동으로 적용
import { z } from "zod";

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
});

type User = z.infer<typeof UserSchema>;

TypeScript Interface vs Type Alias

둘 다 객체 형태를 설명하는 데 사용할 수 있습니다:

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

// Type alias
type User = {
  id: number;
  name: string;
};

Interface는 선언 병합을 지원합니다(여러 파일에서 다시 열 수 있음). Type alias는 유니온과 계산 타입에 더 유연합니다. 간단한 API 응답 형태에는 둘 다 사용할 수 있습니다. 생성기는 기본적으로 interface를 사용합니다.

프라이버시에 대해

많은 JSON 페이로드에는 민감한 데이터(API 키·PII·내부 ID)가 포함됩니다. ZeroTool JSON to TypeScript 생성기는 완전히 브라우저 내에서 동작합니다. 데이터가 서버로 전송되지 않습니다. 네트워크 탭을 확인하여 검증할 수 있습니다. “생성” 클릭 시 요청이 발생하지 않습니다.

정리

JSON에서 TypeScript 인터페이스를 손으로 작성하는 것은 반복 작업으로, 도구가 해야 할 일입니다. 생성기는 중첩된 객체·배열·nullable 필드를 정확하게 처리합니다. 생성 후 검토하고 개선하세요:

  • 적절한 위치에서 null 타입을 T | null로 변경
  • unknown[]을 올바른 요소 타입으로 교체
  • 다형적 응답에 판별 유니온 추가
  • 날짜 문자열에 주석 추가

JSON에서 TypeScript 인터페이스를 즉시 생성하기 →