JSON → TypeScript 타입 변환기
JSON 객체(또는 JSON 배열)를 붙여넣으면 이에 대응하는 TypeScript interface/type 정의를 자동으로 생성합니다.
사용 팁
- 배열의 모든 요소가 객체인 경우, 각 요소의 키를 병합하여 하나의 interface를 생성합니다. 일부 요소에만 없는 키는 자동으로 선택적(`?`) 속성으로 처리됩니다.
- 루트 타입의 이름은 기본값인 "Root"에서 원하는 이름(예: `User`, `ApiResponse`)으로 변경할 수 있습니다. 중첩된 객체의 interface 이름은 해당 속성 이름을 기반으로 자동 생성됩니다.
- API 응답의 샘플 JSON을 그대로 붙여넣으면 프런트엔드 구현에서 사용할 타입 정의의 초안을 빠르게 얻을 수 있습니다.
- 생성된 결과는 어디까지나 구조로부터 추론한 타입 초안일 뿐입니다. 실제 API 사양(nullable 여부, 필수 항목 등)과 대조하여 수동으로 조정하는 것을 권장합니다.
자주 묻는 질문
API 응답 샘플 JSON을 보고 수작업으로 타입 정의를 작성하는 것은 시간이 많이 걸리고, 키 이름을 잘못 입력하거나 타입을 놓치기 쉬운 작업입니다. 자동 생성을 이용하면 프런트엔드 개발자가 타입 정의 작성에 드는 시간을 크게 줄이고 이러한 실수도 방지할 수 있습니다.
배열 안의 모든 요소의 키를 병합하며, 일부 요소에만 존재하는 키는 자동으로 선택적 속성(`?`)으로 처리됩니다. 또한 같은 키라도 요소에 따라 타입이 다르면 유니온 타입(`string | number` 등)으로 표현됩니다.
생성된 타입 정의는 어디까지나 샘플 JSON의 구조로부터 기계적으로 추론한 것입니다. null 허용 여부나 향후 추가될 수 있는 필드 등 샘플 JSON만으로는 판단할 수 없는 정보가 있으므로, API 사양서와 대조하여 수동으로 조정하는 것을 권장합니다.
중첩된 객체의 interface 이름은 해당 객체가 저장된 속성 이름을 기반으로 자동 생성됩니다(예: `profile`이라는 키의 객체는 `Profile`이라는 이름의 interface가 됩니다). 같은 이름이지만 형태가 다른 interface가 필요한 경우, 끝에 번호를 붙여 구분합니다.
여담 ― 타입 추론 도구가 해결하는 "타입 불일치" 문제
TypeScript는 정적 타입을 통해 컴파일 시점에 버그를 발견할 수 있는 언어이지만, 외부 API로부터 받는 JSON 데이터의 타입은 개발자가 직접 정의하지 않는 한 TypeScript 컴파일러가 알 수 없습니다. API 사양과 샘플 응답 사이에 차이가 생기거나 필드가 추가·삭제될 때마다 타입 정의를 수동으로 갱신해야 하며, 이러한 "타입 정의와 API의 실제 모습 사이의 괴리"는 많은 프런트엔드 프로젝트에서 골칫거리였습니다.
JSON → TypeScript 변환 도구는 실제로 반환된 샘플 JSON으로부터 타입을 기계적으로 역산함으로써 이 작업을 크게 효율화합니다. 같은 부류의 도구로는 quicktype(여러 언어의 타입 정의를 생성할 수 있는 오픈소스 도구)이 유명하며, JSON Schema・GraphQL 스키마 등 다양한 입력 형식을 지원하는 고기능 구현으로 잘 알려져 있습니다.
타입 추론의 어려움은 JSON 자체에 "이 필드가 항상 존재하는지", "앞으로 null이 될 수 있는지"와 같은 정보가 담겨 있지 않다는 점에 있습니다. 그래서 자동 생성된 타입 정의는 만능이 아니며, 어디까지나 "이번 샘플 데이터의 구조"를 반영한 초안으로 취급하고 실제 API 사양과 대조하여 조정하는 것이 실무상의 정석으로 여겨집니다.