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

JSON 샘플, root 이름, interface 복사. 브라우저. nested interface, 배열 전 요소 typing, array item에 없는 key는 ?.

optional(?)과 nullable(| null) 차이?

optional은 array item 일부에 key absent. nullable은 key present + JSON null. email?: string vs note: string | null. 둘 다 실제로 보일 때만 collapse.

unknown[] 또는 Record 필드?

empty array 요소 없음 → unknown[]. empty object key 없음 → Record . populated example 붙이기.

아니요. quicktype.io는 다언어 codegen·validator. 이 페이지는 pasted payload private client-side JSON→TS, optional vs JSON null report.

아니요. 브라우저 파싱·추론. internal API, token, PII. DevTools Network 확인.

JSON 배열에서 type 생성?

예, key가 다를 때 권장. 레코드 배열 merge 한 interface. missing key optional. root Users면 User + type Users = User[]. root User면 User[].

개발자 도구

JSON to TypeScript 인터페이스 변환기

브라우저에서 JSON 샘플로 TypeScript interface 생성 - 계정·업로드·codegen CLI 없음.

샘플을 사용해 보세요

JSON 샘플

변환은 브라우저에서 실행됩니다. JSON은 이 장치를 떠나지 않습니다.

루트 이름

최상위 인터페이스의 PascalCase 이름입니다. Users라는 JSON 배열은 User 플러스 유형 Users = User[]를 내보냅니다.

다음으로 방출

인터페이스는 일반적인 API-응답 형태이며 선언 병합을 지원합니다. 유형 별칭은 공용체 및 매핑된 유형에 적합합니다.

인터페이스

선택적 키

널 입력 가능 키

노동조합

? 일부 배열 항목에 키가 누락되었음을 의미합니다. | null은 샘플에 JSON null이 포함되어 있음을 의미합니다. 그것들은 동일하지 않습니다.

추론 노트

JSON 루트는 배열입니다. 페이로드를 Root[](또는 복수형 이름을 사용한 경우 목록 별칭)로 입력합니다.

User.lastLogin은 항상 null이었습니다. null이 아닌 유형을 추론하려면 샘플에 실제 값을 추가하세요.

추론된 속성 보고서
인터페이스	열쇠	유형	플래그
Address	city	string	required
Address	postcode	string	선택적 ?
User	id	number	required
User	name	string	required
User	role	string	required
User	email	string	선택적 ?
User	address	Address	required
User	lastLogin	null	선택적 ? \| null
User	tags	string[]	선택적 ?

TypeScript

export interface Address {
  city: string;
  postcode?: string;
}

export interface User {
  id: number;
  name: string;
  role: string;
  /** Email string */
  email?: string;
  address: Address;
  lastLogin?: null;
  tags?: string[];
}

JSON to TypeScript 인터페이스 변환기 정보

브라우저에서 JSON 샘플로 TypeScript interface 생성 - 계정·업로드·codegen CLI 없음. API 응답 또는(더 나음) 레코드 배열 붙여 넣기. 중첩 객체는 named interface, 배열은 첫 요소만이 아니라 모든 요소로 typing, 동일 shape dedupe. missing key와 JSON null 분리: 일부 항목에 없으면 optional(`?`); null이면 `T | null`. `.ts` 복사·다운로드. minified payload는 JSON 미니파이어, 한 필드 검사는 JSONPath 테스터와 페어.

JSON to TypeScript 인터페이스 변환기 사용 방법

JSON 붙여 넣기(레코드 배열이 optional key 추론에 유리). optional vs nullable 샘플 로드 가능.
root 이름(User, Order, ApiResponse). interface(기본) 또는 type alias.
inference report: declaration 수, optional, nullable, union. empty array/object, all-null, quoted key 경고.
TypeScript 복사 또는 .ts 다운로드. types/에 넣고 `fetch`/TanStack Query에 root name.
서버 전송 없음. invalid JSON은 줄·열.

JSON to TypeScript 인터페이스 변환기 예시

레코드 배열 optional key

[{"sku":"A1","qty":2},{"sku":"B7","qty":1,"gift":true}] → Order with gift?: boolean. 첫 항목에 없어 optional - null 값 때문 아님.

nullable vs optional

email missing 한 row, note null 다른 row → email?: string, note: string | null. 대부분 converter는 email?: string | null 로 collapse.

nested named interfaces

{"user":{"address":{"city":"London"}}} → Address, User, Root. PascalCase 키 이름으로 Address 단독 import.

quoted key·empty container

{"content-type":"application/json","items":[],"meta":{}} → content-type quoted, items unknown[], meta Record<string, unknown>. richer sample 경고.

interface vs type alias

API response는 interface(API shape, declaration merging). union/mapped는 type alias. runtime 동일.

일반적인 사용 사례

React, Vue, Next.js fetch()/axios 응답 typing
real payload로 TanStack Query / SWR generic
webhook body(Stripe, GitHub, Slack) typed event
OpenAPI 전 fixture draft types
JSON config blob → editor-complete TypeScript

JSON to TypeScript 인터페이스 변환기에 대한 자주 묻는 질문

JSON을 TypeScript interface로 어떻게 변환하나요?: JSON 샘플, root 이름, interface 복사. 브라우저. nested interface, 배열 전 요소 typing, array item에 없는 key는 ?.
optional(?)과 nullable(| null) 차이?: optional은 array item 일부에 key absent. nullable은 key present + JSON null. email?: string vs note: string | null. 둘 다 실제로 보일 때만 collapse.
interface vs type alias?: extend/merge 파일에 interface. union, intersection, mapped는 type alias. typical API response는 둘 다 OK; 기본 interface.
unknown[] 또는 Record<string, unknown> 필드?: empty array 요소 없음 → unknown[]. empty object key 없음 → Record<string, unknown>. populated example 붙이기.
quicktype 대체?: 아니요. quicktype.io는 다언어 codegen·validator. 이 페이지는 pasted payload private client-side JSON→TS, optional vs JSON null report.
JSON 업로드?: 아니요. 브라우저 파싱·추론. internal API, token, PII. DevTools Network 확인.
JSON 배열에서 type 생성?: 예, key가 다를 때 권장. 레코드 배열 merge 한 interface. missing key optional. root Users면 User + type Users = User[]. root User면 User[].

JSON Minifier & Formatter

무료 온라인 JSON minifier·formatter. JSON minify로 payload 축소 또는 2칸 들여쓰기 beautify(pretty-print). 입력 검증 - 업로드 불필요.

JSONPath 테스터

브라우저에서 JSONPath 온라인 테스트. 필드 추출, 필터 예제, 정규화 경로 복사 - 업로드 없음.

JSON Schema 생성기

브라우저에서 무료 JSON Schema 생성기. 샘플 JSON을 붙여 넣어 타입·format을 추론하고 Draft-07 또는 2020-12 스키마를 복사. 업로드 없음.

JSON to CSV 변환기

브라우저에서 JSON↔CSV 양방향 변환. 중첩 객체 평탄화, 점 키 unflatten, NDJSON, Excel EU 프리셋, RFC 4180. 업로드 없음.