22 мая 2023 г. · 4 минуты чтения
Flow – это средство статической проверки типов для разработчиков JavaScript, которое позволяет добавлять в код аннотации с информацией о типах для обнаружения ошибок, связанных с типами. Проверка типов хорошо работает с исходным кодом, но создает проблемы при проверке типов сторонних библиотек, потому что вы не можете их контролировать — но эта статья покажет вам, как Flow может обрабатывать такие сценарии, чтобы вы могли использовать этот инструмент с пользой!
Flow позволяет разработчикам аннотировать свой код информацией о статическом типе и заранее обнаруживать потенциальные опечатки. Эта функция полезна при работе с большими кодовыми базами. Такого рода проверка сложнее со сторонними библиотеками, потому что это не ваш код, и вы не можете (не должны!) его модифицировать, и тогда проверка на опечатки становится проблемой. У Flow есть решение для таких сценариев.
В этой статье пойдет речь о том, как интегрировать Flow со сторонними библиотеками в React Native. Вы узнаете, как использовать Flow для проверки типов сторонних библиотек и выявления ошибок. Также будет обсуждаться TypeScript в сравнении с Flow.
Обзор Flow и его настройка
Flow помогает отлавливать ошибки в коде React Native с помощью статической проверки типов. Вы можете аннотировать код в проекте React Native информацией о типе. Flow проверяет код и генерирует сообщения об ошибках, когда обнаруживает несоответствия или ошибки в типе.
Например, если вы объявите переменную строкой, Flow проверит, что любые операции с этой переменной допустимы для строки. Если вы используете переменную недопустимым для строки способом, Flow выведет сообщение об ошибке.
Flow может быть полезен при использовании сторонних библиотек, обеспечивая плавную интеграцию с остальной кодовой базой и предотвращая возникновение проблем в дальнейшем.
Чтобы начать интеграцию Flow со сторонними библиотеками, вы должны сначала настроить свой проект для использования Flow.
В проекте React Native вы установите интерфейс командной строки Flow и добавите файл конфигурации в свой проект. После этого вы можете аннотировать свой код типами, используя синтаксис Flow, и запускать проверки Flow для обнаружения ошибок в вашем коде.
Чтобы установить Flow в свой проект React Native, выполните следующую команду:
npm install --save-dev flow-bin
React Native прекратил поддержку Flow по умолчанию с версии 0.70. Это означает, что, в отличие от предыдущих версий, которые поставлялись с файлом [.flowconfig](https://flow.org/en/docs/config/) по умолчанию, вам нужно будет инициализировать этот файл, выполнив следующую команду:
npx init flow
Теперь вы можете объявить // @flow в верхней части ваших файлов кода, используя синтаксис Flow, и начать проверку на наличие ошибок типа.
Создание объявлений/определений типов для сторонних библиотек
Чтобы использовать сторонние библиотеки в вашем проекте безопасным способом, вам потребуется, чтобы в исходном коде библиотеки были уже существующие определения типов. В некоторых библиотеках этого может не быть, и вам потребуется создать собственные определения типов, чтобы использовать библиотеку безопасным способом.
Вот как можно создать собственные определения типов для сторонней библиотеки.
Шаг 1. Определите API библиотеки
Первым шагом в создании определений типов для сторонней библиотеки является определение API библиотеки. Это означает определение функций, классов и других сущностей, которые библиотека предоставляет вашему коду. Обычно вы можете найти эту информацию в документации библиотеки или изучив исходный код библиотеки.
Шаг 2: Объявите типы
Как только вы поймете API библиотеки, вы можете начать объявлять типы для сущностей библиотеки. Вы будете использовать ключевое слово declare в Flow, которое сообщает Flow, что вы создаете объявление типа для объекта, определенного вне вашего кода.
Например, вы можете создать объявление типа для функции с именем add, которая принимает два числа в качестве аргументов и возвращает их сумму:
declare function add(x: number, y: number): number;
Этот код сообщает Flow, что функция add принимает в качестве аргументов два числа, в данном случае ( x и y), и возвращает число.
Вы также можете использовать встроенные типы при создании объявлений типов для сторонней библиотеки.
Например, вы можете использовать тип Object для описания объекта с любыми ключами и значениями или тип Array для описания массива определенного типа:
declare function add(props: Object): void;
Выше приведен пример того, как вы можете использовать тип Object для объявления функции, которая принимает объект с любыми ключами и значениями в качестве аргумента.
Шаг 3. Экспорт определений типов
После того, как вы создали свои определения типов, вам нужно будет экспортировать их для использования. Вы можете создать отдельный файл .js.flow в каталоге вашего проекта. В этом файле будут храниться ваши объявления и откуда вы будете их экспортировать.
Например, если вы создали объявления типов для библиотеки с именем my-library, вы можете создать файл с именем my-library.js.flow и экспортировать оттуда свои объявления типов:
//my-library.js.flow
declare function add(x: number, y: number): number;
declare function logProps(props: Object): void;
declare function first<T>(arr: Array<T>): T | void;
export { add, logProps, first };
После экспорта определений типов вы теперь можете использовать стороннюю библиотеку в своем коде безопасным способом, используя синтаксис Flow.
Повтор сеанса для разработчиков
Выявляйте разочарования, ищите ошибки и устраняйте замедления, как никогда раньше, с помощью OpenReplay — инструмента воспроизведения сеансов с открытым исходным кодом для разработчиков. Разместите его самостоятельно за считанные минуты и полностью контролируйте данные своих клиентов. Загляните в наш репозиторий GitHub и присоединитесь к тысячам разработчиков в нашем сообществе.
Использование Flow-typed для поиска и установки определений типов
Flow-typed — это проект сообщества с открытым исходным кодом, который предоставляет сторонние определения типов для использования с Flow. Сообщество создает и поддерживает эти определения типов и охватывает наиболее популярные библиотеки и платформы, используемые разработчиками.
С Flow-typed вы можете искать определение типа в библиотеке, устанавливать его и импортировать в свой код, избавляя вас от хлопот, связанных с определением пользовательских определений типов самостоятельно.
Сначала необходимо установить flow-typed, чтобы использовать библиотеку для поиска и импорта определений типов:
npm install -g flow-typed
Это установит flow-typed глобально на ваш компьютер.
Затем вы можете искать любую нужную вам библиотеку и определения ее типов, используя команду search с именем библиотеки:
flow-typed search library_name
Как только вы нашли правильное определение типа, вы можете установить его в каталог flow-typed с помощью этой команды:
flow-typed install [email protected]
Обратите внимание, что версию библиотеки также можно указать при поиске и установке.
Теперь импортируйте нужный тип в свой код:
import type { type_definition } from 'library_name';
Именно так вы можете использовать Flow-typed для поиска и установки определений сторонних библиотек в вашем проекте React Native.
Поток против. Машинопись
TypeScript популярен за то, что он является хорошо построенным средством проверки статических типов, таким как Flow. Однако, в отличие от Flow, TypeScript также является полноценным языком программирования, созданным на основе JavaScript.
Разработанный Майкрософт, TypeScript имеет много сходных и контрастных черт с Flow. Давайте рассмотрим некоторые плюсы и минусы использования любого из них в качестве средства проверки статического типа.
Плюсы и минусы Flow и TypeScript
Ниже приведена простая таблица, суммирующая плюсы и минусы Flow и TypeScript:
Как Flow сравнивается с дескриптором TypeScript в сторонних библиотеках?
И Flow, и TypeScript обеспечивают поддержку сторонних библиотек. Однако они обрабатывают проверку типов для этих библиотек несколько иначе. Файлы определения типов TypeScript (.d.ts) предоставляют встроенный способ добавления информации о типах в существующий код JavaScript, включая сторонние библиотеки.
Эти файлы определения типа можно либо включить в проект, либо установить из репозитория DefinitelyTyped на GitHub.
Из-за этого TypeScript имеет более широкий спектр сторонних библиотек с доступными определениями типов. Это также означает, что использовать их в ваших проектах стало проще.
Например, если вы хотите использовать популярную библиотеку ExpressJS в своем проекте TypeScript, вы можете установить пакет типов Express с помощью npm:
npm install @types/express
Эта команда установит файл определения типа Express, предоставляя информацию о типе для всех функций Express.
С другой стороны, Flow не имеет встроенной системы для поддержки определений сторонних библиотек и должен полагаться на пакет типа Flow, установленный отдельно. Это приводит к более длительной настройке и сложному использованию.
Заключение
В этом посте вы узнали все, что необходимо для начала интеграции Flow в ваш проект React Native и использования Flow для проверки типов сторонних библиотек.
Интеграция Flow со сторонними библиотеками в React Native может дать вашему проекту множество преимуществ. Добавляя статическую проверку типов, вы можете обнаруживать ошибки на ранних этапах процесса разработки, повышая общую стабильность и надежность вашего приложения.
Первоначально опубликовано наhttps://medium.com/stackanatomy.
