Начало работы

Flow — это типизированный диалект JavaScript. Он проверяет ваш код на ошибки с помощью статических аннотаций типов. Эти типы позволяют указать Flow, как должен работать ваш код, а Flow проверит, что он работает именно так.

function square(n: number): number {
  return n * n;
}


square("2"); // Error!

Если вы уже знакомы с TypeScript, синтаксис Flow покажется вам знакомым: он использует keyof, readonly свойства, unknown, индексированные типы доступа T[K], условные типы, отображаемые типы и проверки типов. На основе этих общих возможностей Flow добавляет собственные первоклассные языковые конструкции, например синтаксис component для React и match для сопоставления с образцом.

Установка​

Настройка компилятора​

Сначала вам потребуется настроить компилятор, который удалит типы Flow. Можно выбрать между Babel и flow-remove-types.

npm install --save-dev @babel/core @babel/cli @babel/preset-flow flow-parser

yarn add --dev @babel/core @babel/cli @babel/preset-flow flow-parser

pnpm add --save-dev @babel/core @babel/cli @babel/preset-flow flow-parser

{
  "presets": ["@babel/preset-flow"],
  "plugins": ["flow-parser/babel-plugin"]
}

./node_modules/.bin/babel src/ -d lib/

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src/ -d lib/",
    "prepublishOnly": "yarn run build"
  }
}

npm install --save-dev flow-remove-types

yarn add --dev flow-remove-types

pnpm add --save-dev flow-remove-types

./node_modules/.bin/flow-remove-types src/ -d lib/

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "flow-remove-types src/ -d lib/",
    "prepublishOnly": "yarn run build"
  }
}

Настройка Flow​

Flow лучше всего устанавливать отдельно для каждого проекта с явно заданной версией, а не глобально.

К счастью, если вы уже знакомы с npm или yarn, этот процесс покажется вам знакомым!

Добавьте devDependency в npm-пакет flow-bin​

npm install --save-dev flow-bin

yarn add --dev flow-bin

pnpm add --save-dev flow-bin

Добавьте сценарий "flow" в файл package.json​

{
  "name": "my-flow-project",
  "version": "1.0.0",
  "devDependencies": {
    "flow-bin": "^0.330.0"
  },
  "scripts": {
    "flow": "flow"
  }
}

Запустите Flow​

При первом запуске выполните:

npm run flow init

yarn flow init

pnpm run flow init

> my-flow-project@1.0.0 flow /Users/Projects/my-flow-project
> flow "init"

После первого запуска flow с init выполните:

npm run flow

yarn flow

pnpm run flow

> my-flow-project@1.0.0 flow /Users/Projects/my-flow-project
> flow

No errors!

Настройка определений библиотек​

Большинство определений библиотек не входят в комплект Flow. Ими управляет flow-typed.

В корне проекта должен находиться файл flow-typed.config.json со следующим содержимым:

{
  "env": ["node", "geometry", "html", "streams", "web-animations", "dom", "bom", "cssom", "serviceworkers", "jsx"]
}

Это указывает flow-typed, определения для каких сред необходимо включить. Список можно изменить в зависимости от целевых сред вашего проекта.

Настройка ESLint​

Если вы используете ESLint, ознакомьтесь с нашей страницей об ESLint, чтобы настроить его для поддержки Flow.

Использование​

Инициализация проекта​

Для подготовки проекта к работе с Flow достаточно выполнить одну команду:

flow init

Выполните эту команду в корневом каталоге проекта, чтобы создать пустой файл .flowconfig. В самом простом случае .flowconfig указывает фоновому процессу Flow корневой каталог, с которого следует начать проверку кода Flow на ошибки.

И всё. Теперь в вашем проекте включен Flow.

Обычно файл .flowconfig проекта оставляют пустым. Однако с помощью доступных параметров в .flowconfig можно настроить Flow множеством способов.

Запуск фонового процесса Flow​

Главное преимущество Flow — возможность быстро проверять код на ошибки. После включения Flow для проекта можно запустить процесс, который будет проверять код постепенно и очень быстро.

flow status

Эта команда сначала запускает фоновый процесс, который проверяет все файлы Flow на ошибки. Процесс продолжает работать, отслеживая изменения в коде и постепенно проверяя их на ошибки.

Также можно ввести flow, чтобы получить тот же результат, поскольку status — флаг по умолчанию для исполняемого файла flow.

Одновременно может работать только один фоновый процесс, поэтому при повторном запуске flow status будет использоваться тот же процесс.

Чтобы остановить фоновый процесс, выполните flow stop.

Подготовка кода для Flow​

Фоновый процесс Flow отслеживает все файлы Flow. Но как он определяет, какие файлы относятся к Flow и, следовательно, должны проверяться? Для этого перед любым кодом в файле JavaScript нужно поместить следующую директиву.

// @flow

Эта директива представляет собой обычный комментарий JavaScript с аннотацией @flow. Фоновый процесс Flow собирает все файлы с этой директивой и использует сведения о типах из этих файлов, чтобы обеспечить согласованность и отсутствие ошибок в коде.

Для этой директивы также можно использовать форму /* @flow */.

Файлы проекта без этой директивы фоновый процесс Flow пропускает и игнорирует их код (если только вы не вызовете flow full-check --all, что выходит за рамки базового использования).

Написание кода Flow​

Теперь, когда настройка и инициализация завершены, можно приступать к написанию кода Flow. Для каждого файла, помеченного директивой // @flow, вам доступны все возможности Flow, включая проверку типов. Вот пример файла Flow:

function foo(x: ?number): string {
  if (x) {
    return x; // Error
  }
  return "default string";
}

Обратите внимание на типы, добавленные к параметру функции, и на тип возвращаемого значения в конце объявления функции. По этому коду можно понять, что тип возвращаемого значения указан неверно, поскольку функция также может вернуть number. Однако проверять код визуально не нужно: фоновый процесс Flow обнаружит эту ошибку, когда вы проверите код.

Проверка кода​

Преимущество Flow в том, что вы почти в реальном времени получаете сведения о состоянии кода. Чтобы проверить код на ошибки, в любой момент выполните:

# equivalent to `flow status`
flow

При первом запуске будет запущен фоновый процесс Flow, который проверит все файлы Flow. Затем, по мере внесения изменений в проект, фоновый процесс будет непрерывно отслеживать код, поэтому при повторном запуске flow обновленный результат будет получен практически мгновенно.

Для приведенного выше кода команда flow выведет:

Error ------------------------------------------------------------------- example.js:4:12

Cannot return `x` because number [1] is incompatible with string [2]. [incompatible-type]

   example.js:4:12
   4|     return x; // Error
                 ^

References:
   example.js:2:18
   2| function foo(x: ?number): string {
                       ^^^^^^ [1]
   example.js:2:27
   2| function foo(x: ?number): string {
                                ^^^^^^ [2]



Found 1 error

См. также​

• Конфигурация — настройка поведения Flow с помощью .flowconfig
• Аннотации типов — все типы, которые можно использовать в Flow
• Настройка редактора — интеграция Flow в вашу IDE
• Babel — подробная инструкция по настройке Babel для удаления типов Flow
• ESLint — настройка ESLint для работы с Flow
• Flow для пользователей TypeScript — что переносится из TypeScript, чем языки отличаются и какие возможности есть в каждом из них, но отсутствуют в другом