TypeScript를 Flow 타입으로 변환 — Numio

이럴 때 사용하세요

• TypeScript 라이브러리를 배포하면서 Flow를 쓰는 사용자를 위해 Flow 정의도 함께 제공하고 싶을 때.
• Flow 코드베이스가 .d.ts 타입만 있는 패키지에 의존해서 출발점이 될 libdef가 필요할 때.

사용 방법

1. TypeScript 패널에 TypeScript 선언(interface, type, declare 문, enum)이나 구현 코드가 있는 모듈을 붙여 넣습니다.
2. 코드는 /api/typescript-to-flow로 전송됩니다. 함수 본문이나 초기화 식이 있는 코드는 먼저 TypeScript 컴파일러가 .d.ts로 줄이고, 그다음 flowgen이 변환하고 정리합니다.
3. Flow 출력을 복사해 flow-typed 폴더나 .js.flow 파일에 넣고 flow를 실행해 확인합니다.

export type Theme = "light" | "dark";

export interface ButtonProps {
  label: string;
  theme?: Theme;
  readonly disabled: boolean;
  onClick(event: MouseEvent): void;
}

export declare function render(props: ButtonProps): string;
export enum Size { Small, Large }

export type Theme = "light" | "dark";
export interface ButtonProps {
  label: string;
  theme?: Theme;
  +disabled: boolean;
  onClick(event: MouseEvent): void;
}
declare export function render(props: ButtonProps): string;

declare export var Size: {|
  +Small: 0, // 0
  +Large: 1, // 1
|};

세부 정보 및 제한 사항

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

구현 코드는 먼저 선언으로 컴파일되므로 타입이 있는 API만 남습니다. 본문은 사라지고, 추론된 반환 타입이 채워지며, export되지 않았고 어떤 export에서도 쓰이지 않는 값은 제거됩니다.

객체 타입 별칭은 "..."로 끝나는 inexact Flow 객체가 되고, interface는 interface로 남습니다.

숫자 enum은 읽기 전용 리터럴 값을 가진 exact 객체로 선언됩니다(예: +Small: 0).

FAQ

관련 도구

사양 및 참고 자료

• Flow documentation
• flowgen on GitHub