Pular para o conteúdo
Numio

Converter Flow em declarações TypeScript — Numio

Converte código Flow para TypeScript com flow-to-ts e depois emite só um arquivo de declarações .d.ts com o compilador TypeScript. Os corpos são removidos, e parâmetros com valores padrão viram opcionais.

Um pacote é escrito em Flow e você quer distribuir tipagens TypeScript para consumidores TypeScript sem migrar o código-fonte.

Flow

TypeScript Declarations

Quando usar

  • Um pacote é escrito em Flow e você quer distribuir tipagens TypeScript para consumidores TypeScript sem migrar o código-fonte.
  • Você quer comparar a API exportada de um módulo Flow com seu equivalente em TypeScript.

Como usar

  1. Cole um módulo Flow no painel Flow.
  2. Ele é enviado para /api/flow-to-typescript com declarationOnly definido; o servidor converte para TypeScript e emite as declarações.
  3. Copie o resultado do painel TypeScript Declarations para um index.d.ts ao lado do ponto de entrada do seu pacote.

Flow

// @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); }
}

Declarações TypeScript (.d.ts)

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
}

Detalhes e limitações

A página envia sua entrada para uma rota do servidor (/api/flow-to-typescript) para conversão; ela não é processada apenas no navegador. As rotas de API do Next.js aceitam por padrão corpos de requisição de até 1 MB.

Os arquivos de biblioteca ES2020 e DOM do TypeScript são carregados, então Array<T>, Promise, Date e $ReadOnlyArray (convertido para ReadonlyArray) aparecem nas declarações como escritos.

Maybe types viram T | null | undefined, como acontece com Label no exemplo.

Só um arquivo é compilado; tipos importados não são resolvidos.

FAQ

Funções async e tipos de retorno Promise são mantidos?

Sim. export async function load(id: number): Promise<Tag> vira export declare function load(id: number): Promise<Tag>.

O que acontece com os valores padrão dos parâmetros?

Eles são removidos e o parâmetro vira opcional: b: Point = ORIGIN vira b?: Point.

Os aliases de tipo são mantidos?

Sim. Aliases de tipo exportados aparecem na forma TypeScript convertida. A página formata o resultado com Prettier, então ele usa indentação de dois espaços e não tem ponto e vírgula.

Especificações e referências