JSON → TypeScript
예시 페이로드를 TypeScript 타입 정의로 바꿉니다. 중첩된 객체는 자체 타입을 갖고, 섞인 배열은 유니온이 되며, 일부 행에만 있는 키는 선택적으로 나옵니다.
JSON
TypeScript
이 도구에 대하여
API 응답을 손으로 타이핑하는 일은 지루하고 미묘하게 틀리기 쉽습니다. 실제 페이로드 하나를 붙여넣으면 그에 맞는 타입 정의가 생성됩니다. 중첩된 객체는 각각 이름이 붙은 타입이 되고, 객체 배열은 하나의 형태로 합쳐져 일부 행에 없는 키가 선택적으로 표시되며, 섞인 배열은 유니온이 됩니다. 같은 형태는 한 번만 출력되어 공유됩니다. 할 수 없는 것은 예시를 넘어 추측하는 일입니다. 예시에서 null이던 필드는 null로 타이핑됩니다. 데이터가 그 이상을 말해 주지 않기 때문입니다.
사용 방법
- 1대표적인 JSON 응답을 붙여넣습니다. 배열의 행이 많을수록 선택적 필드 판정이 정확해집니다.
- 2루트 타입 이름을 정하고 코드베이스에 맞춰 interface나 type을 고릅니다.
- 3결과를 .d.ts 파일에 복사한 뒤, 예시가 너무 좁게 설명한 필드를 손으로 넓힙니다.
자주 묻는 질문
›선택적 필드는 어떻게 판정하나요?
배열 안의 객체들을 맞대어 봅니다. 어떤 요소에는 있고 어떤 요소에는 없는 키는 선택적으로 표시되고, 모두에 있는 키는 필수가 됩니다. 객체가 하나뿐이면 어느 쪽 근거도 없으므로 모든 키가 필수로 나옵니다.
›왜 string | null이 아니라 null로 타이핑되나요?
예시가 보여 준 것이 null뿐이었기 때문입니다. 추론은 받은 데이터만 설명할 수 있습니다. 그런 필드는 손으로 넓히거나, 값이 채워진 예시를 붙여넣으세요.
›서로 다른 두 키가 하나의 interface를 공유하는 이유는?
같은 형태는 한 번만 출력해 재사용하기 때문이고, 그래야 출력이 짧아집니다. 지금 우연히 같아 보일 뿐 개념적으로 다른 타입이라면 interface 이름을 바꾸세요.
›interface와 type 중 무엇을 골라야 하나요?
interface는 확장과 선언 병합이 가능해 객체 형태와 공개 API에 어울립니다. type 별칭은 유니온과 매핑 타입까지 다룹니다. 생성된 페이로드 형태로는 둘의 동작이 같으므로 코드베이스에서 이미 쓰는 쪽을 고르세요.
›런타임에 데이터를 검증해 주나요?
아닙니다. TypeScript 타입은 컴파일 시점에 지워지므로 API 응답이 실제로 맞는지는 아무도 확인하지 않습니다. 런타임 보장이 필요하다면 Zod나 Valibot으로 스키마를 만들고 거기서 타입을 끌어내세요.