Aller au contenu
Numio

Convertir TypeScript en types Flow — Numio

Convertit des déclarations de types TypeScript en types Flow avec flowgen. readonly devient le marqueur de variance +, les fonctions et classes exportées deviennent "declare export", et les enums deviennent des objets exacts en lecture seule.

Vous publiez une bibliothèque TypeScript et voulez aussi fournir des définitions Flow aux utilisateurs de Flow.

TypeScript

Flow

Quand l’utiliser

  • Vous publiez une bibliothèque TypeScript et voulez aussi fournir des définitions Flow aux utilisateurs de Flow.
  • Une base de code Flow dépend d’un paquet qui n’a que des types .d.ts et vous avez besoin d’une libdef comme point de départ.

Mode d’emploi

  1. Collez des déclarations TypeScript (interfaces, types, instructions declare, enums) ou un module avec du code d’implémentation dans le panneau TypeScript.
  2. Le code est envoyé à /api/typescript-to-flow. Le code comportant des corps de fonction ou des initialiseurs est d’abord réduit à un .d.ts par le compilateur TypeScript ; flowgen le convertit ensuite et le met en forme.
  3. Copiez la sortie Flow, placez-la dans votre dossier flow-typed ou dans un fichier .js.flow, puis lancez flow pour la vérifier.

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

Détails et limites

La page envoie votre saisie à une route serveur (/api/typescript-to-flow) 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.

Le code d’implémentation est d’abord compilé en déclarations ; seule son API typée subsiste : les corps disparaissent, les types de retour inférés sont renseignés et les valeurs non exportées qu’aucun export n’utilise sont supprimées.

Les alias de type objet deviennent des objets Flow inexacts terminés par "..." ; les interfaces restent des interfaces.

Les enums numériques deviennent un objet exact déclaré de valeurs littérales en lecture seule, par exemple +Small: 0.

FAQ

Comment les propriétés readonly sont-elles converties ?

readonly disabled: boolean devient +disabled: boolean, le marqueur de propriété covariante (lecture seule) de Flow.

Puis-je coller un fichier .ts complet avec des implémentations ?

Oui. Le serveur émet d’abord les déclarations, si bien qu’une fonction fléchée non typée reçoit son type inféré, par exemple declare export var greet: (u: User) => string. Les erreurs de syntaxe sont signalées au lieu d’être converties.

Les enums TypeScript sont-ils pris en charge ?

Oui, sous la forme declare export var Name: {| +Member: value |}. Aucun enum Flow n’est généré.

Spécifications et références