Pular para o conteúdo
Numio

Converter TypeScript em tipos Flow — Numio

Converte declarações de tipos TypeScript em tipos Flow com flowgen. readonly vira o marcador de variância +, funções e classes exportadas viram "declare export", e enums viram objetos exatos somente leitura.

Você publica uma biblioteca TypeScript e também quer distribuir definições Flow para os consumidores que usam Flow.

TypeScript

Flow

Quando usar

  • Você publica uma biblioteca TypeScript e também quer distribuir definições Flow para os consumidores que usam Flow.
  • Uma base de código Flow depende de um pacote que só tem tipos .d.ts e você precisa de uma libdef como ponto de partida.

Como usar

  1. Cole declarações TypeScript (interfaces, types, instruções declare, enums) ou um módulo com código de implementação no painel TypeScript.
  2. O código é enviado para /api/typescript-to-flow. Código com corpos de função ou inicializadores é primeiro reduzido a um .d.ts pelo compilador TypeScript; depois o flowgen converte e formata.
  3. Copie a saída Flow, coloque-a na sua pasta flow-typed ou em um arquivo .js.flow e rode o flow para verificá-la.

TypeScript

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 }

Flow

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
|};

Detalhes e limitações

A página envia sua entrada para uma rota do servidor (/api/typescript-to-flow) 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.

O código de implementação é compilado primeiro para declarações, então só sobra sua API tipada: os corpos somem, os tipos de retorno inferidos são preenchidos e valores não exportados que nenhuma exportação usa são descartados.

Aliases de tipo de objeto viram objetos Flow inexatos terminados em "..."; interfaces continuam interfaces.

Enums numéricos viram um objeto exato declarado com valores literais somente leitura, por exemplo +Small: 0.

FAQ

Como as propriedades readonly são convertidas?

readonly disabled: boolean vira +disabled: boolean, o marcador de propriedade covariante (somente leitura) do Flow.

Posso colar um arquivo .ts completo com implementações?

Sim. O servidor emite as declarações primeiro, então uma arrow function sem tipos recebe seu tipo inferido, por exemplo declare export var greet: (u: User) => string. Erros de sintaxe são reportados em vez de convertidos.

Enums TypeScript são suportados?

Sim, como declare export var Name: {| +Member: value |}. Enums Flow não são gerados.

Especificações e referências