JSON을 TypeScript로 변환
JSON 샘플에서 TypeScript 인터페이스나 타입을 생성합니다. 중첩 객체, 배열, 유니온, null, 선택적 속성을 지원합니다.
브라우저에서 로컬로 처리됩니다. 텍스트는 업로드되지 않습니다.
도구 소개
API 응답이나 설정 파일 샘플을 붙여넣으면 바로 사용할 수 있는 TypeScript 선언이 만들어집니다. 중첩 객체는 이름이 붙은 별도의 인터페이스가 되고, 배열은 타입이 지정된 배열이 되며, null 값은 null 타입으로 표시되어 값이 없을 수 있는 필드를 확인할 수 있습니다.
배열에 객체가 여러 개 있으면 그 구조를 합칩니다. 모든 요소에 있는 속성은 필수로 유지되고, 일부 요소에만 있는 속성은 선택적 속성(name?: type)이 됩니다. 서로 다른 종류의 값이 들어 있는 배열은 (string | number)[] 같은 유니온 타입이 됩니다. first-name처럼 올바른 식별자가 아닌 속성 이름은 따옴표로 묶입니다.
루트 타입 이름, interface 또는 type 별칭 출력, export 여부, 속성의 readonly 지정 여부를 선택할 수 있습니다. 타입 추론은 입력한 샘플을 대상으로 브라우저에서 실행되므로 결과는 샘플이 담고 있는 만큼만 정확합니다. 결과를 검토하고, API가 다른 형태를 반환할 수 있다면 타입을 넓혀 주세요.
사용 방법
- 1대표적인 JSON 샘플을 붙여넣으세요(다양한 샘플일수록 선택적 필드를 더 잘 찾아냅니다).
- 2루트 타입 이름을 정하고 interface 또는 type을 선택하세요.
- 3코드베이스 스타일에 맞게 export와 readonly를 켜거나 끄세요.
- 4생성된 코드를 복사하거나 types.ts로 다운로드한 다음, 필드 타입을 API 명세와 비교해 검토하세요.
지원 형식
입력: 엄격한 JSON. 출력: interface 또는 type 별칭을 사용하는 TypeScript 선언(.ts).
프라이버시
이 도구는 브라우저에서 실행됩니다. 입력하신 데이터는 사용자의 기기에서 처리되며 당사 서버로 전송되지 않습니다.
제한 사항
- 타입은 샘플 하나만 보고 추론합니다. 샘플에서 항상 문자열인 필드가 다른 데이터에서는 숫자나 null일 수 있습니다.
- 빈 배열은 추론할 근거가 없으므로 unknown[]로 표시됩니다.
- 객체 형태의 맵(예: ID를 키로 쓰는 경우)은 Record<string, T>가 아니라 고정된 속성으로 생성됩니다. 이런 경우는 직접 변환하세요.
- 날짜, UUID, 열거형은 단순한 string 또는 number로 나타납니다. 도구는 그 의미를 알 수 없습니다.
- JSON.parse가 반올림하는 2^53 이상의 값을 포함해 모든 숫자는 number로 표시됩니다.
FAQ
선택적 속성은 어떻게 정해지나요?
같은 배열 안의 객체(또는 같은 위치에서 반복되는 객체)를 비교해서만 정합니다. 속성이 요소 하나라도 없으면 선택적 속성으로 표시됩니다. 값이 null인 속성은 선택적이 아니라 null(또는 null과의 유니온) 타입이 됩니다.
interface와 type 중 무엇을 골라야 하나요?
단순한 객체 구조에서는 서로 바꿔 쓸 수 있습니다. interface는 확장하고 병합할 수 있고, type 별칭은 유니온과 매핑된 타입에 더 적합합니다. 코드베이스에서 이미 쓰는 쪽을 고르세요.
중첩된 두 객체에 같은 타입 이름이 붙은 이유는 무엇인가요?
구조가 같은 객체는 하나의 선언으로 재사용됩니다. 서로 다른 구조가 같은 이름을 갖게 되는 경우에는 두 번째에 Item2처럼 숫자 접미사가 붙습니다.
내 JSON이 업로드되나요?
아니요. 타입은 브라우저에서 생성됩니다.
관련 도구
JSON 포맷터
JSON을 구문 강조와 함께 정리하고 키를 정렬합니다. 오류는 행과 열로 정확히 알려 드리며, 브라우저에서 로컬로 실행됩니다.
JSON 검사기
JSON이 올바른지 확인하고, 첫 번째 오류의 정확한 행과 열을 문제 문자 아래 캐럿 표시와 함께 알려 드립니다.
JSON 압축기
JSON의 공백을 제거해 데이터 크기를 줄이고, 필요하면 키도 정렬합니다. 검증과 처리는 브라우저에서 로컬로 이루어집니다.
URL 인코더
URL과 쿼리 문자열에서 안전하게 쓸 수 있도록 텍스트를 퍼센트 인코딩합니다. 구성 요소 모드와 전체 URL 모드를 지원하며 브라우저에서 실행됩니다.