JSON을 TypeScript로 변환
JSON 데이터를 TypeScript 코드로 변환합니다
JSON 입력
TypeScript 출력
JSON을 TypeScript로란?
React나 Angular 앱을 만들고 있는데, JSON API 응답이 앞에 있고 그에 맞는 TypeScript 인터페이스를 정의해야 한다. 깊이 중첩된 응답을 수동으로 작성하는 건 번거롭고 오류가 발생하기 쉽다 — 타입 하나가 잘못되면 편집기가 버그를 잡아주지 않는다. 이 도구는 JSON 구조에서 TypeScript 인터페이스를 직접 추론하여, 응답을 붙여넣기만 하면 몇 초 안에 바로 사용 가능한 타입 정의를 얻을 수 있다.
JSON을 붙여넣으면 TypeScript를 얻습니다. 도구는 브라우저에서 실행됩니다. 서버로 전송되지 않습니다. 출력은 표준 TypeScript 구문을 따릅니다.
이 도구 사용 방법
JSON 붙여넣기
왼쪽 편집기에 JSON을 붙여넣거나 파일을 업로드합니다. 샘플 데이터를 보려면 샘플을 사용하세요. 생성기는 구조에서 타입을 도출합니다. 중요한 모든 필드를 보여주는 대표적인 데이터를 사용하세요.
인터페이스 확인
오른쪽 패널에 생성된 인터페이스가 표시됩니다. 중첩 객체는 자체 인터페이스를 가집니다. 배열은 Type[]으로 타입이 지정됩니다. 구현에 따라 선택적 필드에 ?를 사용할 수 있습니다.
복사 또는 다운로드
복사 또는 다운로드를 사용하여 TypeScript를 가져옵니다. 프로젝트에 붙여넣으세요. 이름을 조정하거나 제네릭을 추가하거나 선택적 필드를 수정해야 할 수 있습니다. JSON을 먼저 검증하려면 JSON 검증기를 사용하세요.
JSON을 TypeScript로 변환이 도움이 되는 경우
API를 통합할 때 응답 페이로드에 대한 타입이 자주 필요합니다. 샘플 응답을 여기에 붙여넣으면 Angular, React 또는 Node 프로젝트에서 사용할 수 있는 인터페이스가 생성됩니다. 구성 파일, 웹훅 페이로드, 데이터베이스 문서도 동일한 방식으로 활용할 수 있습니다. 복잡한 중첩 구조에 대해 수동으로 인터페이스를 작성하면 오류가 발생하기 쉽습니다. 이 도구는 샘플에서 구조를 도출합니다. 스키마 기반 생성의 경우 JSON 스키마 생성기 및 quicktype과 같은 도구를 사용하세요.
JSON을 TypeScript로 변환 예시
다음은 JSON 객체에서 TypeScript 인터페이스를 생성하는 예시입니다.
예시: 구독자 레코드
JSON 입력:
생성된 TypeScript 출력:
제한 사항
생성기는 샘플에서 도출합니다. 필드가 string | number가 될 수 있지만 샘플에 문자열만 포함된 경우 타입은 string이 됩니다. 배열이 비어 있을 수 있는 경우 요소 타입이 unknown일 수 있습니다. 출력을 확인하고 편집하세요. 스키마 기반 생성의 경우 JSON 스키마 생성기 및 quicktype과 같은 도구를 사용하세요.
자주 묻는 질문
JSON에서 TypeScript 인터페이스를 자동으로 생성하려면 어떻게 하나요?
JSON을 이 도구에 붙여넣으면 구조를 기반으로 TypeScript 인터페이스가 생성됩니다. 중첩 객체는 각자의 인터페이스를 갖고, 배열은 Type[]으로 타입이 지정됩니다. Angular, React 또는 Node 프로젝트에 출력을 복사하세요.
JSON에서 TypeScript interface와 type의 차이점은 무엇인가요?
둘 다 잘 작동합니다. interface는 확장하거나 구현해야 할 때 선호됩니다. type은 유니온 타입과 매핑된 타입에 더 적합합니다. 대부분의 API 응답 형태에서는 둘 다 작동합니다 — 생성기는 기본적으로 interface를 출력합니다.
데이터가 어디로 전송됩니까?
아니요. 모든 것이 브라우저에서 실행됩니다 — JSON은 절대 사용자의 기기를 벗어나지 않습니다. 프로덕션 API 응답에도 안전하게 사용할 수 있습니다.
선택적 필드와 열거형은 어떻게 처리되나요?
생성기는 샘플에서 타입을 추론합니다. 선택적이 될 수 있는 필드는 자동으로 ?로 표시되지 않습니다 — 출력을 확인하고 필요한 곳에 ?를 추가하세요. 열거형의 경우, 필드가 특정 문자열 값을 일관되게 사용한다면 string을 "활성" | "비활성"과 같은 유니온으로 바꿀 수 있습니다.
관련 도구
TypeScript는 typescriptlang.org 및 TypeScript 객체를 참조하세요. JSON은 json.org 및 MDN JSON을 참조하세요. 스키마에서 코드 생성은 quicktype을 참조하세요. RFC 8259 (JSON 사양).