JSON을 TypeScript로 변환

사용 방법

1. 1

   JSON 붙여넣기 또는 예제 불러오기

   JSON 객체나 배열을 붙여넣거나, 예제 메뉴에서 API 응답, 중첩 배열, 엣지 케이스를 골라 출력이 어떻게 달라지는지 확인합니다. 이름 붙은 객체 타입을 만들 수 없는 단일 값 루트는 거부됩니다.

2. 2

   루트 이름 정하기

   루트 타입 이름에 이름을 입력합니다. 영문자와 숫자가 아닌 문자는 단어 경계로 처리되어 PascalCase가 되므로 my api는 MyApi가 되고, 숫자로 시작하면 Type 접두사가 붙습니다. 다운로드 파일 이름도 같은 이름을 따라 MyApi.ts처럼 정해집니다.

3. 3

   선언 방식 고르기

   선언 방식에서 interface와 type 별칭 중 하나를 고르고, export 키워드와 readonly 속성을 켜거나 끄고, 타입을 알 수 없는 값을 unknown으로 쓸지 any로 쓸지 정합니다.

4. 4

   선언 확인

   루트가 먼저 나오고 중첩 타입이 만난 순서대로 뒤따릅니다. ? 표시와 | null 유니온이 API에 대해 알고 있는 내용과 맞는지 확인합니다.

5. 5

   복사 또는 다운로드

   코드를 .ts나 .d.ts 파일에 넣습니다. 문자열 리터럴 유니온처럼 샘플로는 알 수 없는 제약은 직접 추가합니다.

작동 원리

export interface ApiResponse {
  "user-name": string;
  tags: string[];
}

실제 예시

{"user":{"id":1,"name":"Ari"},"tags":["api","beta"]}

export interface ApiResponse {
  user: ApiResponseUser;
  tags: string[];
}

export interface ApiResponseUser {
  id: number;
  name: string;
}

{"items":[{"sku":"a","qty":2},{"sku":"b","qty":1,"note":"x"}]}

export interface ApiResponse {
  items: ApiResponseItem[];
}

export interface ApiResponseItem {
  sku: string;
  qty: number;
  note?: string;
}

{"user-name":"a","tags":["a",1,null],"empty":[],"note":null}

export interface ApiResponse {
  "user-name": string;
  tags: (string | number | null)[];
  empty: unknown[];
  note: null;
}

[{"id":1,"tag":"a"},{"id":2}]

export type Rows = Row[];

export type Row = {
  readonly id: number;
  readonly tag?: string;
};

{"a":{"b":{"x":1}},"aB":{"y":"s"}}

export interface ApiResponse {
  a: ApiResponseA;
  aB: ApiResponseAB2;
}

export interface ApiResponseA {
  b: ApiResponseAB;
}

export interface ApiResponseAB {
  x: number;
}

export interface ApiResponseAB2 {
  y: string;
}

자주 하는 실수

• 선택 속성은 객체가 둘 이상일 때만 나타납니다

  같은 위치의 일부 객체에 키가 없을 때만 선택 속성이 됩니다. 객체가 하나뿐이면 비교 대상이 없어 모든 키가 필수입니다. 레코드를 여러 개 붙여넣거나 ?를 직접 추가하세요.

• 숫자는 int와 float로 나뉘지 않습니다

  둘 다 number이며, 10.0처럼 값이 정수인 소수 표기도 마찬가지입니다. 타입 추론 중 JSON 숫자는 JavaScript number 정밀도를 사용하므로 2^53을 넘는 ID는 자릿수를 잃을 수 있습니다. 이런 ID는 자체 계약에서 string을 쓰세요.

• 샘플만으로는 타입이 완전한지 알 수 없습니다

  샘플에 null이 한 번도 없으면 | null이 붙지 않고, 모든 원소에 키가 있었다면 필수가 됩니다. 값이 고르지 않은 경우까지 담은 샘플을 쓰세요.

• ID를 키로 쓰는 객체는 넓은 인터페이스가 됩니다

  {"u1": {...}, "u2": {...}} 같은 객체는 Record<string, T>가 아니라 키마다 속성 하나로 출력됩니다. 직접 고쳐 쓰세요.

• 이름이 겹치면 숫자 접미사가 붙습니다

  충돌 뒤에는 ApiResponseAB2 같은 이름이 나옵니다. 서로 다른 인터페이스이므로 커밋하기 전에 의미 있는 이름으로 바꾸세요.

자주 묻는 질문