JSON TypeScript 변환기

기능

JSON TypeScript 변환기는 API 응답이나 설정 파일 같은 JSON 샘플을 읽고 이를 설명하는 TypeScript 인터페이스를 작성합니다. 모든 필드를 손으로 입력하는 대신 실제 응답 하나를 붙여 넣으면 fetch 결과, Redux 상태, 테스트 데이터에 바로 쓸 수 있는 타입을 얻을 수 있습니다.

생성기는 첫 번째 값만이 아니라 모든 값을 살펴봅니다. 숫자는 number, 텍스트는 string이 되고, 중첩된 객체는 자체 인터페이스를 가지며, 배열 요소는 합쳐지므로 일부 요소에만 있는 필드는 선택적으로, 가끔 null인 필드는 null 허용으로 표시됩니다.

사용 방법

1. JSON을 입력란에 붙여 넣고, .json 파일을 업로드하거나 예시를 클릭합니다.
2. 루트 타입 이름을 정하고 스타일을 고릅니다. interface 또는 type, null을 | null로 쓸지 선택적 필드로 쓸지, readonly 속성, 각 선언에 export를 붙일지입니다.
3. TypeScript를 복사하거나 .ts 파일로 내려받습니다.

잘못된 JSON은 문제가 있는 줄과 열과 함께 표시되므로 바로 샘플을 고칠 수 있습니다.

예시

이 JSON은:

{ "id": 7, "name": "Ada", "tags": ["admin"], "manager": { "id": 1, "email": null } }

다음 선언이 됩니다:

export interface Root {
  id: number;
  name: string;
  tags: string[];
  manager: Manager;
}

export interface Manager {
  id: number;
  email: null;
}

팁

• 샘플 하나는 그 안에 있는 내용만 보여 줍니다. 필드가 문자열일 수도 null일 수도 있다면 두 경우를 모두 넣거나, 여러 샘플을 배열에 담아 합쳐지게 하세요.
• first-name처럼 올바른 식별자가 아닌 필드 이름은 따옴표로 감싸므로 출력은 항상 컴파일됩니다.
• 결과는 출발점입니다. 샘플보다 더 많이 알고 있다면 문자열 필드를 리터럴 유니온이나 Date로 좁히세요.
• Go가 필요하신가요? JSON Go 변환기는 같은 추론으로 json 태그가 붙은 구조체를 만듭니다.