Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Сделайте свой код JavaScript надежным с Flow

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

JavaScript всегда был важным языком программирования, являясь единственным языком, который надежно работает в браузере. Недавние тенденции в области разработки на начальном этапе, а также основанная на Node.js разработка основаны на масштабах и сложности приложений JavaScript.

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

Что такое Flow?

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

Flow против TypeScript

Прежде чем погрузиться в подробные детали Flow, стоит сравнить его с другими альтернативами, и в частности с TypeScript. TypeScript является строгим расширением JavaScript, разработанным Microsoft. Любая программа JavaScript также является программой TypeScript.

TypeScript добавляет необязательные аннотации типов и в целом выполняет те же задачи, что и Flow. Однако есть некоторые важные отличия. TypeScript - это отдельный язык программирования, который компилируется в JavaScript, тогда как аннотации Flow должны быть удалены, чтобы вернуться к действительному JavaScript.

У TypeScript отличный инструмент и поддержка IDE. Flow идет вверх (например, JetBrains WebStorm имеет встроенную интеграцию Flow).

Важнейшее философское различие заключается в том, что Flow делает упор на надежность. В TypeScript 1.0 не были обнаружены ошибки; TypeScript 2.0 со строгими проверками нуля, измеренными до Flow в этом отношении. Но в других аспектах, таких как общие контейнеры или типизация, TypeScript является более разрешительным и пропускает различные категории ошибок (проверяется только структурная типизация, а не номинальная типизация).

TypeScript как собственный язык добавляет концепции и языковые функции, такие как классы, интерфейсы, индикаторы видимости (общедоступные, частные, только для чтения) и декораторы. Эти функции упрощают понимание и использование для людей, пришедших с основных объектно-ориентированных языков, таких как C ++, Java и C #.

Установка

Поскольку аннотации Flow не являются стандартными JavaScript, их необходимо удалить перед развертыванием приложения. Вот как установить потоки и потоки-удалить-типы через yarn: yarn add --dev flow-bin flow-remove-types

Вы можете добавить несколько скриптов в файл package.json для автоматизации процесса:

Перед публикацией кода в реестр npm вы должны запустить сценарий prepublish.

Для других параметров установки (например, с использованием npm или babel) ознакомьтесь с руководством по установке Flow.

Чтобы завершить установку, введите: yarn run flow init

Это создаст необходимый файл .flowconfig.

Система типов

Flow имеет две важные цели: точность и скорость. Его система типов была разработана для поддержки этих целей.

Точность

Точность достигается путем анализа того, как код взаимодействует с типами, как аннотированными, так и предполагаемыми. Любое несоответствие вызывает ошибку типа. Аннотированные типы поддерживают номинальную типизацию, что означает, что два разных типа с одинаковыми атрибутами отличаются друг от друга и не могут быть заменены. Тип переменной определяется как набор значений времени выполнения, которые может получить переменная.

Скорость

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

Поддерживаемые типы

Flow поддерживает множество типов. Помимо примитивных типов, он также поддерживает следующее:

  • Object
  • Array
  • Any
  • Maybe
  • Variable
  • Tuple
  • Class
  • Interface
  • Generic

Типы аннотаций

Flow позволяет объявлять типы, а также ограничивать переменные и параметры выбранными значениями:

Если вы превысите допустимый диапазон, вы получите сообщение об ошибке:

Вы также можете определить сложные типы, включая подтипирование. В следующем примере кода тип Warrior является подтипом Person. Это означает, что все в порядке вернуть Воина в качестве Лица из функции fight(). Однако возврат null запрещен.

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

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

Конфигурация

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

Include

Раздел [include] определяет, какие каталоги и файлы должны быть проверены. Корневой каталог всегда включается по умолчанию. Пути в разделах [include] являются относительными. Одна звезда - это wild-card для любого имени файла, расширения или имени каталога. Две звезды - это подстановка для любой глубины каталога. Вот пример [include]:

Ignore

Раздел [ignore] является дополнением к [include]. Файлы и каталоги, указанные здесь, не будут проверяться потоком. Как ни странно, он использует другой синтаксис (регулярные выражения OCaml) и требует абсолютных путей. Изменение этого параметра происходит в дорожной карте команды Flow.

До тех пор помните, что секция include обрабатывается сначала, а затем раздел ignore. Если вы включите и проигнорируете один и тот же каталог и / или файл, он будет проигнорирован. Для решения проблемы абсолютного пути обычно префикс каждой строки. *. Если вы хотите игнорировать каталоги или файлы под корнем, вы можете использовать вместо него <PROJECT_ROOT>. Вот пример [ignore]:

Libs

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

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

Импорт существующих определений типов и создание собственного, если целевая библиотека не предоставляет собственные определения типов, довольно проста:

Lints

Flow имеет несколько правил lint, которые вы можете контролировать и определять, как их обрабатывать. Вы можете настроить правила из командной строки, в комментариях кода или в разделе [lints] вашего файла конфигурации. В следующем разделе я расскажу о linting, но вот как его настроить, используя раздел [lints]:

Опции

В разделе [options] вы можете сообщить Flow, как вести себя в самых разных случаях, которые не заслуживают отдельного раздела, поэтому все они сгруппированы вместе.

Есть слишком много вариантов, чтобы перечислить их все здесь. Некоторые из наиболее интересных:

  • all: установите true, чтобы проверить все файлы, а не только те, у которых есть @flow
  • emoji: установите значение true, чтобы добавить emojis в сообщения о статусе
  • module.use_strict: установите значение true, если вы используете транспилер, который добавляет «use strict»;
  • suppress_comment: регулярное выражение, которое определяет комментарий для подавления любых ошибок потока в следующей строке (полезно для кода прогресса)

Ознакомьтесь со всеми опциями руководства по Flow для настройки параметров.

Version

Flow и его формат файла конфигурации развиваются. Раздел [version] позволяет указать, какая версия Flow сконфигурирована для предотвращения ошибок.

Если версия Flow не соответствует настроенной версии, Flow отобразит сообщение об ошибке.

Вот несколько способов указать поддерживаемые версии:

Версия каретки фиксирует первый ненулевой компонент версии. Итак, ^1.2.3 расширяется до диапазона> = 1.2.3 <2.0.0, а ^0.4.5 расширяется до диапазона> = 0.4.5 <0.5.0.

Использование потока из командной строки

Flow - это клиент-серверная программа. Сервер потока должен быть запущен, и клиент подключается к нему (или запускает его, если он не запущен). Flow CLI имеет множество команд и опций, которые полезны для целей технического обслуживания и интроспекции, а также для временной переопределения конфигурации из .flowconfig.

Ввод flow --help показывает все команды и параметры. Чтобы получить справку по конкретной команде, введите flow <command> --help. Например:

Важные команды:

  • init: сгенерировать пустой файл .flowconfig
  • check: выполните полную проверку Flow и распечатает результаты
  • ls: отображает файлы, видимые для Flow
  • status (по умолчанию): показать текущие ошибки потока с сервера потока
  • suggest: предложить типы для целевого файла

Linting с Flow

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

Правила

В настоящее время существует три правила: all, untyped-type-import, и sketchy-null. Правило «all» действительно является обработкой по умолчанию для любых ошибок, которые не имеют более конкретного правила. Правило «untyped-type-import» вызывается при импорте типа из нетипизированного файла. Правило «sketchy-null» вызывается, когда вы выполняете проверку существования значения, которое может быть ложным или null/undefined. Существуют более подробные правила для:

  • sketchy-null-bool
  • sketchy-null-number
  • sketchy-null-string
  • sketchy-null-mixed

Уровни серьезности

Существуют также три уровня серьезности: off, warning, и error. Как вы можете себе представить, «off» пропускает проверку типа, «warn» выдает предупреждения, которые не приводят к завершению проверки типа и не отображаются по умолчанию в выводе CLI (вы можете видеть их с помощью --include -warnings), а «error» обрабатывается так же, как ошибки flow, и вызывает проверку типа для выхода и отображения сообщения об ошибке.

Линтинг с аргументами командной строки

Используйте аргумент командной строки --lints, чтобы указать несколько правил lint. Например:

flow --lints "all = warn, untyped-type-import = error, sketchy-null-bool = off"

Линтинг с комментариями flowlint

Существует три типа комментариев: flowlint, flowlint-line и flowlint-next-line.

Комментарий «flowlint» применяет набор правил в блоке до тех пор, пока не будет отменен соответствующий комментарий:

Если нет соответствующего комментария, настройки просто применяются до конца файла.

"flowlint-line" применяется только к текущей строке:

"flowlint-next-line" применяется к строке, следующей за комментарием:

Заключение

Большие проекты JavaScript, разработанные крупными командами, могут значительно выиграть от статической проверки типов. Существует несколько решений для введения проверки статического типа в кодовую базу JavaScript.

JavaScript продолжает расти в Интернете. Это не лишено кривых обучения, и есть много фреймворков и библиотек для вашего изучения. Если вы ищете дополнительные ресурсы для изучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.