Naar de inhoud
Numio

Flow naar TypeScript-declaraties — Numio

Converteert Flow-code naar TypeScript met flow-to-ts en verzendt vervolgens alleen een .d.ts-declaratiebestand met de TypeScript-compiler. De hoofdteksten worden verwijderd en parameters met standaardwaarden worden optioneel.

Er is een pakket geschreven in Flow en u wilt TypeScript-typeringen verzenden voor TypeScript-consumenten zonder de bron te migreren.

Flow

TypeScript Declarations

Wanneer gebruik je dit?

  • Er is een pakket geschreven in Flow en u wilt TypeScript-typeringen verzenden voor TypeScript-consumenten zonder de bron te migreren.
  • U wilt de geëxporteerde API van een Flow-module vergelijken met zijn TypeScript-equivalent.

Hoe werkt het

  1. Plak een Flow-module in het Flow-paneel.
  2. De Flow-code wordt lokaal in je browser naar TypeScript omgezet, waarna alleen de declaraties worden gegenereerd.
  3. Kopieer het resultaat van het paneel TypeScript-declaraties naar een index.d.ts naast het ingangspunt van uw pakket.

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-aangiften (.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 en beperkingen

De conversie vindt lokaal plaats in een Web Worker in je browser. Je invoer wordt niet naar een conversieserver verstuurd. De benodigde bibliotheken worden in de browser geladen.

De ES2020- en DOM-bibliotheekbestanden van TypeScript worden geladen, zodat Array<T>, Promise, Date en $ReadOnlyArray (geconverteerd naar ReadonlyArray) in de declaraties verschijnen zoals geschreven.

Misschien worden typen T | nul | ongedefinieerd, zoals bij Label in het voorbeeld.

Er wordt slechts één bestand samengesteld; geïmporteerde typen worden niet opgelost.

FAQ

Worden asynchrone functies en Promise-retourtypen behouden?

Ja. export async functie load(id: nummer): Promise<Tag> wordt export declareren functie load(id: nummer): Promise<Tag>.

Wat gebeurt er met standaardparameterwaarden?

Ze worden verwijderd en de parameter wordt optioneel: b: Punt = ORIGIN wordt b?: Punt.

Worden typealiassen bewaard?

Ja. Geëxporteerde typealiassen verschijnen in de geconverteerde TypeScript-vorm. De pagina formatteert het resultaat met Prettier, dus er wordt gebruik gemaakt van inspringing met twee spaties en geen puntkomma's.

Specificaties en referenties