liminfo

JSON to TypeScript

JSON에서 TypeScript 인터페이스 자동 생성

JSON to TypeScript 소개

JSON to TypeScript 인터페이스 생성기는 JSON 객체나 배열을 TypeScript 인터페이스 선언 집합으로 브라우저에서 직접 변환합니다. JSON 구조를 재귀적으로 순회하며, 각 일반 객체에 대해 모든 키에 대한 속성을 갖는 export interface 블록을 생성하고 값에서 TypeScript 타입을 추론합니다 — string, number, boolean, null, 또는 중첩 객체의 경우 새로운 인터페이스 이름. 배열은 요소 타입 뒤에 []를 붙여 표현하며, 배열 내 요소 타입이 혼합된 경우 유니온 타입을 생성합니다.

이 도구는 REST API, GraphQL 응답, 설정 파일에서 JSON을 받아 일일이 수동으로 타이핑하지 않고 타입 안전한 인터페이스를 작성해야 하는 TypeScript 개발자가 매일 활용합니다. 루트 인터페이스 이름을 직접 설정할 수 있으며 기본값은 Root입니다. 중첩 인터페이스는 상위 키에서 파생된 대문자로 시작하는 이름을 가져 표준 TypeScript 명명 규칙을 따릅니다. 생성된 코드는 문법 강조와 함께 표시되며 원클릭으로 복사할 수 있습니다.

변환기는 실용적인 엣지 케이스를 처리합니다. 유효한 JavaScript 식별자가 아닌 키는 인터페이스에서 따옴표로 감싸지고, 혼합 타입 배열은 (string | number)[] 같은 유니온 타입을 생성하며, 빈 배열은 unknown[]이 되고, null 값은 null 타입으로 매핑됩니다. 이로써 생성된 인터페이스를 복잡한 중첩 API 응답에서도 TypeScript 프로젝트의 시작점으로 직접 사용할 수 있을 만큼 정확합니다.

주요 기능

  • 중첩 JSON 객체를 별도의 명명된 TypeScript 인터페이스로 재귀 변환
  • string, number, boolean, null, 중첩 인터페이스 참조 타입 자동 추론
  • 혼합 타입 배열에 대한 유니온 타입 생성 (예: (string | number)[])
  • 빈 배열은 unknown[]으로 처리해 타입 과도 제한 방지
  • 식별자가 아닌 키는 인터페이스 정의에서 자동으로 따옴표 처리
  • 사용자 정의 루트 인터페이스 이름, 중첩 이름에 PascalCase 자동 적용
  • 문법 강조된 TypeScript 출력과 원클릭 복사
  • 100% 클라이언트 사이드 — JSON이 브라우저 밖으로 나가지 않음

자주 묻는 질문

이 도구가 생성하는 TypeScript 코드는 어떤 형태인가요?

export interface 선언을 생성합니다. 루트 이름 Person으로 {"name":"Alice","age":30}를 변환하면 export interface Person { name: string; age: number; }가 만들어집니다. 중첩 객체는 별도의 명명된 인터페이스를 추가로 생성합니다.

중첩 인터페이스 이름은 어떻게 결정되나요?

상위 인터페이스 이름과 키 이름을 대문자로 결합해 중첩 인터페이스 이름을 만듭니다. 예를 들어 Root 인터페이스의 address 필드는 RootAddress 인터페이스를 생성합니다. 생성된 이름은 PascalCase 규칙을 따릅니다.

배열은 어떻게 처리되나요?

[1,2,3] 같은 단일 타입 배열은 number[]를 생성합니다. [1,"a",true] 같은 혼합 타입 배열은 (number | string | boolean)[]를 생성합니다. 빈 배열은 요소 타입을 추론할 수 없으므로 unknown[]이 됩니다. 객체 배열은 첫 번째 요소에서 명명된 인터페이스를 생성하고 InterfaceName[]으로 타입을 지정합니다.

null 값은 어떻게 처리되나요?

JSON의 null 값은 TypeScript null 타입으로 매핑됩니다. 실제로 nullable 필드를 표현하고 싶다면 생성된 코드를 붙여넣은 후 null을 string | null로 수동 변경하거나 옵셔널 체이닝을 추가할 수 있습니다.

생성된 인터페이스를 TypeScript 프로젝트에 바로 사용할 수 있나요?

네, 대부분의 일반적인 API 응답에서 생성된 인터페이스는 정확하며 바로 붙여넣을 수 있습니다. 다형성 배열이나 깊은 재귀 구조 같은 복잡한 경우에는 수동 조정이 필요할 수 있지만, 훌륭한 시작점이 됩니다.

루트 인터페이스 이름 필드는 무엇에 사용하나요?

최상위 인터페이스의 이름을 설정합니다. JSON이 사용자 객체를 나타낸다면 루트 이름을 User로 설정하면 export interface User { ... }가 생성됩니다. 중첩 인터페이스는 이 루트를 기준으로 이름이 결정됩니다.

JSON 키가 유효한 TypeScript 식별자가 아니면 어떻게 되나요?

공백, 하이픈이 포함되거나 숫자로 시작하는 키는 인터페이스 정의에서 자동으로 큰따옴표로 감싸집니다(예: "my-key": string;). 이는 유효한 TypeScript 문법입니다.

JSON 데이터가 서버로 전송되나요?

아니요. 모든 변환 로직이 순수 JavaScript로 브라우저에서 실행됩니다. 어떤 데이터도 전송, 기록, 저장되지 않습니다.