Saltar al contenido
Numio

Convertir TypeScript a tipos de Flow — Numio

Convierte declaraciones de tipos de TypeScript en tipos de Flow con flowgen. readonly pasa al marcador de varianza +, las funciones y clases exportadas pasan a "declare export", y los enums pasan a objetos exactos de solo lectura.

Publicas una biblioteca TypeScript y también quieres distribuir definiciones de Flow para los consumidores que usan Flow.

TypeScript

Flow

Cuándo usarla

  • Publicas una biblioteca TypeScript y también quieres distribuir definiciones de Flow para los consumidores que usan Flow.
  • Una base de código Flow depende de un paquete que solo tiene tipos .d.ts y necesitas una libdef como punto de partida.

Cómo usarla

  1. Pega declaraciones de TypeScript (interfaces, types, sentencias declare, enums) o un módulo con código de implementación en el panel TypeScript.
  2. El código se envía a /api/typescript-to-flow. El código con cuerpos de función o inicializadores se reduce primero a un .d.ts con el compilador de TypeScript; después flowgen lo convierte y lo formatea.
  3. Copia la salida Flow, ponla en tu carpeta flow-typed o en un archivo .js.flow y ejecuta flow para comprobarla.

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

Detalles y limitaciones

La página envía tu entrada a una ruta del servidor (/api/typescript-to-flow) 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.

El código de implementación se compila primero a declaraciones, así que solo queda su API tipada: los cuerpos desaparecen, se rellenan los tipos de retorno inferidos y se descartan los valores no exportados que ninguna exportación usa.

Los alias de tipo de objeto pasan a objetos Flow inexactos que terminan en "..."; las interfaces siguen siendo interfaces.

Los enums numéricos pasan a un objeto exacto declarado con valores literales de solo lectura, por ejemplo +Small: 0.

FAQ

¿Cómo se convierten las propiedades readonly?

readonly disabled: boolean pasa a +disabled: boolean, el marcador de propiedad covariante (de solo lectura) de Flow.

¿Puedo pegar un archivo .ts completo con implementaciones?

Sí. El servidor emite primero las declaraciones, así que una función flecha sin tipos recibe su tipo inferido, por ejemplo declare export var greet: (u: User) => string. Los errores de sintaxis se notifican en lugar de convertirse.

¿Se admiten los enums de TypeScript?

Sí, como declare export var Name: {| +Member: value |}. No se generan enums de Flow.

Especificaciones y referencias