Flow를 TypeScript 타입으로 변환 — Numio

이럴 때 사용하세요

• Flow 코드베이스를 파일 단위로 TypeScript로 옮기는 중이고, 모듈마다 1차 변환본이 필요할 때.
• 오래된 React 프로젝트의 Flow 타입 코드 조각을 TypeScript 코드베이스에 붙여 넣어야 할 때.

사용 방법

1. Flow 패널에 Flow 코드를 붙여 넣습니다.
2. 코드는 /api/flow-to-typescript로 전송되어 서버에서 flow-to-ts로 변환되며, 설정은 없습니다.
3. TypeScript를 복사해 .ts나 .tsx로 저장하고, tsc를 실행해 변환되지 못한 부분을 고칩니다.

// @flow
import type { Node } from 'react';

export type User = {|
  +id: number,
  name: ?string,
  roles: $ReadOnlyArray<string>,
|};

export function greet(user: User): string {
  return `Hi ${user.name ?? 'guest'}`;
}

export const render = (title: string): Node => null;

import type { Node } from "react"
export type User = {
  readonly id: number
  name: string | null | undefined
  roles: ReadonlyArray<string>
}
export function greet(user: User): string {
  return `Hi ${user.name ?? "guest"}`
}
export const render = (title: string): Node => null

세부 정보 및 제한 사항

입력은 변환을 위해 서버 라우트(/api/flow-to-typescript)로 전송되며, 브라우저에서만 처리되지 않습니다. Next.js API 라우트는 기본적으로 최대 1 MB의 요청 본문을 받습니다.

TypeScript에는 exact 객체가 없으므로 exact 객체 타입 {| |}은 exact 속성을 잃고, +prop은 readonly가 됩니다.

$ReadOnly, $Keys 같은 Flow 유틸리티 타입은 이름이 그대로 유지되고 npm 패키지 utility-types에서 import되므로, 해당 패키지를 설치해야 합니다.

// @flow 프래그마는 제거되고 코드는 다시 출력됩니다. Node 같은 React 타입 import는 작성된 그대로 남으므로 이름(예: ReactNode)은 직접 바꾸세요.

FAQ

관련 도구

사양 및 참고 자료

• flow-to-ts on GitHub
• Flow documentation