JSON → TypeScript 타입 변환기
API 응답 JSON을 붙여넣으면 TypeScript interface나 type을 만들어 줍니다. 중첩 객체는 따로 뽑고, 일부에만 있는 키는 옵셔널로 표시합니다.
JSON
응답 예시를 여러 개 배열로 주면 어떤 키가 늘 있는지 알 수 있어 옵셔널이 더 정확해집니다.
TypeScript — 타입 3개
interface Root {
id: number
name: string
email: null
profile: Profile
posts: Post[]
}
interface Profile {
age: number
city: string
}
interface Post {
id: number
title: string
views?: number
}예시만으로는 알 수 없어 이렇게 정했습니다
중첩 객체
인라인으로 박지 않고 이름을 붙여 따로 뽑습니다
객체 배열
모든 원소의 키를 합치고, 일부에만 있으면 ? 를 붙입니다
null
옵셔널(?)이 아니라 null 타입으로 남깁니다 — 둘은 다릅니다
빈 배열
안을 알 수 없어 unknown[] 으로 둡니다
사용 방법
- 1API 응답이나 설정 파일 JSON을 붙여넣습니다.
- 2루트 타입 이름과 선언 방식(interface / type)을 고릅니다.
- 3만들어진 타입을 복사해 코드에 붙여넣고 필요한 부분만 손봅니다.
자주 묻는 질문
이름을 붙여 별도 타입으로 뽑습니다. 인라인으로 박으면 두세 단만 깊어져도 읽기 어려워지기 때문입니다. 키 이름을 PascalCase로 바꿔 타입 이름으로 쓰고, 이름이 겹치면 뒤에 번호를 붙입니다.
모든 원소의 키를 합친 뒤, 일부에만 있는 키에 물음표를 붙여 옵셔널로 만듭니다. 실제 API 응답에서 가장 자주 문제가 되는 부분이라 예시를 여러 개 넣을수록 정확해집니다.
둘은 다르기 때문입니다. 옵셔널(?)은 키가 아예 없을 수 있다는 뜻이고, null은 키는 있는데 값이 비었다는 뜻입니다. 서버가 항상 키를 보내면서 값만 null로 주는 경우가 많아 그대로 null 타입으로 남깁니다.
unknown[]이 됩니다. 원소가 하나도 없으면 무엇이 들어갈지 알 방법이 없기 때문입니다. 값이 든 예시로 다시 만들거나 결과에서 직접 고쳐 쓰세요.
아닙니다. 모든 변환이 브라우저 안에서 이루어지며 서버로 전송되지 않습니다. 다만 브라우저에는 마지막 입력이 저장되므로 공용 PC에서는 지우고 나가세요.
결과물이 다릅니다. 이 도구는 코드에 바로 붙여넣을 TypeScript 선언을 만들고, JSON Schema 변환기는 값 검증에 쓰는 스키마 문서를 만듭니다. 타입만 필요하면 이쪽, 런타임 검증까지 하려면 그쪽입니다.
알아두면 좋은 점
- 샘플 하나로 타입을 짐작하므로 완전하지 않습니다. 결과를 출발점으로 삼고 손보세요.
- 숫자가 늘 정수인지, 문자열이 정해진 몇 가지 중 하나인지는 예시만으로 알 수 없습니다.
- 모든 처리가 브라우저에서만 이루어집니다.
함께 보면 좋은 도구
마지막 검증: 2026년 8월 29일 · 결과는 참고용 추정치입니다.