JSON에서 TypeScript로
JSON 샘플을 붙여넣으면 그 구조에 맞는 TypeScript 인터페이스를 도구가 추론합니다. 필드 타입은 관찰된 값(string, number, boolean, Array<T>)에 따라 결정되며, 중첩 객체는 각각 고유한 이름의 인터페이스를 갖습니다. null이거나 누락된 것으로 관찰된 필드는 선호하는 스타일에 따라 선택적(?) 또는 null 허용(| null)으로 지정됩니다.
JSON을 TypeScript로 변환하는 방법
-
1
JSON 붙여넣기
샘플 하나만으로도 충분하지만, 여러 샘플을 제공하면 null 허용 여부와 유니온 타입의 추론 정확도가 향상됩니다.
-
2
출력 스타일 선택
`interface`(기본값), `type` 별칭, 또는 모든 필드가 `readonly`로 표시된 읽기 전용 인터페이스.
-
3
선택적/null 전략 선택
필드를 `?`(없을 수 있음) 또는 `| null`(항상 존재하지만 null일 수 있음) 중 하나로 지정합니다.
-
4
타입 복사
`.ts` 파일에 붙여넣으면 API 응답에 타입 안전하게 접근할 수 있습니다.
예시
입력:
{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }
출력:
interface User {
id: number;
name: string;
age: number | null;
tags: string[];
address: Address;
}
interface Address {
city: string;
}
타입 매핑
| JSON | TypeScript |
|---|---|
| 문자열 | string |
| 정수 / 소수 | number |
| 불리언 | boolean |
| null 단독 | null |
| null + T | T | null (또는 T?) |
| T의 배열 | T[] |
| 혼합 배열 | (T1 | T2)[] |
| 객체 | 이름이 지정된 중첩 인터페이스 |
| 빈 배열 | unknown[] (추론 불가) |
선택적 필드와 null 허용 필드
foo?: string, 해당 필드가 객체에 없을 수 있습니다.undefined검사가 필요합니다.foo: string | null, 해당 필드는 항상 존재하지만 명시적으로 null일 수 있습니다.foo?: string | null, 없거나 null일 수 있습니다.
JSON 자체에는 undefined가 없지만, 필드 부재를 표현하는 방식은 API마다 다릅니다. 사용하는 API의 시맨틱에 맞추세요.
- REST API는 일반적으로 누락된 필드를 생략합니다 ->
?:. - GraphQL은 요청된 모든 필드를 항상 반환합니다 ->
| null. - 일부 SDK는 상황에 따라 두 방식을 함께 사용합니다.
유니온 타입 vs 리터럴 타입
여러 샘플에 걸쳐 동일한 문자열 필드가 소수의 값만 갖는 경우("status": "pending", "active", "archived"), 도구는 문자열 리터럴 유니온을 출력할 수 있습니다.
status: "pending" | "active" | "archived";
이 동작이 필요하면 “문자열 리터럴 유니온 추론”을 활성화하세요.
흔한 실수
- 단일 샘플로 추론하기. 모든 필드가 필수가 되고 null 허용 여부를 관찰할 수 없습니다. 더 정확한 타입을 얻으려면 다양한 샘플 5~10개를 제공하세요.
- 빈 배열.
"tags": []는 타입 정보를 제공하지 않아 생성기가unknown[]을 출력합니다. 요소가 최소 하나 이상 포함된 샘플을 제공하세요. - 혼합 타입 배열.
[1, "two", true]는(number | string | boolean)[]을 생성합니다. 보통 이는 JSON에 타입을 지정하기보다 구조를 다시 설계해야 함을 의미합니다. - 숫자 문자열 키. JSON
{"1": "a", "2": "b"}는 TypeScript에서 여전히 객체(Record<string, string>)이며 배열이 아닙니다. 생성기는 이를 올바르게 처리합니다.
자주 묻는 질문
API에 맞추세요. null 필드를 생략하는 REST API에는 ?:가 적합합니다. 선택된 모든 필드를 항상 반환하는 GraphQL에는 | null이 적합합니다. 확신이 서지 않을 때는 필수 구문의 T | null이 더 엄격하며 컴파일 시점에 더 많은 버그를 잡아냅니다.
네. 이 기능을 활성화하고 여러 샘플을 제공하면, 샘플 전반에서 서로 다른 문자열 값이 2~5개 관찰된 필드는 리터럴 유니온으로 출력됩니다. 이 기준을 넘으면 string으로 되돌아갑니다.
대부분의 경우 interface가 좋습니다. 확장에 열려 있고 TypeScript가 더 잘 최적화합니다. type 별칭은 유니온, 인터섹션, 튜플, 매핑 타입에 유용합니다. JSON에서 파생된 타입에는 둘 다 사용할 수 있으니 프로젝트 관례를 따르세요.
네. 각 중첩 객체는 자체 인터페이스가 되며, 이름은 키에서 파생됩니다(user.address -> Address). 매우 깊거나 반복적인 구조라면 JSON Schema와 전용 schema-to-TS 생성기 사용을 고려하세요.
관련 도구
ASCII 표 참조
NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.
HTML 문자 참조
HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.
키보드 단축키 참고표
macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.
보색 찾기
어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.
이메일 검증기
이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.
EditorConfig 생성기
들여쓰기 스타일과 크기, 줄 끝, 문자 인코딩, 공백 규칙을 지정해 .editorconfig 파일을 생성하고 IDE와 편집기 전반의 형식을 일관되게 유지하세요.
이 도구는 다른 언어로도 제공됩니다
- JSON ke TypeScript [ID]
- JSON sang TypeScript [VI]
- JSON a TypeScript [ES]
- JSON vers TypeScript [FR]
- JSON naar TypeScript [NL]
- JSON till TypeScript [SV]
- JSONからTypeScriptへ [JA]
- JSON เป็น TypeScript [TH]
- تحويل JSON إلى TypeScript [AR]
- JSON zu TypeScript [DE]
- JSON do TypeScript [PL]
- JSON para TypeScript [PT]
- JSON a TypeScript [IT]
- JSON в TypeScript [RU]
- JSON'dan TypeScript'e [TR]
- JSON 转 TypeScript [ZH]
- JSON to TypeScript [EN]