Советы и рекомендации для Flow - средство проверки статического типа для JavaScript

Что такое Flow?

Flow - это средство проверки статического типа для JavaScript. Это снижает вероятность появления ошибок, поскольку отслеживается Тип данных, проходящих через систему. (Подробнее о статических и динамических типах здесь).

Чтобы использовать Flow в Webpack, нужно подготовить 2 вещи.

1. Поточный бункер
2. babel-plugin-transform-flow-strip-types (для компиляции)

Flow-bin - это двоичный файл, который интерпретирует аннотации типа потока и включает проверку статического типа. Поскольку типы предназначены только для того, чтобы помочь уменьшить количество ошибок в разработке, нам нужно удалить типы, прежде чем мы отправим JavaScript в браузер. Руководство по установке предлагает установить babel-preset-flow для компиляции babel. Покопавшись в исходном коде, вы увидите, что этот пресет зависит от babel-plugin-transform-flow-strip-types. Если у вас есть babel-preset-env, настроенный в Webpack для транспиляции JSX, хорошая новость в том, что он уже справился бы с Flow за вас! babel-preset-env включает babel-plugin-transform-flow-strip-types в качестве одного из подключаемых модулей, поэтому нет необходимости устанавливать и настраивать babel-preset-flow.

babel-loader автоматически удаляет аннотацию потока, если задано значение 'env' или 'flow' указан в .babelrc. Никакой дополнительной настройки в webpack.config.js не требуется.

Что-то, что нужно быть осторожным с Flow

Flow также может интегрироваться с редакторами и включать линтинг на лету без необходимости flow check на терминале отдельно. Чтобы включить Flow-Language-Support в VScode, Flow необходимо установить глобально, хотя это не рекомендуется.

У меня возникла проблема в новом проекте, где Flow продолжал жаловаться на то, что React.ComponentType не экспортируется из React, хотя я уже установил последнюю версию Flow в проекте с помощью npm. Проект Flow включает типы React, так что это вряд ли связано с обновлением React 15 до React 16…

После долгого процесса отладки я заметил, что the flow version не последняя версия, установленная для проекта.

which flow показывает, что использованный сервер потока был из /usr/local/bin/flow, глобального потока… что должно было быть очевидным, поскольку команда flow доступна только тогда, когда поток установлен глобально. В противном случае нам нужно использовать конкретный поток проекта через node_modules/.bin/flow.

Чтобы удалить и переустановить глобальный поток

npm uninstall -g flow-bin
npm install -g flow-bin

Теперь плагин потока VSCode должен работать с новым проектом. Однако может показаться, что она не работает в старых проектах, которые все еще зависят от более старой версии Flow ... Если обновление Flow в старых проектах вызывает слишком много проблем, использование проверки node_modules/.bin/flow для конкретного проекта должно решить эту проблему на данный момент.

Примечание. Чтобы использовать двоичный поток для конкретного проекта вместо глобального потока, мы можем установить следующие настройки в VSCode.

"flow.useNPMPackagedFlow": true

Одно замечание: если что-то прямолинейное должно работать, но не работает, а документация и проблемы с stackoverflow и github не очень понятны = ›Тройная проверка версий !

Полезная техника: литье типа

Раздражающая проблема Flow, с которой я столкнулся, обычно связана с другими распространенными методами сторонней библиотеки. Например:

const hoveredDom = findDOMNode(component).getBoundingClientRect();

Первоначально Flow жалуется, что .getBoundingClientRect() невозможно вызвать потенциально null значение. После выполнения обычной проверки, чтобы убедиться, что findDOMNode(component) не равно нулю, Flow жалуется, что getBoundingClientRect() нельзя вызвать Type Text… потому что findDomNode может возвращать любой из null | Element | Text в соответствии с предварительно созданными типами Flow. В моем случае я знаю, что findDOMNode (component) наверняка вернет мне Element. Чтобы ограничить возвращаемый тип только Element, мы можем использовать Типовое преобразование через любое! Чтобы сделать тип более конкретным, мы можем использовать магический any. Тогда поток перестает жаловаться!

const componentDom = ((findDOMNode(component): any): Element);
const hoveredDom = componentDom.getBoundingClientRect();

Полезный прием: имитация типов потока

Иногда нам не нужны определения типов для используемых нами библиотек. например инструмент мониторинга производительности why-did-you-update. В этом случае, когда Flow жалуется на “required module not found” в этой библиотеке, мы можем смоделировать его, используя метод, указанный здесь.

// mocking file 
declare module 'invariant' {
  declare module.exports: any;
}

1. Создайте фиктивный файл, например, выше
2. Добавьте путь к файлу в раздел [lib] внутри .flowconfig

Другой метод - использовать библиотеку потокового типа для загрузки / генерации определений типов.

Другие полезные ресурсы

Используйте CSSModules с Flow.

//.flowconfig
[options]
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'