Vai al contenuto
Numio

Convertitore da tipi Flow a TypeScript — Numio

Converte codice con tipi Flow in TypeScript tramite flow-to-ts di Khan Academy. I tipi maybe (?T) diventano T | null | undefined, gli oggetti esatti diventano normali tipi oggetto e $ReadOnlyArray diventa ReadonlyArray.

Stai eseguendo la migrazione di una codebase Flow a TypeScript file per file e desideri un primo passaggio per ciascun modulo.

Flow

TypeScript

Quando usarlo

  • Stai eseguendo la migrazione di una codebase Flow a TypeScript file per file e desideri un primo passaggio per ciascun modulo.
  • Uno snippet tipizzato Flow di un vecchio progetto React deve essere incollato in una codebase TypeScript.

Come si usa

  1. Incolla il codice Flow nel pannello Flow.
  2. Il codice viene convertito con flow-to-ts in un Web Worker locale del browser; non ci sono impostazioni.
  3. Copia TypeScript, salvalo come .ts o .tsx ed esegui tsc per correggere ciò che la conversione non è riuscita a tradurre.

Flusso

// @flow
import type { Node } from 'react';

export type User = {|
  +id: number,
  name: ?string,
  roles: $ReadOnlyArray<string>,
|};

export function greet(user: User): string {
  return `Hi ${user.name ?? 'guest'}`;
}

export const render = (title: string): Node => null;

TypeScript

import type { Node } from "react"
export type User = {
  readonly id: number
  name: string | null | undefined
  roles: ReadonlyArray<string>
}
export function greet(user: User): string {
  return `Hi ${user.name ?? "guest"}`
}
export const render = (title: string): Node => null

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.

I tipi oggetto esatti {| |} perdono la loro esattezza, perché TypeScript non ha oggetti esatti; +prop diventa readonly.

I tipi di utilità di flusso come $ReadOnly e $Keys vengono mantenuti per nome e importati dal pacchetto utility-types npm, che è quindi necessario installare.

Il pragma // @flow viene rimosso e il codice viene ristampato. Gli import di tipi React, come Node, restano come sono scritti; rinominali quindi manualmente, ad esempio ReactNode.

FAQ

Come vengono forse convertiti i tipi?

name: ?string diventa name: string | null | undefined. Una proprietà facoltativa (name?: T) resta facoltativa.

Converte i file JSX?

Sì. JSX viene mantenuto, quindi salva il risultato come .tsx.

Ottengo un .d.ts invece del codice completo?

Non in questa pagina. Flow in dichiarazioni TypeScript usa lo stesso convertitore locale con declarationOnly per generare solo le dichiarazioni.

Specifiche e riferimenti