본문으로 건너뛰기
AZ Tools

JSON → TypeScript 인터페이스

JSON 샘플에서 TypeScript 인터페이스를 자동 생성 — 키 이름을 따라 재귀적으로 타입 추론.

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를 복사하세요.

자세한 설명

펼치기

JSON을 붙여넣으면 TypeScript 인터페이스나 타입 별칭을 얻고, 중첩 객체마다 별도의 선언이 만들어집니다. 배열의 첫 원소만 읽는 변환기와 달리 이 도구는 모든 원소의 구조를 합칩니다. 실제 API 응답에서 결과를 믿을 수 있는 이유가 이것입니다. 어떤 레코드에는 있고 어떤 레코드에는 없는 키는 undefined일 수 있는 형태로 나오고, 한 레코드에서는 문자열이고 다른 레코드에서는 숫자인 필드는 먼저 나온 쪽을 슬쩍 취하는 대신 둘의 유니온으로 나옵니다. 원시 타입이 섞인 배열도 같은 방식으로 유니온이 됩니다. 인터페이스로 낼지, 타입 별칭으로 낼지, export 키워드 없는 선언으로 낼지 고를 수 있습니다. 모든 처리는 브라우저에서 이루어지며 JSON은 업로드되지 않습니다.

자주 묻는 질문

users 배열인데 왜 User 인터페이스가 나오나요?

복수형으로 보이는 키(users, posts, tags 등)는 단수화해서 중첩 타입 이름으로 씁니다. 'posts': [...]은 Post 인터페이스를 만들고 Post[]로 사용됩니다.

머지 vs 첫 항목 차이는?

머지는 배열의 모든 요소를 순회해 필드 타입을 union으로 합쳐서, 일부 요소에만 있는 필드는 'field?'가 됩니다. 첫 항목은 0번째 요소만 봐서 빠르지만 union·옵셔널을 놓칠 수 있습니다.

날짜는 Date로 추론되나요?

아니요 — 컴파일 타임엔 날짜 문자열과 일반 문자열을 구분할 수 없어서 'string'으로 유지합니다. strict 모드에서도 안전합니다.

null은요?

null은 자체 타입입니다. 머지 모드에서 어떤 요소엔 null이 있으면 'field: string | null'로 생성됩니다.

언제나 first 대신 merge를 써야 하나요?

실제 API 응답이라면 그렇습니다. first는 첫 원소만 읽으므로, 거기에 없거나 뒤에서 다른 타입으로 나오는 필드는 아예 표현되지 않고 실행 시점에야 알게 됩니다. merge는 모든 원소를 훑어 발견한 것을 유니온으로 묶는데, 아주 큰 입력에서는 느리지만 들쭉날쭉한 데이터에서는 정확합니다.

ISO 타임스탬프는 왜 Date로 지정되지 않나요?

JSON에서는 그것이 문자열이고, TypeScript는 그 데이터로 무엇을 하려는지가 아니라 파싱된 데이터의 형태를 기술하기 때문입니다. JSON.parse는 결코 Date를 만들지 않으므로, 무언가가 변환해 주기 전까지 그 필드를 Date로 지정하는 것은 거짓말이 됩니다. 먼저 변환하고 그다음에 타입을 좁히세요.

관련 도구