Перейти к содержимому
Numio

Конвертировать Flow в типы TypeScript — Numio

Преобразует код с типами Flow в TypeScript с помощью flow-to-ts от Khan Academy. Maybe-типы (?T) становятся T | null | undefined, точные объекты — обычными объектными типами, а $ReadOnlyArray — ReadonlyArray.

Вы переносите кодовую базу с Flow на TypeScript файл за файлом и хотите получить первый вариант для каждого модуля.

Flow

TypeScript

Когда пригодится

  • Вы переносите кодовую базу с Flow на TypeScript файл за файлом и хотите получить первый вариант для каждого модуля.
  • Фрагмент с типами Flow из старого React-проекта нужно вставить в кодовую базу на TypeScript.

Как пользоваться

  1. Вставьте код Flow в панель Flow.
  2. Он отправляется на /api/flow-to-typescript и конвертируется на сервере с помощью flow-to-ts; настроек нет.
  3. Скопируйте TypeScript, сохраните как .ts или .tsx и запустите tsc, чтобы исправить то, что конвертация не смогла перевести.

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

Подробности и ограничения

Страница отправляет ваши данные на серверный маршрут (/api/flow-to-typescript) для конвертации; они обрабатываются не только в браузере. API-маршруты Next.js по умолчанию принимают тело запроса размером до 1 МБ.

Точные объектные типы {| |} теряют точность, потому что в TypeScript нет точных объектов, а +prop становится readonly.

Служебные типы Flow вроде $ReadOnly и $Keys сохраняют имена и импортируются из npm-пакета utility-types, который затем нужно установить.

Прагма // @flow удаляется, а код печатается заново. Импорты типов React вроде Node остаются как написаны, поэтому переименуйте их сами (например, в ReactNode).

FAQ

Как конвертируются maybe-типы?

name: ?string становится name: string | null | undefined. Необязательное свойство (name?: T) остаётся необязательным.

Конвертируются ли файлы с JSX?

Да. JSX сохраняется, поэтому сохраните результат как .tsx.

Можно ли получить .d.ts вместо полного кода?

Не на этой странице. Flow to TypeScript Declaration использует тот же серверный маршрут с declarationOnly, чтобы выводить только объявления.

Спецификации и справка