JSON을 TypeScript로 변환
JSON 데이터를 TypeScript 코드로 변환합니다
JSON 입력
TypeScript 출력
JSON을 TypeScript로란?
TypeScript는 JavaScript에 정적 타입을 추가합니다. API 또는 구성 파일에서 JSON으로 작업할 때 구조를 설명하는 인터페이스나 타입이 필요한 경우가 많습니다. 수동으로 작성하는 것은 번거롭습니다. 이 도구는 JSON에서 TypeScript 인터페이스를 도출합니다: 키와 값을 검사하여 해당 타입 정의를 생성합니다.
JSON을 붙여넣으면 TypeScript를 얻습니다. 도구는 브라우저에서 실행됩니다. 서버로 전송되지 않습니다. 출력은 표준 TypeScript 구문을 따릅니다.
이 도구 사용 방법
JSON 붙여넣기
왼쪽 편집기에 JSON을 붙여넣거나 파일을 업로드합니다. 샘플 데이터를 보려면 샘플을 사용하세요. 생성기는 구조에서 타입을 도출합니다. 중요한 모든 필드를 보여주는 대표적인 데이터를 사용하세요.
인터페이스 확인
오른쪽 패널에 생성된 인터페이스가 표시됩니다. 중첩 객체는 자체 인터페이스를 가집니다. 배열은 Type[]으로 타입이 지정됩니다. 구현에 따라 선택적 필드에 ?를 사용할 수 있습니다.
복사 또는 다운로드
<strong>복사</strong> 또는 <strong>다운로드</strong>를 사용하여 TypeScript를 가져옵니다. 프로젝트에 붙여넣으세요. 이름을 조정하거나 제네릭을 추가하거나 선택적 필드를 수정해야 할 수 있습니다. JSON을 먼저 검증하려면 JSON 검증기를 사용하세요.
JSON을 TypeScript로 변환이 도움이 되는 경우
API를 통합할 때 응답 페이로드에 대한 타입이 자주 필요합니다. 샘플 응답을 여기에 붙여넣으면 Angular, React 또는 Node 프로젝트에서 사용할 수 있는 인터페이스가 생성됩니다. 구성 파일, 웹훅 페이로드, 데이터베이스 문서도 동일한 방식으로 활용할 수 있습니다. 복잡한 중첩 구조에 대해 수동으로 인터페이스를 작성하면 오류가 발생하기 쉽습니다. 이 도구는 샘플에서 구조를 도출합니다. 스키마 기반 생성의 경우 JSON 스키마 생성기 및 quicktype과 같은 도구를 사용하세요.
JSON을 TypeScript로 변환 예시
다음은 JSON 객체에서 TypeScript 인터페이스를 생성하는 예시입니다.
예시: 구독자 레코드
JSON 입력:
생성된 TypeScript 출력:
제한 사항
생성기는 샘플에서 도출합니다. 필드가 <code>string | number</code>가 될 수 있지만 샘플에 문자열만 포함된 경우 타입은 <code>string</code>이 됩니다. 배열이 비어 있을 수 있는 경우 요소 타입이 <code>unknown</code>일 수 있습니다. 출력을 확인하고 편집하세요. 스키마 기반 생성의 경우 JSON 스키마 생성기 및 quicktype과 같은 도구를 사용하세요.
자주 묻는 질문
선택적 필드가 표시됩니까?
구현에 따라 다릅니다. 일부 생성기는 모든 필드를 필수로 표시하고, 다른 생성기는 샘플에서 도출합니다. 출력을 확인하고 필요한 경우 ?를 추가하세요.
유니온 타입은 어떻게 됩니까?
서로 다른 객체에서 동일한 키가 다른 타입을 가지면 생성기는 string | number 또는 유사한 유니온을 사용할 수 있습니다. 또는 하나의 타입을 선택할 수 있습니다. 출력을 확인하세요.
데이터가 어디로 전송됩니까?
아니요. 생성은 브라우저에서 수행됩니다.
열거형은 어떻게 됩니까?
필드에 고정된 문자열 값 집합이 있으면 생성기는 "a" | "b" | "c"와 같은 유니온 타입을 생성할 수 있습니다. 명시적 열거형의 경우 출력을 편집하세요.
관련 도구
TypeScript는 typescriptlang.org 및 TypeScript 객체를 참조하세요. JSON은 json.org 및 MDN JSON을 참조하세요. 스키마에서 코드 생성은 quicktype을 참조하세요. RFC 8259 (JSON 사양).