Zum Inhalt springen
Numio

Flow-Typen in TypeScript umwandeln — Numio

Wandelt Flow-typisierten Code mit flow-to-ts von Khan Academy in TypeScript um. Maybe-Typen (?T) werden zu T | null | undefined, exakte Objekte zu normalen Objekttypen und $ReadOnlyArray zu ReadonlyArray.

Du migrierst eine Flow-Codebasis Datei für Datei zu TypeScript und willst für jedes Modul einen ersten Durchgang.

Flow

TypeScript

Wann sie hilft

  • Du migrierst eine Flow-Codebasis Datei für Datei zu TypeScript und willst für jedes Modul einen ersten Durchgang.
  • Ein Flow-typisiertes Snippet aus einem älteren React-Projekt soll in eine TypeScript-Codebasis eingefügt werden.

Anwendung

  1. Füge Flow-Code in das Panel Flow ein.
  2. Er wird an /api/flow-to-typescript gesendet und auf dem Server mit flow-to-ts konvertiert; es gibt keine Einstellungen.
  3. Kopiere das TypeScript, speichere es als .ts oder .tsx und führe tsc aus, um zu korrigieren, was die Konvertierung nicht übersetzen konnte.

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

Details und Einschränkungen

Die Seite sendet deine Eingabe zur Konvertierung an eine Server-Route (/api/flow-to-typescript); sie wird nicht nur im Browser verarbeitet. Next.js-API-Routen akzeptieren standardmäßig Request-Bodys bis 1 MB.

Exakte Objekttypen {| |} verlieren ihre Exaktheit, weil TypeScript keine exakten Objekte kennt, und +prop wird zu readonly.

Flow-Utility-Typen wie $ReadOnly und $Keys bleiben mit ihrem Namen erhalten und werden aus dem npm-Paket utility-types importiert, das du dann installieren musst.

Das Pragma // @flow wird entfernt und der Code neu ausgegeben. React-Typimporte wie Node bleiben wie geschrieben; benenne sie selbst um (z. B. ReactNode).

FAQ

Wie werden Maybe-Typen konvertiert?

name: ?string wird zu name: string | null | undefined. Eine optionale Property (name?: T) bleibt optional.

Werden JSX-Dateien konvertiert?

Ja. JSX bleibt erhalten; speichere das Ergebnis daher als .tsx.

Bekomme ich statt vollständigem Code eine .d.ts?

Nicht auf dieser Seite. Flow to TypeScript Declaration verwendet dieselbe Server-Route mit declarationOnly, um nur Deklarationen auszugeben.

Spezifikationen und Referenzen