본문으로 건너뛰기

JSON 타입스크립트 변환

JSON to TypeScript

JSON 예시에서 타입스크립트 인터페이스를 추론하고 선택적 필드와 유니온을 합칩니다.

JSON 응답을 붙여넣으면 그에 맞는 TypeScript 인터페이스가 나옵니다. 첫 레코드만 보는 게 아니라 표본의 모든 레코드를 합쳐서 추론하기 때문에, 일부에만 있는 필드는 필수가 아니라 선택으로 나옵니다. 컴파일만 되는 타입과 실제로 맞는 타입의 차이가 거기서 갈립니다.

🔒 브라우저 안에서만 처리typescriptjsoncodegentypes
출력 언어

예시 JSON

.json 파일 놓기

이 탭에서 읽습니다. 올라가지 않습니다.

가진 원소를 전부 넣으세요. 레코드가 하나 늘 때마다 추측이 좁아집니다. 어느 하나에 없는 필드가 선택 필드가 되는 근거입니다.

TypeScript

사용 방법

  1. 가진 레코드를 되도록 많이 붙여넣습니다

    배열은 첫 원소만이 아니라 모든 원소를 읽어서 합칩니다. 레코드가 셋이면 하나일 때보다 훨씬 많은 것을 알려 줍니다. 어느 하나에 없는 필드가 바로 그 필드를 선택으로 만드는 근거이기 때문입니다.

  2. 루트 타입 이름을 정합니다

    중첩된 객체는 그것을 담은 키 이름을 따르고, 배열이면 단수형으로 바뀝니다. `users`는 `User`가 됩니다. 이름을 직접 정해야 하는 건 루트뿐입니다.

  3. 출력 아래의 숫자를 확인합니다

    타입 수, 선택 필드 수, 유니온 수, 합친 레코드 수가 나옵니다. 유니온이 0보다 크면 어떤 필드가 표본 안에서 서로 다른 종류의 값을 가졌다는 뜻이니, 결과를 코드베이스에 붙여넣기 전에 한 번 볼 만합니다.

  4. 인터페이스를 복사합니다

    출력은 선언 순서대로 정리된 export 인터페이스 묶음입니다. `.d.ts`에 넣거나 이 응답을 받는 fetch 옆에 그대로 붙여넣으면 됩니다.

자주 묻는 질문

이게 검증기인가요?

아니요. TypeScript 타입은 빌드 때 지워지므로 여기서 나온 것은 런타임에 아무것도 검사하지 않습니다. 서버가 모양을 바꾸면 타입과 다른 값이 그대로 들어옵니다. 실제 검사가 필요하면 같은 화면에서 Zod를 골라 파싱하세요.

날짜인데 왜 `string`으로 나오나요?

JSON에서는 문자열이기 때문입니다. 추론은 구조만 봅니다. 값이 무엇인지 말할 뿐, ISO 8601처럼 생긴 문자열을 `Date`로 바꿔야 한다고 짐작하지 않습니다. 그 좁히기는 표본이 아니라 코드베이스에 대한 결정입니다.

어떤 필드가 문자열이었다 숫자였다 하면요?

`string | number` 같은 유니온이 되고 아래 유니온 개수가 올라갑니다. 대개는 타입이 아니라 API 쪽 신호입니다. 종류가 바뀌는 필드는 어딘가 아래쪽에서 터질 버그입니다.

표본에서 리터럴 타입이 나오나요?

아니요. 레코드 셋에서 `status`가 모두 `"active"`여도 `string`으로 나옵니다. 레코드 세 개는 열거형의 근거가 되지 않고, 근거가 얇은 리터럴 타입은 일주일 뒤에 빌드를 깨는 종류의 것입니다.

이 도구로 이어지는 것

다음 단계

이 도구의 결과를 그대로 받을 수 있는 도구들입니다.