JSON으로 TypeScript 타입 만들기

API 응답을 붙여 넣으면 TypeScript 인터페이스를 만들어 줍니다. 배열 항목마다 다른 필드는 선택 속성으로 냅니다.

무엇을 해 주나요

API 응답을 붙여 넣으면 그 모양에 맞는 TypeScript 인터페이스를 만들어 줍니다. 손으로 옮겨 적는 일이 지루하기도 하지만, 옮기다 오타가 나면 컴파일은 되는데 값이undefined가 되어 찾기 어렵습니다.

어려운 지점 세 가지

타입을 만들어 내는 일은 생각보다 판단할 것이 많습니다. 이 도구가 어떻게 정했는지 적어 둡니다.

  1. 배열 안의 객체들이 서로 다를 때. 모든 항목을 함께 보고, 일부에만 있는 필드는 선택 속성으로 냅니다. 첫 항목만 보면 틀린 타입이 나옵니다.
  2. 같은 모양이 여러 번 나올 때. 인터페이스를 하나만 만들어 나눠 씁니다. 중첩된 객체마다 이름을 붙이지 않으면 읽기 어려운 한 덩어리가 됩니다.
  3. JSON에 없는 것들. 날짜는 문자열이고 정수와 실수는 구분이 없습니다. 짐작하지 않고 있는 그대로 냅니다 — 그건 받는 쪽 코드가 정할 일입니다.

만든 타입을 그대로 믿지 마세요

이 도구는 붙여 넣은 응답 하나를 보고 만듭니다. 실제 API는 상황에 따라 다른 모양을 돌려줄 수 있습니다 — 오류일 때, 목록이 비었을 때, 권한이 없을 때. 가능하면여러 응답을 각각 넣어 보고 차이를 확인하세요.

서버에 OpenAPI 명세가 있다면 그쪽에서 만드는 편이 정확합니다. 이 도구는 명세가 없거나 빠르게 훑어볼 때 쓰는 것입니다.

함께 쓰면 좋은 도구

자주 묻는 질문

배열 안의 객체들이 서로 다르면 어떻게 되나요?

<strong>모든 항목을 함께 보고</strong> 타입을 만듭니다. 어떤 항목에만 있는 필드는 선택 속성(<code>?</code>)이 됩니다. 첫 항목만 보고 만드는 도구들이 있는데, 그러면 두 번째 항목에서 <code>undefined</code>가 나오는데도 타입은 있다고 말하는 상태가 됩니다. 찾기 어려운 종류의 버그입니다.

날짜 문자열을 Date로 만들어 주나요?

아니요. JSON에는 날짜라는 형식이 없습니다. <code>"2026-09-23"</code>은 그냥 문자열입니다. 그것을 <code>Date</code>로 바꿀지, 문자열로 둘지는 받는 쪽 코드가 정할 일이라 <strong>짐작하지 않습니다.</strong> 정수와 실수도 마찬가지로 구분이 없어 모두 <code>number</code>입니다.

null이 섞인 필드는요?

기본은 <strong>null을 빼고</strong> 봅니다. JSON에서 null은 "값이 아직 없다"는 뜻일 때가 많아서, 그대로 두면 거의 모든 필드가 <code>| null</code>이 되어 읽기 어려워집니다. 정말 필요하면 <strong>null 살리기</strong>를 켜세요.

같은 모양이 여러 번 나오면요?

인터페이스를 <strong>하나만</strong> 만들고 여러 곳에서 씁니다. 속성 이름과 타입이 모두 같으면 같은 모양으로 봅니다. 반대로 이름은 같은데 내용이 다르면 <code>User</code>, <code>User2</code>처럼 번호를 붙입니다 — 같은 이름이 둘이면 컴파일되지 않기 때문입니다.

이름에 기호가 들어간 필드는요?

<code>user-name</code>처럼 그대로 쓸 수 없는 이름은 따옴표로 감쌉니다. 감싸지 않으면 문법 오류가 나는데, 붙여 넣은 사람은 자기 JSON이 특이한 줄 모르고 헤매게 됩니다. 한글 키도 마찬가지로 감쌉니다.

붙여 넣은 응답이 서버로 가나요?

아니요. 모두 이 브라우저 안에서 처리합니다. <strong>토큰이나 개인정보가 든 실제 응답을 붙여 넣어도 전송되지 않습니다.</strong> 개발자 도구를 웹에서 쓸 때 가장 걸리는 부분인데, 여기서는 해당하지 않습니다. 인터넷을 끊고도 동작합니다.

이 도구가 도움이 되었다면 공유해 주세요

계산 결과가 이상한가요? 알려 주세요.

계산 결과는 참고용이며 법적 효력이 없습니다.

다른 도구