JSON → TypeScript 변환기
JSON 샘플에서 TypeScript 인터페이스를 생성합니다. 배열 내부라도 고유한 객체 구조마다 하나의 인터페이스를 할당합니다.
생성된 TypeScript
이용 방법
이 도구는 JSON 샘플의 각 키와 값을 검사하여 TypeScript 인터페이스 정의를 추론한 다음 내보내기 가능한 인터페이스 선언을 출력합니다. API 레코드 목록처럼 동일한 구조가 반복되는 객체 배열은 항목마다 중복 생성하지 않고 단일 공유 인터페이스를 생성합니다.
- JSON 붙여넣기
객체 또는 API 응답과 같은 객체 배열입니다.
- 루트 인터페이스 이름
중첩된 객체는 필드 이름을 따서 명명된 자체 인터페이스를 가집니다.
- TypeScript 복사
입력하거나 옵션을 변경하면 자동으로 업데이트됩니다.
구조 일치 및 명명 방식
중첩된 객체는 별도의 명명된 인터페이스를 생성합니다. 예를 들어 city와 zip을 포함하는 address라는 필드는 Address 인터페이스가 되며, 부모 인터페이스에서는 address: Address로 참조합니다. 인터페이스 이름은 필드 이름의 첫 글자를 대문자로 변환하여 파생됩니다.
모든 객체 구조는 정렬된 속성 이름과 유형으로 구성된 시그니처로 축소됩니다. JSON 내 어디에 있든 두 객체가 동일한 시그니처를 공유하는 경우(예: 레코드 배열의 모든 항목), 숫자 접미사가 붙은 동일한 형태의 새 인터페이스를 생성하는 대신 같은 인터페이스를 재사용합니다.
- 배열: 요소 타입 배열로 타이핑됩니다(예: string[] 또는 Tag[]). 요소가 둘 이상의 고유한 형태를 갖는 배열은 유니온 타입이 됩니다(예: (Cat | Dog)[]).
- 선택적 속성: 샘플에 모든 키가 존재하는 것으로 표시되므로 기본적으로 꺼져 있습니다. 실제 데이터에서 필드가 생략되는 경우가 있다면 "모든 속성을 선택 사항으로"를 켜세요.
- 비표준 키: 하이픈을 포함하는 등 유효한 식별자가 아닌 속성 이름은 출력 시 따옴표로 묶입니다.
단일 샘플로 모든 사례 확인 불가
하나의 예제에서 스키마를 추론하는 다른 도구와 마찬가지로, 때로는 문자열이고 때로는 숫자인 필드는 샘플에 나타난 값에 따라 타이핑되며 유니온 타입은 자동으로 감지되지 않습니다. 출력을 검토하고 실제 데이터가 다양한 곳에 유니온 타입이나 문자열 리터럴 타입을 추가하세요. 모든 처리는 이 페이지 내에서 실행됩니다. 내부 필드명이나 독점 API 구조가 포함될 수 있는 JSON은 어디로도 전송되지 않습니다.
자주 묻는 질문
JSON API 응답에서 TypeScript 인터페이스를 어떻게 생성하나요?
JSON 객체나 배열을 입력 필드에 붙여넣고 루트 인터페이스 이름(기본값은 Root)을 설정하면 입력하는 동안 인터페이스가 다시 생성됩니다. 이 도구는 각 키와 값을 검사하여 TypeScript 타입(string, number, boolean, null, 중첩 인터페이스 또는 배열)을 추론하고 TypeScript 프로젝트에 바로 사용할 수 있는 내보내기 가능한 인터페이스 선언을 출력합니다.
TypeScript 생성기가 오프라인에서도 작동하며 데이터를 어디로도 전송하지 않나요?
네. 모든 생성 과정은 브라우저 내에서 JavaScript로 실행됩니다. 내부 필드명, 데이터 구조 또는 독점 API 형식이 포함될 수 있는 JSON 데이터는 어떠한 서버에도 전송되지 않습니다. 결과 TypeScript는 로컬에서 생성되어 표시됩니다.
이 도구는 중첩된 JSON 객체와 배열을 어떻게 처리하나요?
중첩된 객체는 별도의 명명된 인터페이스를 생성합니다. 예를 들어 city와 zip을 포함하는 address 필드는 Address 인터페이스가 되며, 부모 인터페이스에서는 address: Address로 참조합니다. 배열은 요소 타입의 배열로 지정되며, 예를 들어 string[] 또는 Tag[]가 됩니다. 동일한 형태를 공유하는 객체 배열은 항목마다 별도 인터페이스를 만들지 않고 하나의 인터페이스를 생성하여 모든 요소에 재사용합니다.
생성된 TypeScript 인터페이스에서 선택적 속성은 언제 사용해야 하나요?
JSON의 일부 필드가 특정 객체에 존재하지 않을 수 있는 경우 "모든 속성 선택"을 활성화하세요. 이렇게 하면 각 속성 이름 뒤에 물음표가 추가되어(예: email?: string) TypeScript가 해당 필드를 생략한 객체를 허용합니다. 기본적으로 추론된 모든 속성은 필수입니다. 선택적 쿼리 매개변수나 null 허용 필드가 있는 API를 모델링할 때 선택적 속성을 사용하면 타입 오류를 방지할 수 있습니다.
단일 JSON 샘플에서 TypeScript 타입을 추론할 때 주요 제한 사항은 무엇인가요?
단일 예제에서 스키마를 추론하는 모든 방식과 마찬가지로, 생성기는 샘플에 포함된 내용만 인식할 수 있습니다. 필드가 상황에 따라 문자열 또는 숫자로 나타나는 경우 샘플에 표시된 값을 기준으로 타입이 지정됩니다. string | number | null과 같은 유니온 타입은 자동으로 생성되지 않습니다. 출력 결과를 주의 깊게 검토하고 실제 데이터가 다양하게 나타나는 부분에 대해 유니온 타입, 제네릭 또는 더 구체적인 문자열 리터럴 타입을 추가하세요.