Zum Inhalt springen
Numio

TypeScript in Flow-Typen umwandeln — Numio

Wandelt TypeScript-Typdeklarationen mit flowgen in Flow-Typen um. readonly wird zum Varianzmarker +, exportierte Funktionen und Klassen werden zu "declare export", und enums werden zu exakten, schreibgeschützten Objekten.

Du veröffentlichst eine TypeScript-Bibliothek und willst zusätzlich Flow-Definitionen für Nutzer ausliefern, die Flow verwenden.

TypeScript

Flow

Wann sie hilft

  • Du veröffentlichst eine TypeScript-Bibliothek und willst zusätzlich Flow-Definitionen für Nutzer ausliefern, die Flow verwenden.
  • Eine Flow-Codebasis hängt von einem Paket ab, das nur .d.ts-Typen hat, und du brauchst eine libdef als Ausgangspunkt.

Anwendung

  1. Füge TypeScript-Deklarationen (Interfaces, Typen, declare-Anweisungen, enums) oder ein Modul mit Implementierungscode in das Panel TypeScript ein.
  2. Der Code wird an /api/typescript-to-flow gesendet. Code mit Funktionsrümpfen oder Initialisierern wird zuerst vom TypeScript-Compiler auf eine .d.ts reduziert; danach konvertiert und verschönert flowgen ihn.
  3. Kopiere die Flow-Ausgabe, lege sie in deinen flow-typed-Ordner oder eine .js.flow-Datei und führe flow aus, um sie zu prüfen.

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

Details und Einschränkungen

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

Implementierungscode wird zuerst zu Deklarationen kompiliert, sodass nur seine typisierte API übrig bleibt: Rümpfe verschwinden, inferierte Rückgabetypen werden ergänzt, und nicht exportierte Werte, die kein Export verwendet, werden verworfen.

Objekt-Typaliase werden zu nicht exakten Flow-Objekten, die mit "..." enden; Interfaces bleiben Interfaces.

Numerische enums werden zu einem deklarierten exakten Objekt aus schreibgeschützten Literalwerten, zum Beispiel +Small: 0.

FAQ

Wie werden readonly-Properties konvertiert?

readonly disabled: boolean wird zu +disabled: boolean, dem Marker für kovariante (schreibgeschützte) Properties in Flow.

Kann ich eine vollständige .ts-Datei mit Implementierungen einfügen?

Ja. Der Server erzeugt zuerst Deklarationen, sodass eine untypisierte Pfeilfunktion ihren inferierten Typ erhält, zum Beispiel declare export var greet: (u: User) => string. Syntaxfehler werden gemeldet statt konvertiert.

Werden TypeScript-enums unterstützt?

Ja, als declare export var Name: {| +Member: value |}. Flow-enums werden nicht erzeugt.

Spezifikationen und Referenzen