Zum Inhalt springen
Numio

TypeScript-Deklarationen aus Flow generieren — Numio

Wandelt Flow-Code mit flow-to-ts in TypeScript um und erzeugt dann mit dem TypeScript-Compiler nur eine .d.ts-Deklarationsdatei. Rümpfe werden entfernt, und Parameter mit Standardwerten werden optional.

Ein Paket ist in Flow geschrieben, und du willst TypeScript-Typings für TypeScript-Nutzer ausliefern, ohne den Quellcode zu migrieren.

Flow

TypeScript Declarations

Wann sie hilft

  • Ein Paket ist in Flow geschrieben, und du willst TypeScript-Typings für TypeScript-Nutzer ausliefern, ohne den Quellcode zu migrieren.
  • Du willst die exportierte API eines Flow-Moduls mit ihrem TypeScript-Gegenstück vergleichen.

Anwendung

  1. Füge ein Flow-Modul in das Panel Flow ein.
  2. Es wird mit gesetztem declarationOnly an /api/flow-to-typescript gesendet; der Server konvertiert es in TypeScript und erzeugt Deklarationen.
  3. Kopiere das Ergebnis aus dem Panel TypeScript Declarations in eine index.d.ts neben dem Einstiegspunkt deines Pakets.

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

TypeScript-Deklarationen (.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
}

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.

Die ES2020- und DOM-Bibliotheksdateien von TypeScript werden geladen, sodass Array<T>, Promise, Date und $ReadOnlyArray (konvertiert zu ReadonlyArray) wie geschrieben in den Deklarationen erscheinen.

Maybe-Typen werden zu T | null | undefined, wie bei Label im Beispiel.

Es wird nur eine Datei kompiliert; importierte Typen werden nicht aufgelöst.

FAQ

Bleiben async-Funktionen und Promise-Rückgabetypen erhalten?

Ja. export async function load(id: number): Promise<Tag> wird zu export declare function load(id: number): Promise<Tag>.

Was passiert mit Standardwerten von Parametern?

Sie werden entfernt, und der Parameter wird optional: b: Point = ORIGIN wird zu b?: Point.

Bleiben Typaliase erhalten?

Ja. Exportierte Typaliase erscheinen in ihrer konvertierten TypeScript-Form. Die Seite formatiert das Ergebnis mit Prettier, daher verwendet es zwei Leerzeichen Einrückung und keine Semikolons.

Spezifikationen und Referenzen