Flow: Статический типизатор для JavaScript от Facebook

Flow — статический типизатор для JavaScript, разработанный Facebook и распространяемый как open-source. JavaScript — динамически типизированный язык: переменные, объявленные с помощью let или var, могут менять тип данных. Можно присвоить переменной строковое значение, а затем переназначить ей число, функцию или любой другой тип без ошибок. Flow позволяет обнаруживать такие ошибки на этапе разработки.

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

Создадим проект с поддержкой Flow. Перейдём на страницу [Flow на Github](ссылку необходимо добавить сюда) и пройдём по инструкции «Getting Started». Создадим папку flow-city. Используя Yarn (или npm), инициализируем проект:

yarn init

Укажем следующие параметры:

Имя проекта: flow-city (или другое)
Версия: 1.0.0 (по умолчанию)
Описание: Sample flow project
Точка входа: src/index.js
Репозиторий: пусто
Лицензия: MIT (или private)

Откроем проект в Visual Studio Code (code .). Добавим в начало JavaScript-файла комментарий // @flow. Создадим папку src и файл index.js внутри неё. Добавим комментарий:

// @flow

Пока ничего не произойдёт, так как Flow ещё не установлен.

Установка Babel и Flow

Flow требует транспайлера, например, Babel, для обработки типов Flow и генерации совместимого JavaScript-кода. Установим Babel CLI и Flow preset:

yarn add --dev babel-cli babel-preset-flow

В package.json появятся зависимости babel-cli и babel-preset-flow. Создадим файл .babelrc:

{
  "presets": ["flow"]
}

Добавим в package.json скрипт для транспиляции:

{
  "scripts": {
    "build": "babel src -d dist"
  }
}

Этот скрипт транспилирует файлы из src в dist.

Установка и инициализация Flow

Установим Flow глобально и локально:

yarn global add flow-bin
yarn add flow-bin

Инициализируем Flow:

flow init

Это создаст файл .flowconfig с настройками Flow. Файлы без комментария // @flow Flow игнорирует.

Работа с типами

Добавим типы в index.js:

// @flow
let a: string = "ABC";
a = 10;

node src/index.js не выдаст ошибок. JavaScript не контролирует типы. yarn build, а затем node dist/index.js тоже выполнится без ошибок, так как типы Flow удалены.

Запустим проверку Flow с помощью yarn flow (или flow):

yarn flow

Получим ошибку, так как присваиваем число переменной строкового типа.

Типы данных

Flow поддерживает примитивные типы:

number
string
boolean
null
void (для undefined)

Возможны объединения типов (union types) с помощью |:

let d: string | boolean | number;

Массивы

Типизация массивов: Array<Тип> или Тип[]:

let myArray: Array<string> = ["a", "b", "c"];
let myArray2: number[] = [3, 5, 10];

Объекты

Типизация объектов:

let myObject: {price: number, title: string} = {price: 100, title: "Phone"};

Опциональные свойства:

let myObject: {price: number, title?: string} = {price: 100};

Функции

Типизация функций:

function myFunction(a: number): number {
  return a * a;
}

Расширение VS Code

Рекомендуется установить расширение Flow Language Support для VS Code — оно подсвечивает ошибки Flow в реальном времени.

Flow упрощает разработку на JavaScript, предотвращая ошибки, связанные с несоответствием типов. Он легко интегрируется с проектами React и позволяет контролировать типы данных переменных, параметров и возвращаемых значений функций.