🟦 JSON → TypeScript 변환기

사용법

1. 왼쪽 칸에 변환할 JSON을 붙여 넣어요. API 응답 한 건을 그대로 복사해도 돼요. 처음에는 예시 JSON이 들어 있어서 바로 결과를 볼 수 있어요.
2. 아래 옵션에서 interface와 type 중 하나를 고르고, export를 붙일지, 속성을 readonly로 만들지, 맨 위 타입의 루트 이름을 정해요.
3. 오른쪽 칸에 타입이 바로 나와요. copy를 눌러 프로젝트의 타입 파일에 붙여 넣으세요. JSON에 오류가 있으면 오류 메시지가 표시돼요.

변환 규칙

예시: 주문 JSON을 타입으로

interface Root {
  id: number;
  name: string;
  active: boolean;
  profile: Profile;
  orders: Order[];
}

interface Profile {
  age: number;
  email: null;
}

interface Order {
  no: string;
  price: number;
  coupon?: string;
}

두 번째 주문에는 coupon이 없어서 옵션 속성이 됐어요. 위 결과는 이 페이지의 변환 코드를 node로 직접 돌려 확인한 값이에요(내보내기·루트 이름 옵션만 다름). 샘플에서 email이 null 하나뿐이라 타입이 null로 나왔는데, 실제로는 문자열이 들어올 수 있다면 string | null로 고쳐야 해요. 샘플 JSON이 모든 경우를 담지 못하기 때문이에요.

자동 변환 결과를 쓸 때 확인할 것

• 샘플은 대표성이 있어야 해요 — 한 건만 보면 있을 때도 없을 때도 있는 키가 필수로 나와요. 여러 건을 배열로 묶어 넣으면 옵션(?)이 자동으로 잡혀요.
• null과 빠진 키는 달라요 — email: null은 값이 null이고, email?: string은 키 자체가 없는 거예요. API가 두 경우를 섞어 쓴다면 email?: string | null처럼 직접 고쳐 쓰세요.
• 날짜와 숫자 문자열 — "2026-10-23"은 JSON에서는 그냥 string이에요. Date 객체로 쓰려면 파싱 코드와 타입을 따로 만들어야 해요.
• 키 이름이 식별자가 아니면 — my-key처럼 하이픈이 있는 키는 "my-key": number;처럼 따옴표로 감싸서 써요.
• 이름 충돌 — 서로 다른 위치에 같은 이름의 키가 있으면 두 번째부터 User2처럼 숫자를 붙여요. 의미에 맞게 이름을 바꾸세요.

interface와 type, 뭘 고르나요

객체 모양을 나타낼 때는 둘 다 쓸 수 있어요. interface는 같은 이름을 다시 선언해 확장할 수 있고 상속(extends)이 자연스러워요. type은 유니온이나 튜플 같은 다른 타입 표현과 함께 쓰기 좋고요. 프로젝트의 규칙이 있다면 그것을 따르고, 없다면 API 응답처럼 객체 모양만 나타낼 때는 interface로 시작해도 충분해요. 이 도구는 두 방식 중 고른 대로 모든 객체 타입을 만들어요.

개인정보와 처리 방식

변환은 모두 브라우저 안의 자바스크립트로 하고, 붙여 넣은 JSON은 서버로 전송되지 않아요. 토큰이나 개인정보가 섞인 응답이라면 값을 지우고 구조만 남겨서 붙여 넣는 습관을 들이는 편이 안전해요. JSON 문법을 먼저 점검하려면 JSON 검사기, 보기 좋게 정리하려면 JSON 포매터, 설정 파일을 바꾸려면 YAML ↔ JSON 변환기를 함께 쓰세요.

이 도구가 하지 않는 것

JSON 스키마 검증, 열거형(enum)·리터럴 타입 추정, 날짜·UUID 같은 형식 판별, 주석 달기는 하지 않아요. JSON에는 타입 정보가 없어서 값에서 알 수 있는 기본 타입(string, number, boolean, null, 배열, 객체)만 추정해요. 결과는 출발점으로 쓰고, 실제 API 문서와 비교해 다듬어 쓰세요. 큰 정수나 소수의 정밀도 문제는 JSON.parse를 쓰기 때문에 자바스크립트 숫자 범위를 따라요.

자주 묻는 질문

이 도구와 함께 보면 좋은 글

관련 도구