JSON에서 TypeScript 타입을 생성하는 방법
- JSON 예시를 붙여넣습니다. 배열에 항목이 많을수록 선택적 필드와 유니언 타입을 더 정확하게 감지합니다.
- 루트 타입 이름을 정하고
interface또는type을 선택한 뒤,export와readonly사용 여부를 정합니다. - TypeScript 코드를 프로젝트에 복사하거나
.ts파일로 다운로드합니다.
JSON에서 TypeScript 타입을 추론하는 방식
| JSON | TypeScript |
|---|---|
"Ada" | string |
42, 3.14 | number |
true | boolean |
다른 값과 함께 쓰인 null | string | null 같은 유니언 타입 |
"address": {"city": "Paris"} | 별도의 interface Address |
"users": [{"id": 1}] | User[] – 항목 이름은 단수형으로 변환 |
| 일부 배열 항목에 없는 키 | 선택적 속성 key?: |
[1, "a"] | (string | number)[] |
[] | unknown[] |
{} | Record<string, unknown> |
변환 예시
예를 들어 JSON {"id": 1, "name": "Ada", "tags": ["admin"], "manager": null} 입력은 다음과 같이 변환됩니다.
export interface Root { id: number; name: string; tags: string[]; manager: null; }
Root를 User나 ApiResponse처럼 의미 있는 이름으로 바꾸세요. 청구지 주소와 배송지 주소처럼 모양이 완전히 같은 중첩 객체는 하나의 인터페이스를 공유하고, 유효한 식별자가 아닌 키는 "first-name": string처럼 따옴표로 감쌉니다.
자주 묻는 질문
interface와 type 중 무엇을 선택해야 하나요?
객체 형태를 표현할 때는 둘 다 똑같이 동작합니다. interface는 확장과 병합이 가능하고, 타입 별칭(type alias)은 유니언 타입도 표현할 수 있습니다. 많은 팀이 객체에는 interface를 사용하지만, 코드베이스의 스타일을 따르는 것이 좋습니다.
선택적 필드는 어떻게 감지하나요?
같은 배열 안의 객체를 병합합니다. 일부 객체에 없는 키는 선택적 속성(key?:)이 되고, 값의 타입이 서로 다른 키는 유니언 타입이 됩니다.
런타임에 데이터를 검증해 주나요?
아니요. TypeScript 타입은 코드가 실행될 때 사라집니다. 들어오는 데이터를 검사하려면 JSON 스키마 생성기로 같은 예시에서 JSON 스키마를 만들고 스키마 라이브러리로 검증하세요.
JSON이 서버로 전송되나요?
아니요. 타입은 브라우저에서 생성되므로 비공개 API 응답도 안심하고 붙여넣을 수 있습니다.