JSON에서 TypeScript로

JSON 샘플을 붙여넣으면 그 구조에 맞는 TypeScript 인터페이스를 도구가 추론합니다. 필드 타입은 관찰된 값(string, number, boolean, Array<T>)에 따라 결정되며, 중첩 객체는 각각 고유한 이름의 인터페이스를 갖습니다. null이거나 누락된 것으로 관찰된 필드는 선호하는 스타일에 따라 선택적(?) 또는 null 허용(| null)으로 지정됩니다.

JSON을 TypeScript로 변환하는 방법

  1. 1

    JSON 붙여넣기

    샘플 하나만으로도 충분하지만, 여러 샘플을 제공하면 null 허용 여부와 유니온 타입의 추론 정확도가 향상됩니다.

  2. 2

    출력 스타일 선택

    `interface`(기본값), `type` 별칭, 또는 모든 필드가 `readonly`로 표시된 읽기 전용 인터페이스.

  3. 3

    선택적/null 전략 선택

    필드를 `?`(없을 수 있음) 또는 `| null`(항상 존재하지만 null일 수 있음) 중 하나로 지정합니다.

  4. 4

    타입 복사

    `.ts` 파일에 붙여넣으면 API 응답에 타입 안전하게 접근할 수 있습니다.

예시

입력:

{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }

출력:

interface User {
  id: number;
  name: string;
  age: number | null;
  tags: string[];
  address: Address;
}

interface Address {
  city: string;
}

타입 매핑

JSON TypeScript
문자열 string
정수 / 소수 number
불리언 boolean
null 단독 null
null + T T | null (또는 T?)
T의 배열 T[]
혼합 배열 (T1 | T2)[]
객체 이름이 지정된 중첩 인터페이스
빈 배열 unknown[] (추론 불가)

선택적 필드와 null 허용 필드

  • foo?: string, 해당 필드가 객체에 없을 수 있습니다. undefined 검사가 필요합니다.
  • foo: string | null, 해당 필드는 항상 존재하지만 명시적으로 null일 수 있습니다.
  • foo?: string | null, 없거나 null일 수 있습니다.

JSON 자체에는 undefined가 없지만, 필드 부재를 표현하는 방식은 API마다 다릅니다. 사용하는 API의 시맨틱에 맞추세요.

  • REST API는 일반적으로 누락된 필드를 생략합니다 -> ?:.
  • GraphQL은 요청된 모든 필드를 항상 반환합니다 -> | null.
  • 일부 SDK는 상황에 따라 두 방식을 함께 사용합니다.

유니온 타입 vs 리터럴 타입

여러 샘플에 걸쳐 동일한 문자열 필드가 소수의 값만 갖는 경우("status": "pending", "active", "archived"), 도구는 문자열 리터럴 유니온을 출력할 수 있습니다.

status: "pending" | "active" | "archived";

이 동작이 필요하면 “문자열 리터럴 유니온 추론”을 활성화하세요.

흔한 실수

  • 단일 샘플로 추론하기. 모든 필드가 필수가 되고 null 허용 여부를 관찰할 수 없습니다. 더 정확한 타입을 얻으려면 다양한 샘플 5~10개를 제공하세요.
  • 빈 배열. "tags": []는 타입 정보를 제공하지 않아 생성기가 unknown[]을 출력합니다. 요소가 최소 하나 이상 포함된 샘플을 제공하세요.
  • 혼합 타입 배열. [1, "two", true](number | string | boolean)[]을 생성합니다. 보통 이는 JSON에 타입을 지정하기보다 구조를 다시 설계해야 함을 의미합니다.
  • 숫자 문자열 키. JSON {"1": "a", "2": "b"}는 TypeScript에서 여전히 객체(Record<string, string>)이며 배열이 아닙니다. 생성기는 이를 올바르게 처리합니다.

자주 묻는 질문

API에 맞추세요. null 필드를 생략하는 REST API에는 ?:가 적합합니다. 선택된 모든 필드를 항상 반환하는 GraphQL에는 | null이 적합합니다. 확신이 서지 않을 때는 필수 구문의 T | null이 더 엄격하며 컴파일 시점에 더 많은 버그를 잡아냅니다.

네. 이 기능을 활성화하고 여러 샘플을 제공하면, 샘플 전반에서 서로 다른 문자열 값이 2~5개 관찰된 필드는 리터럴 유니온으로 출력됩니다. 이 기준을 넘으면 string으로 되돌아갑니다.

대부분의 경우 interface가 좋습니다. 확장에 열려 있고 TypeScript가 더 잘 최적화합니다. type 별칭은 유니온, 인터섹션, 튜플, 매핑 타입에 유용합니다. JSON에서 파생된 타입에는 둘 다 사용할 수 있으니 프로젝트 관례를 따르세요.

네. 각 중첩 객체는 자체 인터페이스가 되며, 이름은 키에서 파생됩니다(user.address -> Address). 매우 깊거나 반복적인 구조라면 JSON Schema와 전용 schema-to-TS 생성기 사용을 고려하세요.

관련 도구

이 도구는 다른 언어로도 제공됩니다