it-box

JSON → TypeScript 타입

JSON 샘플에서 중첩 객체와 배열의 TypeScript Root 타입을 생성합니다.

JSON → TypeScript 타입 도구 열기

JSON 샘플 하나를 읽어 각 값의 타입을 TypeScript type 선언으로 옮깁니다.

사용 순서

  1. API 응답이나 설정 파일의 대표 샘플을 붙여 넣습니다.
  2. 생성된 type Root 선언의 필드 이름과 타입을 확인합니다.
  3. 빈 배열이 unknown[]로 나온 필드는 실제 원소 타입으로 직접 고칩니다.
  4. 선택 속성(?)이 필요한 필드가 있는지 판단한 뒤 코드에 옮깁니다.

예시

{"name":"Ada","tags":[]} → type Root = { name: string; tags: unknown[]; }를 여러 줄로 나눈 형태입니다. 빈 배열 tags는 unknown[]이 됩니다.

한계

샘플 하나를 기준으로 모든 속성을 필수로 만듭니다. 선택 속성, 정수와 실수의 구분, 날짜 문자열의 형식은 판단하지 않습니다. 숫자는 모두 number이고 빈 배열은 unknown[]입니다. 모양이 다른 객체가 섞인 배열은 객체마다 유니언으로 나옵니다. 중첩은 64단계, 입력은 2 MiB까지이며, 깊이 들어간 객체의 들여쓰기는 기대보다 크게 나옵니다.

보안 주의

생성된 타입에는 값이 남지 않고 키 이름과 구조만 남습니다. 그래도 내부 API의 필드 이름이 그대로 드러나므로, 외부 공개 저장소의 예제나 문서에 옮기기 전에 노출하면 안 되는 필드 이름이 없는지 보세요.

배경 지식

TypeScript는 객체의 모양을 타입으로 적어 두고, 컴파일 단계에서 없는 속성에 접근하는 실수를 잡아냅니다. 그러나 백엔드 응답 형식은 문서에 없거나 오래된 경우가 많아서, 실제 응답 샘플에서 타입 초안을 뽑는 작업이 자주 필요합니다. 샘플을 손으로 옮기면 필드 이름 오타가 생기기 쉬우므로, 응답을 그대로 붙여 넣고 생성된 선언을 다듬는 방식이 보통 빠릅니다.

샘플로 만든 타입은 출발점일 뿐입니다. 샘플에 없었던 선택 필드나 가끔 오는 null은 드러나지 않으므로, 타입을 확정하기 전에 여러 응답을 비교해야 합니다. 생성기는 본 형태를 그대로 적을 뿐 계약을 검증해 주지는 않습니다. 그래서 생성된 타입은 테스트 코드나 런타임 검증과 함께 쓰는 것이 안전합니다.

자주 묻는 질문

여러 샘플을 합쳐서 타입을 만들 수 있나요?

이 도구는 입력을 하나만 받으므로 여러 샘플을 합친 타입은 만들지 않습니다. 샘플마다 결과를 따로 만든 뒤 값이 달라지는 필드만 손으로 선택 속성으로 바꾸는 방법이 현실적입니다.

정수 타입은 따로 나오지 않나요?

나오지 않습니다. TypeScript에는 정수 전용 타입이 없어서 모든 숫자가 number로 표시됩니다. 큰 정수는 JavaScript가 정확히 표현하는 범위를 넘을 수 있으니 ID 값이라면 문자열 타입으로 바꾸는 것도 고려하세요.

키 이름에 하이픈이 있으면 어떻게 표시되나요?

식별자 규칙에 맞지 않는 키는 "first-name"처럼 큰따옴표로 감싸서 나옵니다. 숫자로 시작하는 키도 같은 방식으로 감싸지며, 이런 키는 점 표기법 대신 대괄호로 접근해야 합니다.