Автор оригинала: FreeCodeCamp Community Member.
Джейми Кайл
Поток – это статический тип проверки типа JavaScript. Это делает вас более продуктивными, предоставляя обратную связь, когда вы пишете код. Поток дает вам предупреждения в режиме реального времени, когда вы допустили ошибку. Если вы хотите узнать больше, проверить flowtype.org Отказ
Вместо того, чтобы пытаться построить свою совершенно отдельную экосистему, поток крючков в существующую экосистему JavaScript. Использование Babel, чтобы скомпилировать ваш код, является одним из самых простых способов интеграции потока в проект.
После двух лет тяжелой работы Вавила работает повсюду везде, просто посмотрите на страницу настройки с интеграциями для каждый инструмент сборки вы можете себе представить Отказ
Если у вас еще нет настройки Babel, вы можете использовать эту руководство для настройки. Вы также можете захотеть оформить заказ мой Справочник на Вавиле Отказ
Настройка потока на вершине Вавила
Как только у вас есть Babel, легко добраться с потоком. Сначала давайте устанавливаем два зависимости:
$ npm install --save-dev babel-plugin-transform-flow-strip-types$ npm install --global flow-bin
Плагин Babel есть для того, чтобы разделить типы потоков, чтобы ваша программа проводится. Flow-Bin Как вы используете поток из командной строки.
Далее давайте добавим плагин Babel к вашему .babelrc (или где-либо вы настраиваете Babel с вариантами):
{ presets: [...], plugins: [..., "transform-flow-strip-types"]}Наконец у нас будет работать поток init В нашем каталоге, который создаст .flowconfig Файл, который должен выглядеть так:
[ignore]
[include]
[libs]
[options]
Потрясающий! Теперь у нас будет течь все настроен в вашем проекте. Как насчет того, чтобы заставить его работать по некоторым файлам?
Получение потока работает
Поток предназначен для постепенно введенного в ваш репо. Это означает, что вам не нужно добавлять его на весь кодовую базу всех одновременно. Вместо этого вы можете добавить его файл по файлу, когда вы идете. Давайте начнем с чего-то простого, чтобы пойти.
Во-первых, попробуйте найти файл, который не имеет много сложности или внешних зависимостей. Что-то только с несколькими равными функциями, чтобы начать.
import {getNumberFromString} from "string-math-lib";export function multiplyStrings(a, b) { return getNumberFromString(a) * getNumberFromString(b);}Чтобы получить поток, работающий в этом файле, нам нужно добавить комментарий «Pragma Pragma», как это:
// @flow
import {getNumberFromString} from "string-math-lib";export function multiplyStrings(a, b) { return getNumberFromString(a) * getNumberFromString(b);}Этот маленький комментарий в верхней части файла говорит поток «Хорошо, я хочу, чтобы вы выбрали этот файл».
Теперь нам нужно на самом деле запускать поток в первый раз. Для этого вам нужно переключиться в свой терминал и запустить следующую команду:
$ flow
Эта команда запускает сервер потока и запрашивает его «статус» вашего репо, который, скорее всего, вернет некоторые ошибки для исправления.
Наиболее распространенные ошибки, которые вы увидите в новом файле:
- «Отсутствие аннотации»
- «Требуемый модуль не найден»
Эти ошибки связаны с импортом и экспортом. Причина, по которой они придумывают, является результатом того, как работает поток. Чтобы проверить типы в файлах, поток смотрит непосредственно на импорт и экспорт каждого файла.
«Отсутствие аннотации»
Вы увидите ошибку, подобную этим от потока, потому что он как-то связан с экспортом вашего файла. Кроме этого потока не будет жаловаться на недостающие типа аннотаций.
Таким образом, чтобы исправить это, мы можем начать добавлять некоторые типы в ваш файл. Для подробного руководства о том, как это сделать Смотрите руководство пользователя Отказ То, что вы должны в конечном итоге, это с некоторыми типами, как это:
import {getNumberFromString} from "string-math-lib";export function multiplyStrings(a: string, b: string): number { return getNumberFromString(a) * getNumberFromString(b);}Продолжать работать поток Как вы добавляете свои типы, чтобы увидеть эффекты того, что вы делаете. В конце концов вы должны быть в состоянии очистить все ошибки «недостающую аннотации».
«Требуемый модуль не найден»
Вы получите эти ошибки всякий раз, когда вы не можете быть разрешены с использованием нормального модуля модуля узла или если вы проигнорировали его со своим .flowconfig Отказ
Это может быть вызвано большим количеством вещей, может быть, вы используете специальный Resolver WebPack, может быть, вы забыли что-то установить. Независимо от причины, поток не должен иметь возможность найти модуль, который вы импортируете, чтобы выполнить свою работу правильно. У вас есть пара вариантов, как решить это:
- module.name_mapper – Укажите регулярное выражение, чтобы соответствовать именам модулей, а также шаблон замены.
- Создайте определение библиотеки для отсутствующего модуля
Мы сосредоточимся на создании определения библиотеки для модуля, если вам нужно использовать module.name_mapper Вы можете увидеть больше об этом В документации Отказ
Создание определения библиотеки
Наличие определений библиотеки полезно для получения типов на упаковки, которые вы установили, которые не имеют типов. Давайте установим наш String-Math-lib Библиотека из предыдущего примера.
Сначала создайте набранный поток каталог в вашем корневом каталоге (каталог, в котором вы помещаете свой .flowconfig ).
Теперь мы создадим Thready Typed/String-Math-lib.js Файл, чтобы держать наш «libdef» и начните, как это:
declare module "string-math-lib" { // ...}Далее нам просто нужно написать определения для экспорта этого модуля.
declare module "string-math-lib" { declare function getNumberFromString(str: string): number}Есть гораздо больше для определений библиотеки, поэтому вы должны прочитать через Документация и читать Этот блог пост о том, как создать высококачественные libdefs Отказ
Установка libdef из набранного потока
Поскольку Libdefs могут потреблять много времени, мы поддерживаем официальный хранилище высококачественных libdefs для всех видов пакетов, называемых набранный поток Отказ
Чтобы начать с напечатанными потоками, установите интерфейс командной строки (CLI) глобально:
$ npm install --global flow-typed
Теперь вы можете посмотреть в ThreadyS/определения/NPM Чтобы увидеть, есть ли существующий libdef для пакета, который вы хотите использовать, если вы можете установить его так:
$ flow-typed install chalk@1.0.0 --flowVersion 0.30
Это говорит о том, что вы хотите установить Мел пакет на 1.0.0 Версия, когда вы управляете потоком 0,30 Отказ
набранный поток CLI все еще находится в бета-версии, и для него много улучшений, так что ожидайте, что он много улучшится в ближайшем будущем.
Обязательно внесите свой вклад в набранные поток libdefs. Это общинные усилия, и чем больше людей, которые способствуют, тем лучше он получает.
Другие ошибки, в которые вы можете столкнуться:
Надеюсь, мы покрывали только все, что вы столкнетесь, в то время как начинаться с потоком. Однако вы также можете столкнуться с некоторыми ошибками, как это:
- Пакет внутри node_modules Ошибка отчетности
- Чтение node_modules принимает очень долгое время
- Неправильный JSON внутри node_modules вызывает ошибки
Есть несколько причин для этих типов ошибок, которые я не буду войти в этот пост (я работаю над подробной документацией для каждой отдельной ошибки). На данный момент, чтобы сохранить себя, вы можете просто [Игнорировать] Файлы, которые вызывают эти ошибки.
Это означает добавление путей файлов на ваш [Игнорировать] Раздел в вашем .flowconfig нравится:
[ignore]./node_modules/package-name/*./node_modules/other-package/tests/*.json
[include]
[libs]
[options]
Как правило, есть лучшие варианты, чем это, но это должно дать вам хорошее место для начала.
Pro Tip: проверка, чтобы увидеть, насколько хорошо вы покрыты
Если вы когда-нибудь задаетесь вопросом, насколько хорошо файл покрыт потоком, вы можете использовать следующую команду, чтобы увидеть отчет о покрытии:
$ flow coverage path/to/file.js --color
Дополнительные ресурсы и поддержка
Есть много, которые не были покрыты этой статьей. Итак, вот некоторые ссылки на ресурсы, которые могут помочь вам.
Команда потока стремится убедиться, что у каждого есть отличный опыт использования потока. Если это никогда не правда, мы хотели бы услышать от вас о том, как улучшить.
Следуйте за Джеймс Кайл на Twitter Отказ Следуйте за Поток в твиттере слишком.