Skip to content

Latest commit

 

History

History
76 lines (44 loc) · 6.28 KB

16. Типизация через Флоу.md

File metadata and controls

76 lines (44 loc) · 6.28 KB
Raw

Типизация через Флоу

Делаем Джаваскрипт чуть более надёжным языком

Джаваскрипт в целом неплохой язык: хоть у него много проблем, он развивается и с приходом релизов ES2015 (и выше) он стал реально удобным.

Но у него есть несколько родовых проблем, которые мешают разработке.

  • отсутствует семантика: для проверки на тип есть глобальная функция isNaN(x), метод массива Array.isArray(x) и оператор typeof x;

  • плохие неочевидные слабые динамические типы: посмотрите великое видео WAT, а потом прочтите Как унизить джаваскриптера

  • омерзительная работа с датами: спустя года разработки лично я до сих пор не могу вспомнить когда использовать new Date(), а когда просто Date(); к счастью, эту проблему решает date-fns

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

  • слабая консистентность: метод Array.prototype.slice() (возвращает отрезанный кусок массива) не мутирует оригинальный массив, а Array.prototype.splice() (вставляет элемент в массив) — мутирует.

Но Джаваскрипт-то развивается, а то, что нельзя исправить в спецификации (из-за обратной совместимости) — исправляется сообществом с помощью транспайлеров (помните про Бейбель?).

Проблему с типами решил Фейсбук с помощью Флоу. А Майкрософт — Тайпскриптом.

Флоу

Зачем вообще нужно работать с типами?

На системном уровне — чтобы компилятор делал за вас проверки, а не вы в продакшене узнавали о том, что что-то сломалось (например, с помощью Сентри).

На бытовом: текстовый редактор показывает что нужно передать в функцию и что она вернёт — не нужно самому помнить.

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

Начать работать (и интегрировать в react-scripts) с Флоу легко:

  1. ставите в проект flow-bin,
  2. запускаете команду yarn flow init чтобы создать .flowconfig,
  3. в каждом файле который вы хотите обложить тестами, добавляете первой строчкой // @flow,
  4. запускаете yarn flow (например, на этапе билда),
  5. читаете ошибки и исправляете их!

В Вскоде поставьте Flow Language Support.

Как писать свои типы

Да легко: у аргумента функции пишете её тип, а после аргументов — что она вернёт.

function square(n: number): number {
  return n * n;
}

square("2"); // Error!

Где искать типы к чужим библиотекам

Допустим, вы используете готовую библиотеку — react-helmet или react-intl, но они не поставляют типы. Этим вообще редко кто занимается.

Поэтому существует flow-typed: центральный репозиторий с типами к библиотекам из Нпма.

Работать с ним легко:

  1. ставите Ярном flow-typed (это CLI) в проект;
  2. запускаете через yarn flow-typed: он установит типы для пакетов из package.json;
  3. добавляете директорию flow-typed в .gitignore, а то репозиторий превратится в мусорку.

Всё! Теперь вам доступны типы флоу-тайпед. Импортите их и носите на здоровье.

Итог

В этом уроке вы познакомились с Флоу — системой проверки типов в Джаваскрипте, да и с самими типами тоже познакомились.

Какой вывод? Типы важны, но они замедляют начальную разработку.

Кстати, если вам интересно — погрузитесь в то, как устроен Флоу.