Напоследък разцъквам един tool-че за JavaScript, което ми прави живота доста по-лесен. Тъй като се оказа, че се setup-ва бързо и лесно (инсталация на един npm пакет и да научите две команди от терминала), и се използва лесно, реших да ви го засиля, понеже ще ви е полезно за Node.js проектите, да не говорим пък ако после отидете да пишете някъде JavaScript.



Едно от неприятните неща при разработката на софтуер с JavaScript e, че често имате проблеми от рода на да се налага да си подкарате кода, само за да видите, че сте подали някъде стринг, вместо число или пък да гледате някоя функция, която сте напраскали преди 5-6 дни и да се чудите "как се ползваше тая проклетия?". Колкото по-голям е проекта, толкова повече се задълбочават проблеми от този тип, особено ако липсва документация. JavaScript обаче се развива доста стремглаво през последните няколко години и постоянно излизат интересни решения на различните проблеми, свързани с езика. Едно решение на по-горните проблеми е tool-а на Facebook, flowtype.



Flow

е static type checker за JavaScript, което значи, че Flow минава през кода ви и проверява дали начинът, по който използвате типовете в кода ви, е коректен. Например ако се опитате да разделите string на number, или да направите нещо от рода на '1234'.push('3'), Flow веднага ще ви се скара. Това обаче са прости примери и не са идеално практични. Ето нещо малко по-практично:

// @flow function sum(...numbers : Array<number>): number { return numbers.reduce((sum, current) => sum + current, 0); } sum(1, 2, 3, 'gosho'); // flow error, 'gosho' is not a number sum(1, 2).log('zdrkp'); // flow error, Number does not have property log


Ползи от Flow:

  • получавате някаква гаранция, че програмата ви е коректна, още преди да я изпълните.
  • ще можете дадобавяте и променяте код по-спокойно и уверено, тъй като Flow ще ви пищи, ако счупите нещо и модулите ви вече не са съвместими.
  • колегите ви ще разбират по-добре кода, който сте написали, както и по-какъв начин се очаква да го използват (както и вие техния) - това идва от там, че Flow ви дава начин да слагате анотации за тип на променливи, функции и стойности.
  • не жертвате гъвкавостта на JavaScript, като използвате Flow. (по-строго типизиране не означава, че кодът, който пишете, трябва да е по-дървен, това е стереотип заради Java и C# :D)
  • ако си настроите текстовия редактор/IDE-то, ще имате по-добър autocomplete, както и подчертавки за грешки и т.н.
  • можете да ползвате Flow за проверка само на определени файлове (като сложите коментар // @flow най-отгоре във файла), не на целия ви проект. Можете да започнете да хващате ползите веднага, без да ви се налага да слагате type анотации за всичко, което сте накодили досега.
  • Flow играе добре с ESLint - ако използвате и двете в проектите си, качеството на кода ви ще е доста по-добро.
  • По принцип Flow има специален синтаксис, който е почти като JavaScript, но не е валиден JavaScript. За щастие обаче има и стинтаксис, който се възползва от коментари и по този начин можете хем да се възползвате от Flow, хем кода ви да е валиден JavaScript и да не ви се налга да закачате Babel и разни такива (страшни засега) неща. Ето как горния код се анотира с коментари:
// @flow function sum(...numbers /*: Array<number> */) /*: number */ { return numbers.reduce((sum, current) => sum + current, 0); } sum(1, 2, 3, 'gosho'); // flow error, 'gosho' is not a number sum(1, 2).log('zdrkp'); // flow error, Number does not have property log


Getting started:

Отивате на flow.org и започвате да четете tutorial-ите там - кратички са и би трябвало да са ви достатъчни, за да се ориентирате. Няма нужда да прехвърляте по-дебелите теми, но задължително погледнете сетъп, синтаксис с коментари, както и освновните правила на type annotations във Flow. В документацията има изброени и extension-и за различните редактори - има за Atom, VS Code, Vim, Sublime, WebStorm и знам ли още какво.