Aller au contenu
Numio

Convertir Flow en déclarations TypeScript — Numio

Convertit du code Flow en TypeScript avec flow-to-ts, puis n’émet qu’un fichier de déclarations .d.ts avec le compilateur TypeScript. Les corps sont supprimés, et les paramètres avec valeur par défaut deviennent optionnels.

Un paquet est écrit en Flow et vous voulez fournir des typages TypeScript aux utilisateurs de TypeScript sans migrer le source.

Flow

TypeScript Declarations

Quand l’utiliser

  • Un paquet est écrit en Flow et vous voulez fournir des typages TypeScript aux utilisateurs de TypeScript sans migrer le source.
  • Vous voulez comparer l’API exportée d’un module Flow avec son équivalent TypeScript.

Mode d’emploi

  1. Collez un module Flow dans le panneau Flow.
  2. Il est envoyé à /api/flow-to-typescript avec declarationOnly activé ; le serveur le convertit en TypeScript et émet les déclarations.
  3. Copiez le résultat du panneau TypeScript Declarations dans un index.d.ts à côté du point d’entrée de votre paquet.

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

Déclarations 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
}

Détails et limites

La page envoie votre saisie à une route serveur (/api/flow-to-typescript) pour la conversion ; elle n’est pas traitée uniquement dans le navigateur. Par défaut, les routes API de Next.js acceptent des corps de requête jusqu’à 1 Mo.

Les fichiers de bibliothèque ES2020 et DOM de TypeScript sont chargés, si bien que Array<T>, Promise, Date et $ReadOnlyArray (converti en ReadonlyArray) apparaissent dans les déclarations tels qu’écrits.

Les maybe types deviennent T | null | undefined, comme pour Label dans l’exemple.

Un seul fichier est compilé ; les types importés ne sont pas résolus.

FAQ

Les fonctions async et les types de retour Promise sont-ils conservés ?

Oui. export async function load(id: number): Promise<Tag> devient export declare function load(id: number): Promise<Tag>.

Que deviennent les valeurs par défaut des paramètres ?

Elles sont supprimées et le paramètre devient optionnel : b: Point = ORIGIN devient b?: Point.

Les alias de type sont-ils conservés ?

Oui. Les alias de type exportés apparaissent sous leur forme TypeScript convertie. La page formate le résultat avec Prettier : indentation de deux espaces et pas de points-virgules.

Spécifications et références