JSON to TypeScript 변환기

API 응답을 붙여넣으면 바로 쓸 수 있는 TypeScript 인터페이스나 타입 별칭을 얻을 수 있습니다. 중첩 타입, 선택적 필드, null 유니온을 자동으로 추론합니다.

브라우저에서 실행가입 불필요업로드 없음

TypeScript

JSON to TypeScript 사용 방법

  1. API 응답 같은 JSON 샘플을 왼쪽 입력란에 붙여넣거나 .json 파일을 엽니다.
  2. 루트 타입 이름을 지정합니다(예: User 또는 ApiResponse).
  3. interface 또는 type 선언을 고르고 export, readonly, 모두 선택적 필드를 켜거나 끕니다.
  4. 빈 배열이나 null처럼 샘플로 알 수 없는 값에는 unknown(더 안전) 또는 any를 선택합니다.
  5. 생성된 코드를 복사하거나 .ts 파일로 다운로드합니다.

타입 추론 방식

  • 기본형: 문자열, 숫자, 불리언은 string, number, boolean이 됩니다.
  • 중첩 객체는 PascalCase 이름의 별도 인터페이스가 됩니다. 예를 들어 billing_address는 BillingAddress가 됩니다.
  • 객체 배열은 단수형 이름의 항목 타입 하나로 병합됩니다. users는 User[]가 됩니다. 일부 항목에 없는 키는 선택적(key?:)이 됩니다.
  • null 값은 그 키에서 본 다른 값과 결합되어 string | null이 됩니다. 항상 null뿐인 키는 unknown 또는 any가 됩니다.
  • 혼합 배열은 (number | string)[] 같은 유니온 배열이 됩니다.
  • 같은 구조는 한 번만 선언해 재사용하고, 이름이 겹치는 다른 구조에는 숫자 접미사를 붙입니다.
  • 유효한 식별자가 아닌 키(예: "first-name", "2fa")는 따옴표로 감쌉니다.

interface와 type의 차이

일반 객체 구조에서는 둘이 거의 같습니다. interface 선언은 확장과 병합이 가능하고 컴파일러 오류가 약간 더 명확합니다. type 별칭은 유니온과 매핑 타입도 표현할 수 있습니다. 많은 팀이 API 모델에는 인터페이스를, 나머지에는 타입을 씁니다. 코드베이스나 린터(@typescript-eslint/consistent-type-definitions)가 요구하는 쪽을 고르세요.

샘플로 더 좋은 타입 얻기

타입은 샘플만큼만 완전할 수 있습니다. 선택적 필드가 포함된 응답이나 다양한 항목이 여러 개 들어 있는 배열을 붙여넣으면 생성기가 선택적 키와 nullable 키를 감지할 수 있습니다. 날짜와 열거형 같은 값은 JSON에서 일반 문자열로 오므로, 생성 후 status: 'active' | 'disabled'처럼 직접 좁혀 주세요. 런타임 검증이 필요하면 생성된 타입을 Zod 같은 스키마 라이브러리와 함께 사용하세요.

자주 묻는 질문

JSON이 업로드되나요?
아니요. 타입은 브라우저의 JavaScript로 생성됩니다. 토큰이나 개인 정보가 담긴 API 응답이 기기 밖으로 나가지 않습니다.
선택적 속성은 어떻게 감지하나요?
같은 배열 안의 객체들이 서로 다른 키를 가지면, 하나 이상의 객체에 없는 키를 ?로 선택적 표시합니다. 객체가 하나뿐이면 모두 선택적을 체크하지 않는 한 모든 키가 필수입니다.
<code>unknown</code>과 <code>any</code> 중 무엇을 써야 하나요?
unknown이 더 안전합니다. TypeScript가 사용 전에 값을 좁히도록 강제합니다. any는 그 값의 타입 검사를 끕니다. 나중에 타입을 다듬을 계획일 때만 사용하세요.
ISO 날짜가 <code>string</code>으로 지정되는 이유는 무엇인가요?
JSON에는 날짜 타입이 없어서 전송되는 날짜는 문자열입니다. 파싱 후 new Date()로 변환한다면 모델에서 해당 속성을 Date로 바꾸세요.
크거나 깊게 중첩된 JSON도 처리할 수 있나요?
네. 생성 시간은 입력 크기에 비례하고 로컬에서 실행되므로 수 메가바이트 응답도 1초도 안 걸려 변환됩니다.

관련 도구