de Mateusz Sokola

Cum să vă ușurați viața folosind programarea funcțională în TypeScript

În ultimii doi ani, comunitatea JavaScript a vorbit despre programare funcțională. Programarea funcțională ne permite să construim un software mai bun fără a proiecta arbori de clasă complexe. Astăzi, voi explica cum să utilizați compoziția funcției în Mecanografiat și Lodash.

Codul poate fi găsit pe Github.

Cum sa va usurati viata folosind programarea functionala in TypeScript

Ce este compoziția funcției?

Compoziția funcției implică combinarea a două sau mai multe funcții pentru a crea una mai complexă. Simțindu-se confuz? Nu vă faceți griji, următorul exemplu va clarifica:

const f = function (a) { return a + 1 };const g = function (b) { return b * b };
const x = 2;const result = f(g(x)); // => 5

Am combinat două funcții aici – funcția f și funcție g. Funcția f adaugă 1 la A parametru și funcție g înmulțește b parametru de b. Rezultatul este 5.

Să-l proiectăm invers:

  1. constant X este egal cu 2
  2. constant X devine un argument al funcției g
  3. funcţie g returnează 4
  4. funcţie g ieșire (4) devine un argument al funcției f
  5. funcţie f returnează 5

Nu este știință despre rachete, dar nu pare deosebit de utilă. De fapt, pare chiar mai complex decât menținerea acestuia într-o singură funcție. Acest lucru poate fi adevărat, dar să luăm în considerare câteva cazuri de utilizare realiste.

Exemplul din lumea reală: formatarea banilor

Construiam o postare simplă pentru dezvoltatori. Una dintre cerințe a fost afișarea intervalelor salariale lângă fiecare ofertă. Toate salariile erau stocate sub formă de cenți și aveau nevoie să arate astfel:

from: 6000000 to:   60,000.00 USD

Arată ușor, dar lucrul cu textul este greu. Aproape fiecare dezvoltator îl urăște.

Toți petrecem ore întregi scriind expresii regulate și tratând unicode. Când trebuie să formatez text, încerc mereu să soluționez Google. După ce am tăiat toate bibliotecile (mult prea mult pentru nevoile mele) și toate fragmentele de cod care suge, nu au mai rămas atât de multe.

Am decis că trebuie să-l construiesc pe propriul meu formatator.

Cum o construim?

Înainte de a începe să scriem cod, să ne săpăm într-o idee pe care am găsit-o:

  1. Împărțiți dolari și cenți.
  2. Formatează dolari – nu este atât de ușor să adaugi mii de separatoare.
  3. Formatați cenți – tratarea cu cenți este ușoară, aproape de livrare.
  4. Conectați împreună dolari și cenți cu separatorul.

Acum pare clar. Ultimul lucru pe care trebuie să-l luăm în considerare este cum să adăugăm mii de separatoare la dolari. Să luăm în considerare următorul algoritm:

  1. Șir invers.
  2. Împărțiți șirul la fiecare 3 caractere pentru a matricea.
  3. Alăturați toate elementele matricei, adăugând separatorul de mii dintre ele.
  4. Șir invers.

Toți acești pași pot fi traduși în următorul pseudo cod:

1. "60000"        => "00006"2. "00006"        => ["000", "06"]3. ["000", "06"]  => "000.06"4. "000.06"       => "60.000"

Și acesta este modul în care acest algoritm este tradus în funcții compuse:

În prima linie, veți observa că am folosit Lodash bibliotecă. Lodash conține o mulțime de utilități care facilitează programarea funcțională. Să analizăm codul de la linia 22:

return flow([  reverse,  splitCurry(match),  joinCurry(separator),  reverse]);

curgere funcția este un compozitor de funcții. Conduce rezultatul verso funcție la intrarea de splitCurry, si asa mai departe. Aceasta creează o funcție complet nouă. Vă amintiți algoritmul de separare de mii de sus? Asta e!

Puteți vedea că am postfixat divizarea și alăturarea funcțiilor cu „Curry” și le-am invocat. Această tehnică se numește currying.

Ce este Currying?

Currying este procesul de traducere a unei funcții de argumente multiple într-o singură funcție de argument. Funcția de argument unic returnează o altă funcție dacă mai sunt necesare argumente.

Sună greu? Luați în considerare următorul exemplu:

Despică funcția are nevoie de două argumente – un șir și un model de separare. Funcția trebuie să știe cum să împartă textul. În acest caz, nu putem compune această funcție, deoarece are nevoie de argumente diferite decât celelalte. Iată unde intră curry-ul.

import { curry } from "lodash";import split from "./split";
const splitCurry = curry(split);
splitCurry("000001")(/[0-9]{1,3}/g); // => ["000", "001"]

Acum splitCurry funcția este în concordanță cu verso funcţie. Amândoi au nevoie de un singur argument. Din păcate, nu am invocat splitCurry funcționează încă cu un model de separare. Nu va funcționa așa.

Ce se întâmplă dacă inversăm ordinea argumentelor în curry?

import { curryRight } from "lodash";import split from "./split";
const splitCurry = curryRight(split);
splitCurry(/[0-9]{1,3}/g)("000001"); // => ["000", "001"]

Acum, codul nostru poate funcționa, deoarece putem folosi curry ca funcții din fabrică. Să vedem din nou codul:

return flow([  reverse,  splitCurry(match),  joinCurry(separator),  reverse]);

Toate aceste funcții au un singur argument (șir), astfel încât să le putem compune împreună. Și apoi folosiți-le ca funcție independentă. Așteptați un minut…

Ce sunt funcțiile din fabrică?

Funcțiile din fabrică sunt funcții care creează un obiect nou. În cazul nostru, o funcție. Să analizăm din nou separatorul nostru de mii. În teorie, putem folosi aceeași funcție tot timpul. Din păcate, unele țări separă mii cu virgule, altele cu puncte. Desigur, aș putea să parametrizez separatorul, dar am decis să folosesc funcția din fabrică.

const formatUS = thousandSeparator(',');const formatEU = thousandSeparator('.');
formatUS(10000); // 10,000formatEU(10000); // 10.000

rezumat

Anul trecut am petrecut timp împrospătându-mi cunoștințele din studiile anterioare, astfel încât să le pot aplica în activitatea mea zilnică. În acest articol, nu am săpat în legea monadelor sau în monoizi – nu am vrut să fac confuz. Subiectul este larg și profund înrădăcinat în informatică. Am vrut să vă dau o idee despre cum să abordați gândirea funcțională, descriind în același timp toți termenii cât mai scurt posibil.

Am decis să păstrez tot codul de pe Github, deci articolul este mai ușor de citit.

Dacă aveți probleme sau sugestii, vă rugăm să scrieți un comentariu.

PS. am inceput un canal YouTube de programare. Vă rugăm să o verificați și să vă abonați 🙂