Flow에서 TypeScript 선언 파일 생성 — Numio

이럴 때 사용하세요

• 패키지가 Flow로 작성되어 있고, 소스를 옮기지 않고 TypeScript 사용자에게 TypeScript 타입을 제공하고 싶을 때.
• Flow 모듈이 export하는 API를 TypeScript 버전과 비교하고 싶을 때.

사용 방법

1. Flow 패널에 Flow 모듈을 붙여 넣습니다.
2. 코드는 declarationOnly를 설정한 채 /api/flow-to-typescript로 전송되고, 서버가 TypeScript로 변환한 뒤 선언을 생성합니다.
3. TypeScript Declarations 패널에서 결과를 복사해 패키지 진입점 옆의 index.d.ts에 넣습니다.

// @flow
export type Point = { x: number, y: number };
export type Shape = 'circle' | 'square';
export type Label = ?string;
export const ORIGIN: Point = { x: 0, y: 0 };

export function distance(a: Point, b: Point = ORIGIN): number {
  return Math.hypot(a.x - b.x, a.y - b.y);
}

export class Canvas {
  shapes: Shape[] = [];
  draw(shape: Shape, at?: Point): void { this.shapes.push(shape); }
}

export type Point = {
  x: number
  y: number
}
export type Shape = "circle" | "square"
export type Label = string | null | undefined
export declare const ORIGIN: Point
export declare function distance(a: Point, b?: Point): number
export declare class Canvas {
  shapes: Shape[]
  draw(shape: Shape, at?: Point): void
}

세부 정보 및 제한 사항

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

TypeScript의 ES2020 및 DOM 라이브러리 파일을 불러오므로 Array<T>, Promise, Date, $ReadOnlyArray(ReadonlyArray로 변환)가 선언에 작성된 그대로 나타납니다.

Maybe 타입은 예시의 Label처럼 T | null | undefined가 됩니다.

파일 하나만 컴파일되며, import한 타입은 해석되지 않습니다.

FAQ

관련 도구

사양 및 참고 자료

• TypeScript Handbook: Declaration Files
• flow-to-ts on GitHub