JSON을 TypeScript로 변환

업로드

TypeScript 인터페이스

변환을 시작하려면 왼쪽에 JSON을 입력하세요

준비

무료 온라인 JSON을 TypeScript로 변환 도구. JSON 데이터를 표준 TS interface 타입 정의로 자동 추론. 중첩 객체 서브 인터페이스, 배열 유니온 타입, 선택적 필드와 readonly 읽기 전용 필드, 2/4 공백 들여쓰기 선택 지원, 순수 브라우저 로컬 처리로 업로드하지 않음.

JSON을 TypeScript로 변환 소개: JSON 데이터를 자동으로 TS 타입으로

JSON을 TypeScript로 변환은 JSON 형식의 데이터(JSON 객체 또는 JSON 배열)를 TypeScript interface 타입 선언으로 변환하는 프로세스입니다. JSON(JavaScript Object Notation)은 REST API, 설정 파일, 로그의 표준 데이터 형식으로 프론트엔드와 백엔드 개발에서 어디에나 존재하며, TypeScript는 JavaScript의 상위 집합으로 코드에 정적 타입 검사를 추가합니다. 개발에서는 API가 반환하는 JSON에 해당하는 TS interface를 작성해야 하는 경우가 많은데, 수동으로 작성하면 오류가 발생하기 쉽고 시간이 많이 걸리므로 본 도구는 이 프로세스를 자동화합니다.

본 도구의 핵심은 JSON 객체의 구조를 TypeScript interface로 자동 추론하는 것입니다. 각 JSON 객체의 key가 interface의 속성명이 되고, 각 value의 리터럴 타입이 해당하는 TS 타입에 매핑됩니다: 문자열은 `string`, 숫자는 `number`, 불리언은 `boolean`, null은 `null`, 배열은 `T[]`, 중첩 객체는 독립적인 서브 interface에 매핑됩니다. 전체 프로세스는 브라우저 로컬에서 완료되며 백엔드 서비스가 필요 없고, 몇 초 만에 완전하고 사용 가능한 타입 정의를 생성할 수 있습니다.

타입 추론은 JSON을 TypeScript로 변환의 핵심입니다. JSON 자체에는 6가지 기본 타입(null, boolean, number, string, array, object)만 있지만, TypeScript의 기본 타입 시스템에는 string, number, boolean, null, undefined, any, unknown, void, never, object, Array, T[], 유니온 타입 (A | B) 등이 포함됩니다. 본 도구의 getTsType 함수는 value의 typeof와 구체적인 형식에 따라 매핑합니다: typeof null은 `null`로 매핑; typeof undefined는 `undefined`로 매핑; typeof boolean은 `boolean`으로 매핑; typeof number는 `number`로 매핑; typeof string은 `string`으로 매핑; Array.isArray()가 적중하면 배열로 처리합니다.

중첩 객체 처리는 도구의 핵심 기능입니다. JSON에 중첩 객체가 포함되면 도구는 재귀적으로 독립적인 서브 interface를 생성하여 타입 중복을 피합니다. 예를 들어 `address: { street, city }`는 `RootAddress` 서브 interface를 생성하고, 메인 interface에서는 `address: RootAddress`로 참조합니다. 서브 interface의 명명 규칙은 "부모 interface 이름 + 필드명 첫 글자 대문자"로 의미적 명확성을 유지합니다. processedTypes Set은 중복 제거에 사용되며, 동일한 구조의 중첩 객체는 한 번만 interface를 생성합니다.

배열 타입 추론에는 세 가지 처리 모드가 있습니다. 첫째, 배열이 비어 있으면 `any[]`를 폴백으로 생성합니다(요소 타입을 추론할 수 없기 때문). 둘째, 모든 요소의 타입이 일치하면 `T[]` 형식(예: `string[]`, `User[]`)을 생성합니다. 셋째, 요소 타입이 일치하지 않으면 유니온 배열 `(A | B)[]`(예: `(string | number)[]`)을 생성합니다. 이러한 구분을 통해 생성된 타입은 정확하고 읽기 쉬우며, 불필요한 `any[]`의 과도한 사용을 피합니다.

선택적 필드(?)는 TypeScript strict 모드의 중요한 기능입니다. 활성화하면 도구는 각 필드의 값을 스캔하여 null 또는 undefined이면 interface에 `?` 수정자를 추가합니다: `name?: string`은 해당 필드가 생략 가능함을 나타냅니다. 이는 백엔드 API가 반환하는 선택적 필드에 매우 유용하며, undefined 필드 접근 시 런타임 오류를 피할 수 있습니다. 읽기 전용 필드(readonly)는 불변성을 강조하며, 생성된 코드는 `readonly id: number`와 같은 형식으로 설정, 상태 스냅샷, DTO 등의 시나리오 정의에 적합합니다.

interface vs type 별칭은 TypeScript 사용자의 일반적인 선택입니다. 본 도구는 interface를 일관되게 생성하는 것을 선택했는데, 그 이유는 interface가 TypeScript에서 객체 타입을 기술하는 표준 방식이며 선언 병합(declaration merging), implements 키워드, extends 상속을 지원하여 React, Vue, Angular 등 주류 프론트엔드 프로젝트의 코딩 규칙에 더 부합하기 때문입니다. type 별칭은 유니온 타입, 교차 타입, 함수 타입을 기술할 때 더 강력하지만, 객체 타입에는 interface가 선호됩니다.

실시간 변환은 도구의 실용적인 기능입니다. 사용자가 JSON을 입력하면 400ms 디바운스로 자동 변환이 트리거되며 수동으로 버튼을 클릭할 필요가 없습니다. CodeMirror의 TypeScript 구문 하이라이트(@codemirror/lang-javascript의 typescript: true 옵션을 통해)와 결합되어 사용자는 생성된 interface를 즉시 확인하고 입력을 수정하여 출력 변화를 관찰할 수 있습니다. 이러한 실시간 피드백은 타입 설계 효율을 크게 향상시키며, 특히 빠른 시행착오 시 효과적입니다.

JSON 오류 자동 복구는 도구의 견고성을 향상시킵니다. 현실에서 사용자가 입력하는 JSON에는 후행 쉼표, 작은따옴표, 인용 부호 누락, 주석 등의 작은 문제가 자주 있습니다. 내장 tryFixJSON 함수는 JSON.parse가 실패할 때 일반적인 오류의 수정을 자동으로 시도하고, 수정에 성공하면 사용자에게 알립니다. 여전히 파싱할 수 없는 경우 오른쪽에 구체적인 오류 위치와 이유가 표시되어 사용자의 수정을 안내합니다. 이 설계는 도구의 실용성을 한 단계 더 끌어올려, 작은 오류로 수동 조정을 반복할 필요가 없습니다.

순수 프론트엔드 처리는 본 도구의 핵심 아키텍처입니다. 모든 JSON 파싱, 타입 추론, interface 생성은 브라우저 JavaScript에서 실행되며 어떤 서버에도 데이터를 전송하지 않습니다. 이 설계에는 두 가지 핵심 이점이 있습니다: 첫째, JSON 내용에는 사용자의 민감 정보(API 키, 토큰, 사용자 데이터)가 포함될 수 있으며 로컬 처리는 유출 위험을 완전히 제거합니다; 둘째, 변환 속도는 디바이스 CPU에만 제한되어 1MB 이내의 JSON은 거의 즉시 변환이 완료되어 네트워크 왕복을 기다릴 필요가 없습니다. 이는 등록 로그인이 필요한 일부 온라인 서비스에 비해 더 우수한 프라이버시 보호와 성능을 제공합니다.

사용 사례

프론트엔드 개발에서 REST API 또는 GraphQL이 반환하는 JSON 응답을 빠르게 TS interface로 변환하여 수동 타입 정의를 피합니다.
React/Vue/Angular 프로젝트의 Props, State, 컴포넌트 매개변수에 타입 선언이 필요할 때 샘플 JSON에서 몇 초 만에 생성합니다.
풀스택 TypeScript 프로젝트에서 프론트엔드와 백엔드가 타입 정의를 공유할 때 백엔드 mock JSON을 프론트엔드 type source of truth로 사용할 수 있습니다.
제3자 API(택배, 날씨, 결제 등) 연동 시 해당 TypeScript 인터페이스를 빠르게 생성하여 문서 조회를 절약합니다.
mock 데이터, 테스트 픽스처, JSON 설정 파일에서 타입 정의를 역추론하여 타입 안전성과 IDE 인텔리센스를 강화합니다.
데이터베이스 ORM이 내보낸 JSON Schema를 TypeScript interface로 변환하여 Node.js 백엔드 DTO 정의에 통합합니다.
TypeScript 학습 시 기존 JSON을 interface 예제로 변환하여 중첩 타입, 유니온 타입, 선택적 필드 작성법을 이해합니다.
코드 리팩토링 시 흩어진 JS 객체 리터럴을 정식 interface로 변환하여 코드 가독성과 타입 안전성을 향상시킵니다.

이용 방법

왼쪽 입력 상자에 JSON 내용을 붙여넣거나 "업로드" 버튼을 클릭하여 .json/.txt 파일을 선택하거나 "샘플"을 클릭하여 내장 샘플을 로드합니다.
도구 모음 오른쪽의 interface 이름 버튼(또는 톱니바퀴 아이콘)을 클릭하여 루트 interface 이름을 사용자 정의(기본값 Root)하고, 선택적 필드/읽기 전용 필드를 활성화합니다.
도구가 자동으로 변환합니다(입력 후 400ms 디바운스); 오른쪽에서 생성된 TypeScript interface 코드를 확인하고, CodeMirror 하이라이트로 가독성을 높입니다.
들여쓰기 스타일(2 공백 또는 4 공백)을 선택하고, 도구 모음의 왼쪽/오른쪽 패널 너비를 조정하여 최적인 보기 환경을 얻습니다.
"복사"를 클릭하여 TS 코드를 클립보드에 복사하거나, "다운로드"를 클릭하여 `${interfaceName}.ts` 파일(예: User.ts)로 저장합니다.
코드를 프로젝트의 `types/` 디렉토리 또는 `src/types/` 디렉토리에 붙여넣고 필요에 따라 import하여 사용합니다.

주요 기능

스마트 타입 추론: null, boolean, number, string, array, object 등의 TypeScript 타입을 자동 인식하여 네이티브 TS 구문으로 매핑합니다.
중첩 객체 자동 전개: 중첩 객체에 대해 독립적인 서브 interface(예: RootAddress)를 자동 생성하여 타입 계층을 명확하게 유지하고 중복을 피합니다.
배열 타입 스마트 처리: 요소 타입이 일치하면 `T[]`, 혼합 타입은 유니온 배열 `(A | B)[]`, 빈 배열은 `any[]`를 폴백으로 생성합니다.
선택적 필드 마크: 활성화 시 null/undefined 필드를 자동 감지하여 `?` 수정자를 추가하고 TypeScript strict 모드를 준수하는 코드를 생성합니다.
읽기 전용 필드 지원: 활성화 시 모든 필드에 `readonly` 수정자를 추가하며, 불변 상태, 설정, DTO 등의 시나리오에 적합합니다.
interface 이름 사용자 정의: 루트 interface 이름 설정 가능(기본값 Root), 다운로드 파일명도 해당 이름으로 명명됩니다(예: User.ts).
2/4 공백 들여쓰기 선택 가능: 도구 모음에서 원클릭으로 전환, 2 공백(ESLint 기본) 및 4 공백 들여쓰기 스타일.
실시간 자동 변환: JSON 입력 후 400ms 디바운스로 자동 변환, 버튼 클릭 불필요; 붙여넣기, 파일 업로드, 샘플 세 가지 입력 방식 지원.
JSON 오류 자동 복구: 내장 tryFixJSON 복구 함수로 후행 쉼표, 작은따옴표, 인용 부호 누락 등의 일반적인 구문 오류를 자동 처리합니다.
TypeScript 코드 하이라이트: 오른쪽 출력은 CodeMirror + JavaScript (TypeScript) 하이라이트를 사용하여 가독성이 높습니다.
복사 및 다운로드: 원클릭으로 클립보드에 복사하거나 표준 .ts 파일로 다운로드하여 프론트엔드 프로젝트에서 바로 사용할 수 있습니다.
순수 브라우저 로컬 처리: 모든 JSON 파싱, 타입 추론, interface 생성은 브라우저 JavaScript에서 실행되며 원본 데이터는 업로드되지 않습니다.

자주 묻는 질문

JSON을 TypeScript interface로 어떻게 변환하나요?

왼쪽 입력 상자에 JSON 내용을 붙여넣으면 도구가 자동으로 각 필드의 타입(string, number, boolean, array, object 등)을 추론하여 표준 TypeScript interface 정의를 생성합니다. 중첩 객체는 자동으로 서브 interface를 생성하여 타입 계층을 명확하게 유지합니다. 입력 후 400ms에 자동 변환되며 수동 클릭이 필요하지 않습니다.

type 별칭과 interface 중 어떤 것을 생성하나요?

본 도구는 TypeScript interface 선언만 생성합니다(type 별칭은 미지원). interface는 TypeScript에서 객체 타입을 기술하는 표준 방식으로, 선언 병합(declaration merging)과 implements 키워드를 지원하며 React, Vue, Angular 등의 프론트엔드 프로젝트에서 선호됩니다.

선택적 필드를 어떻게 표시하나요?

설정에서 "선택적 필드(?)"를 활성화하면 도구가 값이 null 또는 undefined인 필드를 자동으로 감지하여 interface에 `?` 수정자를 추가합니다. 예를 들어 `name?: string`은 해당 필드가 생략 가능함을 나타냅니다. 생성된 코드는 TypeScript strict 엄격 모드 사양을 준수합니다.

읽기 전용 필드를 어떻게 생성하나요?

설정에서 "읽기 전용 필드(readonly)"를 활성화하면 모든 필드에 자동으로 `readonly` 수정자가 추가됩니다. 예를 들어 `readonly id: number`와 같이 생성됩니다. 이렇게 생성된 interface는 불변성을 강조하며 설정, 상태 스냅샷, DTO 등의 시나리오 정의에 적합합니다.

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

도구는 배열 요소의 타입을 분석합니다. 모든 요소의 타입이 일치하면 `T[]` 형식(예: `string[]`)을 생성합니다. 타입이 일치하지 않으면 유니온 배열 `(A | B)[]` 형식(예: `(string | number)[]`)을 생성합니다. 배열이 비어 있으면 `any[]`를 폴백으로 생성합니다.

중첩된 객체는 여러 interface를 생성하나요?

예. 각 중첩 객체는 독립적인 서브 interface를 생성하며 명명 규칙은 "부모 interface 이름 + 필드명 첫 글자 대문자"입니다. 예를 들어 Root에 address 객체가 포함되면 Root와 RootAddress 두 개의 interface를 동시에 생성합니다. 서브 interface는 자동으로 참조되어 타입 중복 정의를 피합니다.

interface 이름을 사용자 정의할 수 있나요?

예. 도구 모음 오른쪽의 interface 이름 버튼(또는 설정)을 클릭하면 루트 interface의 이름을 사용자 정의할 수 있습니다(기본값 Root). 다운로드되는 .ts 파일도 해당 이름으로 명명됩니다(예: `User.ts`). 서브 interface의 명명은 루트 이름을 기반으로 자동 생성됩니다.

다운로드한 .ts 파일을 프로젝트에서 바로 사용할 수 있나요?

예. 생성된 코드는 TypeScript 코딩 규칙을 준수하며 완전한 타입 정의, 중첩 interface, 유니온 타입 추론 등을 포함하여 React, Vue, Angular 또는 Node.js 프로젝트에 직접 복사하여 사용할 수 있습니다. 다운로드 파일명은 `${interfaceName}.ts`이며, User.ts와 같습니다.

JSON 파싱에 실패하면 어떻게 하나요?

JSON에 후행 쉼표, 인용 부호 누락, 작은따옴표로 대체된 큰따옴표 등의 일반적인 오류가 있으면 도구가 자동으로 tryFixJSON을 호출하여 수정을 시도합니다. 수정에 성공하면 사용자에게 알립니다. 수정할 수 없는 경우 오른쪽에 구체적인 오류 위치와 이유가 표시됩니다. 2/4 공백 들여쓰기로 다시 포맷한 후 시도할 수 있습니다.

어떤 JSON 데이터 구조를 지원하나요?

모든 유효한 JSON 데이터 구조를 지원합니다: 기본 타입(null, boolean, number, string), 배열(1차원 또는 다차원), 중첩 객체(임의 깊이), 혼합 타입 배열(유니온 타입 생성). 지원하지 않는 입력: JSON에 함수, Symbol, undefined 등 JavaScript 특수 값이 포함된 경우(이것들은 유효한 JSON이 아님).

들여쓰기 공백 수를 선택할 수 있나요?

예. 도구 모음 오른쪽에 들여쓰기 설정 드롭다운이 있으며 2 공백과 4 공백 두 가지 스타일을 지원합니다. 2 공백은 ESLint/Prettier 기본 스타일이며, 4 공백은 더 느슨한 들여쓰기가 필요한 프로젝트에 적합합니다. 생성된 코드는 일관된 들여쓰기를 유지하여 읽기 쉽고 유지보수가 용이합니다.

JSON Schema, Zod 등의 타입 라이브러리와 어떤 차이가 있나요?

JSON Schema는 런타임 데이터 검증(API 경계, 사용자 입력 검증)에 적합합니다. Zod/yup는 TypeScript 친화적인 런타임 검증 라이브러리로, schema에서 TS 타입을 역방향으로 생성할 수 있습니다. 본 도구는 경량의 순수 타입 정의 생성기로 런타임 검증을 수행하지 않으며 프론트엔드 정적 타입 정의 시나리오에 집중하여 더 빠르고 의존성이 없습니다.

문제 해결

생성된 interface가 올바르지 않으면 어떻게 하나요?

일반적인 원인: JSON 파싱 실패, 중첩 객체 인식 오류, 배열 타입 추론 오류. 해결: 1) JSON이 유효한지 확인(JSON 포맷 도구 사용); 2) 중첩 객체의 경우 서브 interface 참조 관계 확인; 3) 배열의 경우 요소 타입이 일치하는지 확인; 4) 재생성하거나 수동으로 미세 조정. 생성된 interface는 초안이며 프로젝트의 실제 API에 따라 세부 사항을 조정해야 합니다.

다운로드한 .ts 파일이 프로젝트에서 컴파일 오류를 일으키나요?

가능한 원인: 1) tsconfig.json에서 strict 모드가 활성화되지 않았지만 readonly 필드가 생성됨; 2) 인터페이스 이름이 프로젝트 내 다른 타입과 충돌; 3) 필드 이름이 TypeScript 키워드(예: `class`, `type`). 해결: tsconfig의 strict 설정 조정, 인터페이스 이름 변경, 충돌하는 필드에 인용 부호 이스케이프 추가(예: `"class": string`).

JSON에 중첩 배열이 포함되어 타입 추론이 잘못되나요?

본 도구는 다차원 배열(예: `[[1, 2], [3, 4]]`)을 재귀적으로 처리하여 최종적으로 `number[][]`를 생성합니다. 중첩 배열의 요소 타입이 일치하지 않으면 도구는 `((A | B)[])[]` 형식을 생성합니다. 빈 배열은 항상 `any[]`를 생성합니다(요소 타입을 추론할 수 없기 때문).

null 값이 선택적 필드가 아닌 `null` 타입으로 매핑되나요?

기본적으로 도구는 JSON의 null 값을 TS의 `null` 타입으로 매핑합니다(예: `middleName: null`). 선택적 필드(`middleName?: string`)를 생성하려면: 1) "선택적 필드" 옵션 활성화(권장); 2) 또는 JSON의 null 값을 필드 누락으로 변경; 3) 또는 생성 후 수동으로 `null`을 `string | null` 또는 `?`로 변경.

인터페이스 이름과 다운로드 파일명이 일치하지 않나요?

도구에서 둘 다 동일한 값이며 "interface 이름" 설정으로 제어됩니다(기본값 Root). 다운로드 파일명은 `${interfaceName}.ts`입니다. 일치하지 않는 것처럼 보이면 여러 탭이 열려 설정이 동기화되지 않았을 수 있습니다. 설정 변경 후 재생성하는 것을 권장합니다.

생성된 코드에 대량의 `any` 타입이 있나요?

가능한 원인: 1) JSON에 인식할 수 없는 타입이 포함됨(실제로는 object이지만 파싱 오류); 2) 배열이 비어 any[] 폴백; 3) 필드 값이 null이고 선택적 필드가 활성화되지 않음. 해결: JSON 데이터의 무결성 확인, 샘플 데이터를 추가하여 도구 추론 향상, 항상 비어 있는 배열은 수동으로 타입 지정(예: `User[]`).

생성된 interface를 기존 타입과 병합하고 싶어요

TypeScript interface는 선언 병합(declaration merging)을 지원하며 동명의 interface는 자동으로 속성을 병합합니다. 프로젝트에서 같은 이름의 interface를 생성하여 export하기만 하면 됩니다. 예를 들어 도구가 `export interface User { id: number }`를 생성하고 프로젝트에서 `export interface User { name: string }`를 작성하면 둘은 자동으로 `{ id: number; name: string }`로 병합됩니다.

용어집

JSON (JavaScript Object Notation): JavaScript 객체 구문을 기반이지만 프로그래밍 언어에 독립적인 경량 데이터 교환 형식. 객체 ({}), 배열 ([]), 문자열, 숫자, 불리언, null의 6가지 기본 타입을 지원합니다. REST API, 프론트엔드와 백엔드 데이터 전송, 설정 파일, 로그 등의 시나리오에서 널리 사용됩니다.
TypeScript: Microsoft가 개발한 JavaScript의 상위 집합으로, JavaScript에 정적 타입 정의, 인터페이스, 제네릭 등의 특성을 추가합니다. TypeScript 코드는 순수 JavaScript로 컴파일되어 브라우저 또는 Node.js에서 실행됩니다. React, Vue, Angular 등 현대 프론트엔드 프로젝트에서 선호되는 언어입니다.
인터페이스 (interface): TypeScript에서 객체 타입을 기술하는 키워드로, 구문은 `interface Name { prop: type; }`. 선언 병합(동명 interface 자동 병합), implements(클래스가 인터페이스 구현), extends(인터페이스 상속)를 지원합니다. TypeScript에서 객체 형태를 기술하는 주요 방식입니다.
type 별칭: TypeScript에서 타입에 별명을 붙이는 키워드로, 구문은 `type Name = ...`. 유니온 타입(`A | B`), 교차 타입(`A & B`), 함수 타입 등의 정의에 사용할 수 있습니다. interface보다 유연하지만 선언 병합은 지원하지 않습니다. 본 도구는 type이 아닌 interface를 일관 사용합니다.
타입 추론 (Type Inference): 본 도구가 JSON value의 typeof와 구체적인 형식에 따라 해당 TS 타입을 자동 결정하는 프로세스입니다. 예를 들어 typeof string은 string으로 매핑, Array.isArray()가 적중하면 배열로 처리, typeof object가 적중하면 독립적인 서브 interface를 생성합니다.
선택적 필드 (?): TypeScript에서 필드가 생략 가능함을 나타내는 수정자. `name?: string`은 name 필드가 존재하지 않을 수 있음을 나타냅니다(값은 undefined). 본 도구의 "선택적 필드" 옵션을 활성화하면 값이 null 또는 undefined인 필드에 자동으로 `?`가 추가됩니다.
읽기 전용 필드 (readonly): TypeScript에서 필드가 불변임을 나타내는 수정자. `readonly id: number`는 id 필드가 객체 생성 후 재할당될 수 없음을 나타냅니다. 본 도구의 "읽기 전용 필드" 옵션을 활성화하면 모든 필드에 자동으로 `readonly`가 추가됩니다.
유니온 타입 (Union Type): TypeScript에서 값이 여러 타입 중 하나일 수 있음을 나타내는 구문으로, `A | B`로 작성합니다. 본 도구는 배열 요소의 타입이 일치하지 않을 때 사용하며, 예를 들어 `(string | number)[]`는 배열 요소가 string 또는 number일 수 있음을 나타냅니다.
배열 타입 (Array Type): TypeScript에서 배열을 나타내는 구문으로, 두 가지 형식이 있습니다: 제네릭 형식 `Array<T>`와 단축 형식 `T[]`. 본 도구는 단축 형식을 일관 사용합니다. 본 도구에는 세 가지 배열 타입 생성 모드가 있습니다: 일관 타입 `T[]`, 혼합 타입 `(A | B)[]`, 빈 배열 `any[]`.
중첩 인터페이스 (Nested Interface): 인터페이스 내에서 다른 인터페이스를 참조하여 타입 계층을 형성하는 것. 본 도구는 각 중첩 객체에 대해 독립적인 서브 interface를 생성하고, 메인 인터페이스는 속성명으로 참조합니다. 예를 들어 Root는 RootAddress를 참조하고, RootAddress는 다른 타입에서 독립적으로 참조될 수 있습니다.
TypeScript strict 모드: TypeScript 컴파일러의 엄격 모드로, noImplicitAny, strictNullChecks, strictFunctionTypes 등의 여러 하위 옵션을 포함합니다. strictNullChecks를 활성화하면 null과 undefined는 독립적인 타입이 되어 다른 타입 변수에 할당할 수 없습니다. 본 도구가 생성하는 선택적 필드는 strict 모드와 완전히 호환됩니다.
DTO (Data Transfer Object): 데이터 전송 객체로, 다른 계층(API와 Service 계층 등) 간에 데이터를 전송하는 데 사용됩니다. TypeScript 프로젝트에서는 보통 interface로 기술되며, readonly와 결합하여 불변성을 강조합니다. 본 도구는 DTO 타입 정의를 생성하는 일반적인 도구입니다.
선언 병합 (Declaration Merging): TypeScript interface의 특성: 동명의 interface가 자동으로 속성을 병합합니다. 제3자 라이브러리의 타입 정의를 확장할 때 자주 사용됩니다. 본 도구가 생성하는 interface는 프로젝트 내 다른 동명 interface와 병합할 수 있어 점진적인 타입 확장이 용이합니다.
tsconfig.json: TypeScript 프로젝트의 설정 파일로, 프로젝트 루트 디렉토리에 있습니다. compilerOptions(target, module, strict 등), include, exclude 등의 설정을 포함합니다. 본 도구가 생성하는 .ts 파일은 표준 tsconfig 프로젝트에서 그대로 사용할 수 있습니다.
tryFixJSON: 본 도구 내장의 JSON 복구 함수로, 후행 쉼표, 작은따옴표로 대체된 큰따옴표, 누락된 인용 부호의 key, 주석 등의 일반적인 JSON 구문 오류를 자동 처리합니다. JSON.parse가 실패할 때 자동으로 호출되며, 수정에 성공하면 사용자에게 알리고 변환을 계속합니다.

JSON 타입에서 TypeScript 타입으로의 매핑 규칙

본 도구의 getTsType 함수가 JSON value의 형식에 따라 TypeScript 타입을 추론하는 완전한 규칙:

JSON 값	예제	TypeScript 타입	판단 규칙
`null`	`null`	`null`	JSON null은 직접 TS null 타입으로 매핑
`undefined`	`undefined`	`undefined`	undefined 값은 TS undefined로 매핑(런타임에만 존재)
`boolean`	`true / false`	`boolean`	typeof boolean은 TS boolean으로 매핑
`integer`	`1, 100, -9999`	`number`	정수와 부동소수점 모두 TS number로 매핑
`float`	`3.14, -0.5, 1e10`	`number`	모든 숫자 리터럴은 number로 매핑(TS는 정수와 부동소수점을 구분하지 않음)
`string`	`"Alice", "서울"`	`string`	typeof string은 TS string으로 매핑
`empty array`	`[]`	`any[]`	빈 배열은 요소 타입을 추론할 수 없어 any[] 폴백
`homogeneous array`	`[1, 2, 3]`	`T[] (예: number[])`	요소 타입이 일치하면 단일 배열 타입 생성
`mixed array`	`[1, "a"]`	`(A \| B)[] (예: (number \| string)[])`	요소 타입이 일치하지 않으면 유니온 배열 타입 생성
`object`	`{a: 1, b: "x"}`	`SubInterface (예: Root)`	중첩 객체는 독립적인 서브 interface를 생성하여 참조

interface vs type 별칭 비교

본 도구가 type 별칭이 아닌 interface를 생성하는 이유와 TypeScript 프로젝트에서의 차이점:

능력 차원	interface	type 별칭	설명
객체 타입 기술	✓ (선호)	✓ (지원)	둘 다 지원, 본 도구는 interface 생성
선언 병합	✓ (동명 자동 병합)	✗ (중복 선언은 오류)	interface는 점진적 확장 지원, type은 불가
implements/extends	✓ (클래스가 implements 가능)	△ (객체 type만 implements 가능)	interface는 OOP 시나리오에서 더 자연스러움
유니온 타입 (A \| B)	✗	✓	type이 유니온 타입 기술에 더 간결
교차 타입 (A & B)	✗	✓	type이 교차 타입 기술에 더 간결
함수 타입	△ (call signature 필요)	✓ (직접 정의 가능)	type이 함수 타입 정의에 더 직관적
성능 (대량 타입 시)	약간 빠름	약간 느림	interface는 컴파일 시 증분 병합이 빠름
본 도구 선택	✓ 일관 사용	✗	본 도구는 객체 타입에 집중, interface가 최적

선택적 필드와 읽기 전용 필드의 생성 규칙

본 도구의 두 스위치 옵션이 생성 코드에 미치는 영향과 최적 사용 시나리오:

옵션	트리거 조건	생성 구문	최적 사용 시나리오
선택적 필드 (?): 끄기	(기본값)	`name: string`	모든 필드 필수, 타입 엄격
선택적 필드 (?): 켜기	value === null \|\| value === undefined	`name?: string`	선택적 필드, 생략 가능한 데이터
읽기 전용 필드 (readonly): 끄기	(기본값)	`name: string`	범용 타입, 필드 쓰기 가능
읽기 전용 필드 (readonly): 켜기	모든 필드를 일관 처리	`readonly name: string`	불변 상태, 설정, DTO, API 응답
둘 다 켜기	둘 다 만족	`readonly name?: string`	API 응답 스냅샷, 선택적 설정

Privacy & Security

본 JSON을 TypeScript로 변환 도구의 모든 작업은 브라우저 로컬에서 완전히 실행됩니다: JSON 파싱, 타입 추론, interface 생성은 모두 브라우저 JavaScript에 의해 클라이언트 측에서 실행되며, 네트워크를 통해 JSON 내용, 업로드된 파일, 생성된 코드는 어떤 서버에도 전송되지 않습니다. 파일 업로드는 브라우저 네이티브 FileReader API를 사용하여 직접 메모리로 읽어 들이며 중간 서비스를 거치지 않습니다. Cookie 추적을 사용하지 않으며 사용자 입력이나 사용 데이터를 수집하지 않습니다. 페이지를 닫거나 새로 고침한 후 모든 입력과 출력 내용이 메모리에서 자동으로 지워집니다. API 키, 토큰, 민감한 비즈니스 데이터를 포함한 JSON 처리에 적합합니다.