Naar de inhoud
Numio

Flow naar TypeScript-typen omzetten — Numio

Converteert Flow-getypeerde code naar TypeScript met de flow-to-ts van Khan Academy. Misschien worden typen (?T) T | nul | ongedefinieerde, exacte objecten worden gewone objecttypen, en $ReadOnlyArray wordt ReadonlyArray.

U migreert een Flow-codebase bestand voor bestand naar TypeScript en wilt voor elke module een eerste doorgang.

Flow

TypeScript

Wanneer gebruik je dit?

  • U migreert een Flow-codebase bestand voor bestand naar TypeScript en wilt voor elke module een eerste doorgang.
  • Een Flow-getypeerd fragment uit een ouder React-project moet in een TypeScript-codebase worden geplakt.

Hoe werkt het

  1. Plak de Flow-code in het Flow-paneel.
  2. flow-to-ts zet de code lokaal in je browser om naar TypeScript. Deze pagina heeft geen instellingen.
  3. Kopieer de TypeScript, sla deze op als .ts of .tsx en voer tsc uit om op te lossen wat de conversie niet kon vertalen.

Flow

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

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.

Exacte objecttypen {| |} verliezen hun nauwkeurigheid, omdat TypeScript geen exacte objecten heeft en +prop alleen-lezen wordt.

Flow-hulptypen zoals $ReadOnly en $Keys behouden hun naam en worden geïmporteerd uit het npm-pakket utility-types, dat je vervolgens zelf moet installeren.

De pragma // @flow wordt verwijderd en de code wordt opnieuw uitgeschreven. React-type-imports zoals Node blijven staan zoals je ze invoerde; hernoem ze indien nodig zelf, bijvoorbeeld naar ReactNode.

FAQ

Hoe worden misschien typen omgezet?

naam: ?string wordt naam: string | nul | ongedefinieerd. Een optionele eigenschap (naam?: T) blijft optioneel.

Converteert het JSX-bestanden?

Ja. JSX blijft behouden, dus sla het resultaat op als .tsx.

Krijg ik een .d.ts in plaats van de volledige code?

Niet op deze pagina. Flow naar TypeScript-declaraties gebruikt dezelfde lokale conversie met declarationOnly om alleen declaraties te genereren.

Specificaties en referenties