🧩 JSON → TypeScript 변환

JSON 데이터

최상위 인터페이스 이름

배열 안 일부 객체에만 있는 키를 선택 속성(?)으로 표시

만들어진 인터페이스 -

최상위 속성 -

TypeScript 결과

JSON → TypeScript 타입 변환기 사용법

API 응답 예시를 붙여 넣으면 그 모양에 맞는 TypeScript 인터페이스를 만듭니다. 문서에 타입이 없는 외부 API를 붙일 때, 손으로 받아 적기엔 필드가 너무 많을 때 출발점으로 좋습니다.

추론 규칙은 이렇습니다. 문자열은 string, 숫자는 number, 참·거짓은 boolean이 됩니다. null은 null 타입 그대로 두니, 값이 들어올 수 있는 자리는 string | null처럼 직접 고쳐 주세요. 예시만으로는 알 수 없는 빈 배열은 unknown[]이 되고, 종류가 섞인 배열은 (number | string)[]처럼 유니온으로 묶습니다.

중첩된 객체는 인라인으로 두지 않고 별도 인터페이스로 분리합니다. 이름은 키를 파스칼 표기로 바꾼 것이고, 겹치면 뒤에 숫자를 붙인 뒤 몇 개를 그렇게 했는지 알려 줍니다. 객체들로만 이루어진 배열은 모든 요소의 키를 합쳐 하나의 인터페이스로 만들고, 일부 요소에만 있던 키에는 물음표를 붙입니다. 식별자로 쓸 수 없는 키는 따옴표로 감쌉니다.

하지 않는 일도 분명히 해 둡니다. 날짜처럼 보이는 문자열을 Date로 바꾸지 않고, 정해진 값만 오는 필드를 열거형으로 좁히지도 않습니다. 주석이 든 JSON은 읽지 못하며, 형식이 잘못되면 어느 위치에서 실패했는지 보여 줍니다. 결과는 한 번 훑어보며 다듬는 초안입니다.

자주 묻는 질문

빈 배열이 왜 unknown[]으로 나오나요?

예시에 값이 하나도 없으면 무엇이 들어올지 알 수 없기 때문입니다. 요소가 하나라도 있는 예시로 다시 변환하거나 직접 타입을 적어 주세요.

선택 속성(?)은 어떤 기준으로 붙나요?

객체 배열에서 일부 요소에만 있던 키에 붙습니다. 옵션을 끄면 모든 키를 필수로 만들고, 몇 개를 선택으로 처리했는지는 결과 위에 표시됩니다.

중첩 객체를 인라인 타입으로 받을 수 있나요?

이 도구는 항상 별도 인터페이스로 분리합니다. 재사용과 수정이 쉽기 때문이며, 인라인이 필요하면 생성된 인터페이스를 붙여 넣어 합치면 됩니다.

JSON → TypeScript 타입 변환기 사용법

자주 묻는 질문

같은 카테고리 도구