Saltar al contenido
Numio

Convertir tipos de Flow a TypeScript — Numio

Convierte código tipado con Flow a TypeScript con flow-to-ts de Khan Academy. Los maybe types (?T) pasan a T | null | undefined, los objetos exactos pasan a tipos de objeto normales y $ReadOnlyArray pasa a ReadonlyArray.

Estás migrando una base de código Flow a TypeScript archivo por archivo y quieres una primera pasada de cada módulo.

Flow

TypeScript

Cuándo usarla

  • Estás migrando una base de código Flow a TypeScript archivo por archivo y quieres una primera pasada de cada módulo.
  • Necesitas pegar un fragmento tipado con Flow de un proyecto React antiguo en una base de código TypeScript.

Cómo usarla

  1. Pega código Flow en el panel Flow.
  2. Se envía a /api/flow-to-typescript y se convierte con flow-to-ts en el servidor; no hay opciones de configuración.
  3. Copia el TypeScript, guárdalo como .ts o .tsx y ejecuta tsc para corregir lo que la conversión no pudo traducir.

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

Detalles y limitaciones

La página envía tu entrada a una ruta del servidor (/api/flow-to-typescript) para convertirla; no se procesa solo en el navegador. Las rutas API de Next.js aceptan por defecto cuerpos de solicitud de hasta 1 MB.

Los tipos de objeto exactos {| |} pierden su exactitud, porque TypeScript no tiene objetos exactos, y +prop pasa a readonly.

Los tipos utilitarios de Flow como $ReadOnly y $Keys se conservan por nombre y se importan del paquete npm utility-types, que después tendrás que instalar.

Se elimina el pragma // @flow y el código se vuelve a imprimir. Los imports de tipos de React como Node se conservan tal como están escritos, así que renómbralos tú (p. ej., ReactNode).

FAQ

¿Cómo se convierten los maybe types?

name: ?string pasa a name: string | null | undefined. Una propiedad opcional (name?: T) sigue siendo opcional.

¿Convierte archivos JSX?

Sí. El JSX se conserva, así que guarda el resultado como .tsx.

¿Obtengo un .d.ts en lugar del código completo?

No en esta página. Flow to TypeScript Declaration usa la misma ruta del servidor con declarationOnly para emitir solo declaraciones.

Especificaciones y referencias