Saltar al contenido
Numio

Generar declaraciones TypeScript desde Flow — Numio

Convierte código Flow a TypeScript con flow-to-ts y después emite solo un archivo de declaraciones .d.ts con el compilador de TypeScript. Se eliminan los cuerpos, y los parámetros con valores por defecto pasan a ser opcionales.

Un paquete está escrito en Flow y quieres distribuir tipos de TypeScript para los consumidores de TypeScript sin migrar el código fuente.

Flow

TypeScript Declarations

Cuándo usarla

  • Un paquete está escrito en Flow y quieres distribuir tipos de TypeScript para los consumidores de TypeScript sin migrar el código fuente.
  • Quieres comparar la API exportada de un módulo Flow con su equivalente en TypeScript.

Cómo usarla

  1. Pega un módulo Flow en el panel Flow.
  2. Se envía a /api/flow-to-typescript con declarationOnly activado; el servidor lo convierte a TypeScript y emite las declaraciones.
  3. Copia el resultado del panel TypeScript Declarations en un index.d.ts junto al punto de entrada de tu paquete.

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

Declaraciones de 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
}

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.

Se cargan los archivos de biblioteca ES2020 y DOM de TypeScript, así que Array<T>, Promise, Date y $ReadOnlyArray (convertido a ReadonlyArray) aparecen en las declaraciones tal como están escritos.

Los maybe types pasan a T | null | undefined, como ocurre con Label en el ejemplo.

Solo se compila un archivo; los tipos importados no se resuelven.

FAQ

¿Se conservan las funciones async y los tipos de retorno Promise?

Sí. export async function load(id: number): Promise<Tag> pasa a export declare function load(id: number): Promise<Tag>.

¿Qué pasa con los valores por defecto de los parámetros?

Se eliminan y el parámetro pasa a ser opcional: b: Point = ORIGIN pasa a b?: Point.

¿Se conservan los alias de tipo?

Sí. Los alias de tipo exportados aparecen en su forma TypeScript convertida. La página formatea el resultado con Prettier, así que usa sangría de dos espacios y no lleva punto y coma.

Especificaciones y referencias