Pular para o conteúdo
Numio

Converter tipos Flow em TypeScript — Numio

Converte código tipado com Flow para TypeScript com o flow-to-ts da Khan Academy. Maybe types (?T) viram T | null | undefined, objetos exatos viram tipos de objeto comuns e $ReadOnlyArray vira ReadonlyArray.

Você está migrando uma base de código Flow para TypeScript arquivo por arquivo e quer uma primeira passada de cada módulo.

Flow

TypeScript

Quando usar

  • Você está migrando uma base de código Flow para TypeScript arquivo por arquivo e quer uma primeira passada de cada módulo.
  • Um trecho tipado com Flow de um projeto React antigo precisa ser colado em uma base de código TypeScript.

Como usar

  1. Cole código Flow no painel Flow.
  2. Ele é enviado para /api/flow-to-typescript e convertido com flow-to-ts no servidor; não há configurações.
  3. Copie o TypeScript, salve como .ts ou .tsx e rode o tsc para corrigir o que a conversão não conseguiu traduzir.

Flow

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

TypeScript

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

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.

Tipos de objeto exatos {| |} perdem a exatidão, porque o TypeScript não tem objetos exatos, e +prop vira readonly.

Tipos utilitários do Flow como $ReadOnly e $Keys são mantidos pelo nome e importados do pacote npm utility-types, que você então precisa instalar.

O pragma // @flow é removido e o código é reimpresso. Imports de tipos do React como Node são mantidos como escritos, então renomeie-os você mesmo (por exemplo, ReactNode).

FAQ

Como os maybe types são convertidos?

name: ?string vira name: string | null | undefined. Uma propriedade opcional (name?: T) continua opcional.

Ele converte arquivos JSX?

Sim. O JSX é mantido, então salve o resultado como .tsx.

Recebo um .d.ts em vez do código completo?

Não nesta página. Flow to TypeScript Declaration usa a mesma rota do servidor com declarationOnly para emitir só declarações.

Especificações e referências