AZ Tools

JSON → TypeScript 인터페이스

개발

JSON 샘플(API 응답, 설정, 픽스처)을 붙여넣으면 바로 붙여 쓸 수 있는 TypeScript 인터페이스를 생성합니다. 중첩 객체는 부모 키 이름(PascalCase)으로 별도 인터페이스가 되고, 배열은 요소 타입을 추론하며, 원시 타입은 그대로 유지. 머지 모드는 배열의 모든 요소를 순회해 union 타입을 만들고, 첫 항목 모드는 0번째 요소만 보고 빠르게 추론.

TypeScript
export interface Post {
  id: number;
  title: string;
  tags: string[];
}

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

export interface Root {
  id: number;
  name: string;
  active: boolean;
  joinedAt: string;
  roles: string[];
  address: Address;
  posts: Post[];
}

사용법

  1. JSON 샘플을 붙여넣으세요.
  2. 루트 타입 이름을 정하고 interface / type 스타일을 고르세요.
  3. 배열 처리 방식을 선택하세요 — 머지(안전) 또는 첫 항목(빠름).
  4. 생성된 TypeScript를 복사하세요.

자주 묻는 질문

users 배열인데 왜 User 인터페이스가 나오나요?
복수형으로 보이는 키(users, posts, tags 등)는 단수화해서 중첩 타입 이름으로 씁니다. 'posts': [...]은 Post 인터페이스를 만들고 Post[]로 사용됩니다.
머지 vs 첫 항목 차이는?
머지는 배열의 모든 요소를 순회해 필드 타입을 union으로 합쳐서, 일부 요소에만 있는 필드는 'field?'가 됩니다. 첫 항목은 0번째 요소만 봐서 빠르지만 union·옵셔널을 놓칠 수 있습니다.
날짜는 Date로 추론되나요?
아니요 — 컴파일 타임엔 날짜 문자열과 일반 문자열을 구분할 수 없어서 'string'으로 유지합니다. strict 모드에서도 안전합니다.
null은요?
null은 자체 타입입니다. 머지 모드에서 어떤 요소엔 null이 있으면 'field: string | null'로 생성됩니다.

관련 도구