Da Flow a dichiarazioni TypeScript — Numio

Quando usarlo

• Un pacchetto è scritto in Flow e desideri spedire tipi TypeScript per i consumatori TypeScript senza migrare l'origine.
• Si desidera confrontare lo API esportato di un modulo di flusso con il suo equivalente TypeScript.

Come si usa

1. Incolla un modulo Flow nel pannello Flow.
2. Un Web Worker locale converte il codice in TypeScript con declarationOnly attivo e genera le dichiarazioni.
3. Copia il risultato dal pannello Dichiarazioni TypeScript in un file index.d.ts accanto al punto di ingresso del pacchetto.

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

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
}

Dettagli e limiti

La conversione avviene localmente in un Web Worker del browser; l’input non viene caricato su un server. Al primo utilizzo il browser scarica il modulo di conversione necessario.

Vengono caricate le librerie ES2020 e DOM di TypeScript, quindi Array<T>, Promise, Date e $ReadOnlyArray (convertito in ReadonlyArray) compaiono nelle dichiarazioni così come sono scritti.

I tipi maybe diventano T | null | undefined, come Label nell’esempio.

Viene compilato un solo file; i tipi importati non vengono risolti.

FAQ

Strumenti correlati

Specifiche e riferimenti

• TypeScript Manuale: file di dichiarazione
• flusso a-ts su GitHub