Aller au contenu
Numio

Convertir les types Flow en TypeScript — Numio

Convertit du code typé avec Flow en TypeScript avec flow-to-ts de Khan Academy. Les maybe types (?T) deviennent T | null | undefined, les objets exacts deviennent des types objet ordinaires et $ReadOnlyArray devient ReadonlyArray.

Vous migrez une base de code Flow vers TypeScript fichier par fichier et voulez une première passe pour chaque module.

Flow

TypeScript

Quand l’utiliser

  • Vous migrez une base de code Flow vers TypeScript fichier par fichier et voulez une première passe pour chaque module.
  • Un extrait typé avec Flow provenant d’un ancien projet React doit être collé dans une base de code TypeScript.

Mode d’emploi

  1. Collez du code Flow dans le panneau Flow.
  2. Il est envoyé à /api/flow-to-typescript et converti avec flow-to-ts sur le serveur ; il n’y a aucun paramètre.
  3. Copiez le TypeScript, enregistrez-le en .ts ou .tsx, puis lancez tsc pour corriger ce que la conversion n’a pas pu traduire.

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

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 types objet exacts {| |} perdent leur exactitude, car TypeScript n’a pas d’objets exacts, et +prop devient readonly.

Les types utilitaires Flow comme $ReadOnly et $Keys sont conservés par leur nom et importés depuis le paquet npm utility-types, que vous devez alors installer.

Le pragma // @flow est supprimé et le code est réimprimé. Les imports de types React comme Node sont conservés tels qu’écrits ; renommez-les vous-même (par ex. ReactNode).

FAQ

Comment les maybe types sont-ils convertis ?

name: ?string devient name: string | null | undefined. Une propriété optionnelle (name?: T) reste optionnelle.

Convertit-il les fichiers JSX ?

Oui. Le JSX est conservé ; enregistrez donc le résultat en .tsx.

Est-ce que j’obtiens un .d.ts au lieu du code complet ?

Pas sur cette page. Flow to TypeScript Declaration utilise la même route serveur avec declarationOnly pour n’émettre que des déclarations.

Spécifications et références