React PropTypes против Flow

PropTypes и Flow охватывают похожие вещи, но используют разные подходы. PropTypes может выдавать вам предупреждения во время выполнения, что может быть полезно для быстрого поиска искаженных ответов, исходящих от сервера и т. Д. Однако Flow, похоже, является будущим, и с такими концепциями, как generics, это очень гибкое решение. Также автозаполнение, предлагаемое Nuclide, является большим плюсом для Flow.

Мой вопрос теперь в том, какой путь лучше всего использовать при запуске нового проекта. Или может быть хорошим решением использовать оба типа - Flow и PropTypes? Проблема с использованием обоих заключается в том, что вы пишете много повторяющегося кода. Это пример приложения для музыкального плеера, которое я написал:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Оба определения в основном содержат одинаковую информацию, и при изменении типа данных оба определения необходимо обновить.

Я нашел этот плагин babel для преобразования объявлений типов в PropTypes, что могло бы стать решением.

Спустя год после того, как я задал этот вопрос, я хотел рассказать о своем опыте решения этой проблемы.

По мере развития Flow я начал набирать с его помощью свою кодовую базу и не добавлял никаких новых определений PropType. Пока я думаю, что это хороший способ, потому что, как упоминалось выше, он позволяет вам не только вводить реквизиты, но и другие части вашего кода. Это очень удобно, например, когда у вас есть копия ваших props в состоянии, которое может быть изменено пользователем. Кроме того, автоматическое завершение в IDE - отличный выигрыш.

Автоматические преобразователи в ту или иную сторону не получили особого успеха. Итак, для новых проектов я бы действительно рекомендовал использовать Flow over PropTypes (на случай, если вы не хотите печатать дважды).

За исключением того, что оба относятся к очень широкой области проверки типов, между ними нет особого сходства.

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

PropTypes - это базовая программа проверки типов, которая была исправлена ​​на React. Он не может ничего проверить, кроме типов пропсов, передаваемых данному компоненту.

Если вам нужна более гибкая проверка типов для всего проекта, то вам подойдет Flow / TypeScript. Пока вы передаете в компоненты только аннотированные типы, PropTypes вам не понадобится.

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

Я считаю, что упущенный момент здесь заключается в том, что Flow - это статическая проверка, а PropTypes - это средство проверки времени выполнения , что означает

• Flow может перехватывать ошибки восходящего потока при кодировании: теоретически он может пропустить некоторые ошибки, о которых вы не знаете (например, если вы недостаточно реализовали поток в своем проекте или в случае глубоких вложенных объектов)
• PropTypes поймает их ниже по течению во время тестирования, поэтому он никогда не пропустит

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

Теперь добавьте использование React PropTypes с неправильным типом. Это БУДЕТ вызывать сбой тестов и помечать их в консоли браузера при запуске приложения.

Исходя из этого, кажется, что даже если используется Flow, также следует указать PropTypes.