Vai al contenuto
Numio

Da TypeScript a tipi Flow — Numio

Converte dichiarazioni di tipi TypeScript in tipi Flow con flowgen. readonly diventa il marcatore di varianza +, funzioni e classi esportate diventano "declare export" e gli enum diventano oggetti esatti di sola lettura.

Pubblichi una libreria TypeScript e desideri anche spedire le definizioni di Flow per i consumatori che utilizzano Flow.

TypeScript

Flow

Quando usarlo

  • Pubblichi una libreria TypeScript e desideri anche spedire le definizioni di Flow per i consumatori che utilizzano Flow.
  • Una base di codice Flow dipende da un pacchetto che ha solo tipi .d.ts ed è necessaria una libdef da cui iniziare.

Come si usa

  1. Incolla le dichiarazioni TypeScript (interfacce, tipi, istruzioni di dichiarazione, enumerazioni) o un modulo con il codice di implementazione nel pannello TypeScript.
  2. Il codice viene convertito in un Web Worker locale. Il compilatore TypeScript riduce prima a .d.ts il codice con corpi di funzione o inizializzatori; flowgen lo converte e lo formatta.
  3. Copia l'output di Flow, inseriscilo nella cartella tipizzata di flusso o in un file .js.flow ed esegui flow per controllarlo.

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 }

Flusso

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

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.

Il codice di implementazione viene prima compilato nelle dichiarazioni, quindi rimane solo il codice API digitato: i corpi scompaiono, i tipi restituiti dedotti vengono compilati e i valori non esportati che non vengono utilizzati per l'esportazione vengono eliminati.

Gli alias del tipo di oggetto diventano oggetti Flow inesatti che terminano con "..."; le interfacce restano interfacce.

Le enumerazioni numeriche diventano un oggetto esatto dichiarato di valori letterali di sola lettura, ad esempio +Small: 0.

FAQ

Come vengono convertite le proprietà readonly?

readonly disabled: boolean diventa +disabled: boolean, il marcatore di proprietà covariante (di sola lettura) di Flow.

Posso incollare un file .ts completo con le implementazioni?

Sì. Il compilatore locale genera prima le dichiarazioni, quindi una funzione freccia senza tipi riceve il tipo dedotto, ad esempio declare export var greet: (u: User) => string. Gli errori di sintassi vengono segnalati invece di essere convertiti.

Le enumerazioni TypeScript sono supportate?

Sì, come dichiara l'export var Nome: {| +Membro: valore |}. Le enumerazioni di flusso non vengono generate.

Specifiche e riferimenti