Добавление типов к значениям Formik - это простая замена двух строк, гарантирующая более правильный код.
Flow.js позволяет добавлять аннотации типов к существующему коду JavaScript, не переходя на новый язык, такой как Typescript. Formik - отличный инструмент для координации форм с минимальными усилиями в React.js. Здесь мы увидим, как их просто объединить.
Если вы используете Typescript, ознакомьтесь с официальной документацией Formik. Концепция аналогична обсуждаемой здесь.
Из-за сложности системы логического вывода Flow при использовании компонентов высшего порядка (HOC) и рендеринга реквизита вы не можете автоматически передавать типизацию через Formik его дочернему компоненту.
Используя простую технику, можно сохранить строгую типизацию значений при использовании Formik. Это гарантирует, что любые пользователи вашей сумки Formik не будут иметь доступа к данным, которые могут не существовать, что повысит точность вашей программы.
Обратите внимание, что в этом примере не принимаются во внимание какие-либо flow-typed определения Formik - это будет в следующей статье.
Минимальный пример 🐁
Вот минимальный пример использования Formik. Наша форма собирает имя и выводит его на консоль. Однако, глядя на строки 14 и 26, мы видим ошибку - мы запрашиваем values.email вместо values.name!
Обратите внимание, что мы используем версию Formik для рендеринга, а не withFormik HOC, но вы можете применить это к обоим методам.
Запуск этого через игровую площадку Flow не показывает ошибок - он молча прошел мимо нас. Щелкните, чтобы убедиться в этом сами:
Добавление строгой типизации 💪
Нам нужен способ для Flow видеть наш initialValues как наши типы и применять это к переданному объекту values. Этого можно добиться с помощью следующего изменения:
Мы поместили initialValues в отдельную переменную. В данном случае он находится вне функции App, хотя мы могли бы оставить его внутри.
Мы создаем новый тип потока, formValuesType, который проверяет initialValues, чтобы создать себя.
Затем мы можем обновить нашу onSubmit функцию, чтобы явно указать, что наш ожидаемый объект values должен иметь тип formValuesType.
Последняя часть головоломки - как передать этот тип дочерней опоре рендеринга. Мы определяем тип свойств функции рендеринга formik как {values: formValuesType} & *. Это означает: «Если мы найдем объект values, используйте этот тип. Для любого другого члена объекта formik автоматически попытайтесь определить тип посредством использования ».
Исправление этих ошибок ✔️
Посмотрев сейчас на площадку Flow, мы видим следующие ошибки:
Отлично! Теперь у нас есть строгая типизация значений на основе переданных нами начальных значений. Теперь мы знаем, как исправить это, заменив .email на .name.
Это охватывает ключевую часть ввода значений Formik в свойствах рендеринга. В следующей статье мы рассмотрим, как получить полную типизацию для всех пропсов Formik, используя комбинацию этой техники и flow-typed определения.
В этой технике нет ничего специфического для Formik. Вы можете использовать шаблон с любой опорой рендеринга или функциональностью на основе HOC, но это решает конкретную проблему, с которой я столкнулся.
Сообщите мне, поможет ли это вам, или вы нашли альтернативный способ улучшить набор текста при использовании Formik!
