JSON을 Flow 타입으로 변환 — Numio

JSON 샘플로 // @flow로 시작하는 Flow 타입 별칭을 생성합니다. 중첩 객체마다 export된 타입이 생기고, 배열의 일부 항목에만 있는 키는 ?로 선택적으로 표시됩니다.

아직 Flow를 쓰는 React 또는 React Native 코드베이스에서 API 응답에 타입을 지정합니다.

JSON

Flow

이럴 때 사용하세요

아직 Flow를 쓰는 React 또는 React Native 코드베이스에서 API 응답에 타입을 지정합니다.
Flow로 검사하는 테스트 스위트의 픽스처나 목 데이터 타입을 작성합니다.

사용 방법

JSON 객체를 편집기에 붙여 넣습니다.
설정을 열어 prefix(기본값 I)와 Root Name(기본값 RootObject)을 바꿉니다. 루트 타입은 IRootObject가 되고 중첩 타입에도 같은 접두사가 붙습니다.
export된 타입을 // @flow 헤더를 유지한 .js 파일에 복사합니다.

JSON 입력

{
  "id": 42,
  "name": "Ada Lovelace",
  "email": null,
  "active": true,
  "score": 98.5,
  "tags": ["admin", "dev"],
  "address": { "city": "London", "postCode": "NW1" }
}

Flow 타입

// @flow
export type IRootObject = {
  id: number
  name: string
  email: null
  active: boolean
  score: number
  tags: string[]
  address: IAddress
}
export type IAddress = {
  city: string
  postCode: string
}

세부 정보 및 제한 사항

브라우저에서 json-ts 라이브러리로 실행되고 결과는 Prettier로 정리됩니다. 아무것도 업로드되지 않습니다.

Flow에는 네임스페이스가 없으므로 이 페이지는 prefix와 Root Name만 제공합니다. 출력은 항상 최상위 export type 선언입니다.

null 값은 null 타입, 빈 배열은 any[]가 됩니다. 값을 가질 수 있는 필드는 ?string 같은 maybe 타입으로 바꾸세요.

출력은 inexact 객체 타입을 쓰고 $ReadOnly도 없습니다. 프로젝트에서 필요하면 {| |}나 읽기 전용 래퍼를 추가하세요.

FAQ

선택적 필드는 어떻게 감지하나요?

객체 배열에서만 감지합니다. 일부 항목에만 있는 키가 giftWrap?: boolean처럼 선택적이 됩니다. 단일 객체에는 비교할 다른 샘플이 없으므로 최상위 키는 선택적이 되지 않습니다.

루트가 배열인 JSON도 변환할 수 있나요?

예. 루트는 export type IRootObject = IRootObjectItem[] 같은 배열 별칭이 되고, 항목 타입은 모든 요소의 키를 병합하며 빠진 키를 선택적으로 표시합니다.

타입이 섞인 배열도 처리하나요?

예. ["a", 2] 같은 평면 배열은 (string | number)[]가 됩니다. 중첩 배열은 any[]가 됩니다.

사양 및 참고 자료

Flow docs: Objects