Проверка статического типа

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

поток

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

Чтобы использовать Flow, вам необходимо:

• Добавьте Flow в свой проект в качестве зависимости.
• Убедитесь, что синтаксис Flow извлечен из скомпилированного кода.
• Добавьте аннотации типов и запустите Flow, чтобы проверить их.

Добавление потока в проект

Сначала перейдите в каталог вашего проекта в терминале. Вам нужно будет выполнить следующую команду:

yarn add --dev flow-bin

Если вы используете npm, запустите:

npm install --save-dev flow-bin

Эта команда устанавливает последнюю версию Flow в ваш проект.

Теперь добавьте поток в раздел «scripts» вашего package.json, чтобы иметь возможность использовать его из терминала:

{
  // ...
  "scripts": {
    "flow": "flow",
    // ...
  },
  // ...
}

Наконец, выполните одну из следующих команд:

Если вы используете пряжу, запустите:

yarn run flow init

Если вы используете npm, запустите:

npm run flow init

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

Удаление синтаксиса потока из скомпилированного кода

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

Точный способ сделать это зависит от инструментов, которые вы используете для компиляции JavaScript.

Создать приложение React

Если ваш проект был настроен с использованием приложения Create React, поздравляем! По умолчанию аннотации Flow уже удаляются, поэтому на этом этапе вам больше ничего не нужно делать.

галдеж

Замечания:

Эти инструкции не предназначены для пользователей Create React App. Несмотря на то, что приложение Create React использует Babel под капотом, оно уже настроено для понимания Flow. Выполните этот шаг, только если вы не используете приложение «Создать React».

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

Если вы используете пряжу, запустите:

yarn add --dev babel-preset-flow

Если вы используете npm, запустите:

npm install --save-dev babel-preset-flow

Затем добавьте пресет потока в вашу конфигурацию Babel. Например, если вы настраиваете Babel через файл .babelrc, это может выглядеть так:

{
  "presets": [
    "flow",
    "react"
  ]
}

Это позволит вам использовать синтаксис Flow в вашем коде.

Замечания:

Flow не требует предварительной настройки реакции, но они часто используются вместе. Сам поток понимает синтаксис JSX из коробки.

Другие настройки сборки

Если вы не используете ни Create React App, ни Babel, вы можете использовать flow-remove-types для удаления аннотаций типов.

Бегущий поток

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

yarn flow

Если вы используете npm, запустите:

npm run flow

Вы должны увидеть сообщение вроде:

No errors!
Done in 0.17s.

Добавление аннотаций типа потока

По умолчанию Flow проверяет только файлы, содержащие эту аннотацию:

// @flow

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

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