Przejdź do treści
Numio

Konwerter typów Flow na TypeScript — Numio

Konwertuje kod z typami Flow na TypeScript przy użyciu flow-to-ts firmy Khan Academy. Typy maybe (?T) stają się T | null | undefined, dokładne typy obiektów stają się zwykłymi typami obiektów, a $ReadOnlyArray staje się ReadonlyArray.

Dokonujesz migracji bazy kodu Flow do TypeScript plik po pliku i potrzebujesz pierwszego przejścia dla każdego modułu.

Flow

TypeScript

Kiedy go używać

  • Dokonujesz migracji bazy kodu Flow do TypeScript plik po pliku i potrzebujesz pierwszego przejścia dla każdego modułu.
  • Fragment kodu typu Flow ze starszego projektu React należy wkleić do bazy kodu TypeScript.

Jak używać

  1. Wklej kod Flow do panelu Flow.
  2. Kod jest konwertowany lokalnie w przeglądarce przez flow-to-ts; narzędzie nie ma dodatkowych ustawień.
  3. Skopiuj plik TypeScript, zapisz go jako .ts lub .tsx i uruchom tsc, aby naprawić to, czego nie udało się przetłumaczyć w wyniku konwersji.

Przepływ

// @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

Szczegóły i ograniczenia

Konwersja odbywa się lokalnie w Web Workerze w przeglądarce. Dane wejściowe nie są wysyłane na serwer konwersji. Wymagane moduły są pobierane przy pierwszym użyciu narzędzia.

Dokładne typy obiektów {| |} tracą dokładność, ponieważ TypeScript nie ma dokładnych obiektów, a +prop staje się readonly.

Typy narzędzi przepływu, takie jak $ReadOnly i $Keys, są przechowywane według nazwy i importowane z pakietu narzędzi typu npm, który należy następnie zainstalować.

Pragma // @flow zostanie usunięta, a kod zostanie ponownie wydrukowany. Importy typu React, takie jak Node, są zachowywane w formie zapisanej, więc samodzielnie zmień ich nazwę (np. ReactNode).

FAQ

W jaki sposób typy mogą być konwertowane?

name: ?string staje się name: string | null | undefined. Właściwość opcjonalna (name?: T) pozostaje opcjonalna.

Czy konwertuje pliki JSX?

Tak. JSX zostaje zachowane, więc zapisz wynik jako .tsx.

Czy zamiast pełnego kodu otrzymam plik .d.ts?

Nie na tej stronie. Narzędzie Flow do deklaracji TypeScript używa tego samego lokalnego konwertera z opcją declarationOnly, aby emitować wyłącznie deklaracje.

Specyfikacje i referencje