본문으로 건너뛰기
LibraTool logoLibraTool

무료 JSON을 TypeScript로 변환기

임의의 JSON 객체나 배열에서 TypeScript 인터페이스 또는 타입 별칭을 생성합니다. JSON을 붙여넣으면 즉시 사용 가능한 TypeScript 타입을 얻습니다.

한 번 로드하면 오프라인에서도 작동
export interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  tags: string[];
  address?: null;
}

export interface Root {
  user: User;
  createdAt: string;
  version: number;
}

주요 용도

  • API 응답에서 TypeScript 유형 생성API JSON 응답을 붙여넣고 즉시 TypeScript 인터페이스를 생성하여 프런트엔드 코드를 유형 안전하게 합니다.
  • 구성 및 설정 개체에 대한 TypeScript 유형JSON 구성 파일에서 TypeScript 인터페이스를 생성하여 응용 프로그램 설정에 유형 안전성을 추가합니다.
  • 데이터베이스 레코드에서 TypeScript 유형 생성JSON 내보내기 데이터베이스 레코드 또는 ORM 쿼리 결과를 TypeScript 인터페이스로 변환하여 데이터 계층 타이핑을 수행합니다.
  • 모의 데이터 및 테스트 픽스처 유형JSON 모의 데이터 및 테스트 픽스처에서 TypeScript 인터페이스를 생성하여 단위 테스트 및 Storybook 이야기를 입력합니다.
  • 타사 API 응답 유형공식 유형이 누락되거나 오래된 경우 타사 API 응답에서 TypeScript 인터페이스를 생성합니다.

사용 방법

이 도구는 외부 라이브러리 없이 직접 작성한 재귀 타입 추론 알고리즘을 사용합니다. JSON.parse로 입력을 검증하고 파싱한 다음, 자체 순회로 JSON 트리의 모든 값을 훑으며 브라우저에서 바로 TypeScript interface 또는 type 선언을 만듭니다. 서버로 전송되는 것은 없습니다.

  1. 1
    JSON 파싱 및 검증
    입력은 JSON.parse에 전달됩니다. 실패하면 정확한 파싱 오류가 입력란 바로 아래에 표시됩니다. 파싱에 성공하면 나머지 변환을 이끄는 타입이 지정된 값 트리가 만들어집니다.
  2. 2
    재귀 타입 추론
    재귀 getType 함수가 모든 노드를 순회합니다. 기본값은 string, number, boolean, null로 매핑되고, 객체는 새로운 이름의 interface를 만듭니다. 객체 배열은 모든 요소의 키를 병합하므로 일부 항목에만 있는 키는 선택적이 되고, 충돌하는 값 타입은 |로 연결됩니다.
  3. 3
    충돌 없는 interface 이름 지정
    각 중첩 객체는 JSON 키에서 도출한 PascalCase 이름을 받습니다(snake_case, kebab-case, 공백을 모두 정규화). 구조가 다른 두 객체가 같은 이름을 갖게 되면 앞의 정의를 조용히 덮어쓰지 않고 숫자 접미사(Data, Data2, …)를 붙입니다.
  4. 4
    출력 렌더링 및 다운로드
    중첩 interface가 먼저 출력되고 그다음 루트 타입이 선택에 따라 export interface 또는 export type 형식으로 출력됩니다. 결과는 클립보드에 복사하거나 .ts 파일로 다운로드할 수 있으며, 모두 표준 Blob으로 만들어져 서버 왕복이 없습니다.

관련 도구

📋

JSON Schema를 양식으로

JSON Schema를 붙여넣으면 라이브 작동 양식이 생성됩니다 — 텍스트, 숫자, 체크박스, 드롭다운, 목록 필드 — 입력한 JSON을 복사합니다. API 요청 본문 프로토타이핑에 유용합니다. 브라우저에서 실행됩니다.

시도해보기
⌨️

타이핑 속도 테스트 (WPM)

시간 제한, 단어 수, 인용, 커스텀, 선 모드 테스트로 타이핑 속도(WPM)와 정확도를 측정합니다. 실시간 WPM, 원본 속도, 일관성, 결과 그래프, 다국어 지원, 문자별 피드백 — 모두 브라우저에서 실행됩니다.

시도해보기
📐

CSS clamp() 생성기

반응형 타이포그래피와 간격을 위한 유동적인 CSS clamp() 값을 생성합니다. 최소/최대 크기와 뷰포트 범위를 설정하고, 라이브 미리보기와 한 줄 CSS를 복사합니다.

시도해보기

자주 묻는 질문