Instrumentele JavaScript Flow și TypeScript sunt similare în multe aspecte. Cu toate acestea, ele diferă în ceea ce privește funcționalitatea și abilitățile lor ca verificatori statici.
Aflați cum se compară Flow și TypeScript și care este cel mai bun verificator static pentru următorul dvs. proiect.
Ce este Flow?
Flow este un instrument de verificare a tipurilor static pentru JavaScript, creat de Facebook pentru a identifica în prealabil erorile de compilare și de executare a codului. Face acest lucru prin monitorizarea valorilor transmise de codul dvs. și a modului în care tipurile lor de date se schimbă în timp. Acest sistem de verificare static îmbunătățește fiabilitatea și lizibilitatea. De asemenea, ajută la reducerea apariției erorilor în codul JavaScript.
Ce este TypeScript?
TypeScript nu este doar un verificator de tip, precum Flow, ci un limbaj de programare puternic tipizat. Microsoft a creat limbajul, construindu-l pe baza JavaScript.
Prin convenție, ar trebui să creați fișiere TypeScript cu extensia de fișier .ts. Puteți compila un fișier TypeScript în cod JavaScript, astfel încât oriunde rulează JavaScript, TypeScript poate rula și el.
Configurarea fluxului pentru aplicația dvs. JavaScript
Puteți integra Flow în orice cadru JavaScript pe care decideți să îl utilizați pentru proiectul dvs. Va trebui să fi configurat un compilator JavaScript precum Babel pentru a gestiona toate tipurile de flux din codul dvs. și pentru a-l compila în JavaScript vanilla.
Pentru a instala Flow în proiectul dvs., executați următoarea comandă:
adaugă fire --dev flow-bin
Apoi, ar trebui să instalați interfața de linie de comandă Flow la nivel global. Acest CLI oferă mai multe comenzi pentru construirea de aplicații de flux.
Pe macOS, utilizați Homebrew pentru a instala Flow CLI:
bere instalare flux-cli
Va trebui să știți cum să utilizați Windows PowerShell pentru a instala Flow pe o mașină Windows.
Pentru a instala Flow CLI pe Windows, rulați acest script în terminalul dvs. PowerShell:
ex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Proiectele de flux necesită a .flowconfig fișier pentru toate configurațiile necesare ale instrumentului.
Rulați această comandă pentru a crea un fișier de configurare Flow într-un proiect nou sau existent:
npm run flow init
Rețineți că anumite cadre pot livra proiecte cu un fișier de configurare Flow în mod implicit.
Ultimul lucru de făcut este să adăugați scriptul Flow la dvs pachet.json fişier:
"scenarii": {
"curgere": "curgere"
},
Acum ați configurat cu succes Flow să ruleze în aplicația JavaScript.
Configurarea TypeScript în proiectul dvs
Rulați următoarea comandă pentru a instala TypeScript în proiectul dvs.:
npm instalare dactilografiat --save-dev
De asemenea, ar trebui să instalați compilatorul pentru a compila codul TypeScript în JavaScript vanilla. De asemenea, este posibil să aveți nevoie configurați configurația TypeScript pentru un flux de lucru mai bun experienţă.
Instalați compilatorul TypeScript la nivel global cu această comandă:
npm instalare -g dactilografiat
Pentru a inițializa a tsconfig.json config, introduceți următoarea comandă în terminalul dvs.:
tsc --init
Instrucțiunile de mai sus vă vor ajuta să începeți să utilizați TypeScript în proiectul dvs.
Clădire cu flux
Pentru a scrie codul Flow într-un fișier JavaScript, declarați sintaxa Flow din partea de sus a codului înaintea oricăror expresii sau instrucțiuni:
// @curgere
Puteți seta tipuri de date variabile și funcții folosind adnotări. Fluxul va genera apoi o eroare dacă tipul anticipat nu este îndeplinit.
De exemplu:
// @curgere
let foo: number = "Buna ziua";
Flow va arunca o eroare aici, deoarece tipul de valoare așteptată a foo este un număr, nu un șir.
Alerga fluxul de rulare npm pentru a vedea rezultatul de eroare în terminal:
Activarea extensiei Flow în orice editor de text la alegere va afișa erorile din editorul dvs. pe măsură ce codificați.
Flow utilizează, de asemenea, inferența de tip pentru a determina care ar trebui să fie valoarea așteptată a unei expresii.
De exemplu:
// @curgere
funcţieFă ceva(valoare) {
valoare returnată * "Buna ziua";
};
lăsa rezultat = face Something(6);
Nu puteți executa operații aritmetice între numărul șase și șir Buna ziua.
Ieșirea de fluxul de rulare npm va fi o eroare:
Dezvoltarea cu TypeScript
Sintaxa de tip a lui TypeScript este foarte asemănătoare cu cea a lui Flow. Puteți defini tipuri de variabile și funcții cu adnotare de tip, așa cum ați proceda în Flow.
TypeScript este livrat cu câteva alte caracteristici similare cu Flow, cum ar fi inferența de tip.
Luați exemplu de cod TypeScript:
// Typescript.ts
tip Rezultat = "trece" | "eșuează"
funcţieverifica(rezultat: Rezultat) {
dacă (rezultat "trece") {
console.log("A trecut")
} altfel {
console.log("A eșuat")
}
}
Poți să alergi tsc Typescript.ts pentru a compila acest cod în JavaScript simplu vanilla.
Acesta ar fi același cod TypeScript compilat în JavaScript vanilla:
funcţieverifica(rezultat) {
dacă (rezultat "trece") {
console.log("A trecut")
} altfel {
console.log("A eșuat")
}
}
Avantaje și dezavantaje ale TypeScript și Flow
Acum știți cum să începeți să utilizați ambele instrumente în proiectul dvs. JavaScript. Ar trebui să cunoașteți avantajele și dezavantajele utilizării fiecăruia.
Integrare
Procesul de configurare pentru a utiliza Flow este ceva mai complex, spre deosebire de TypeScript. Va trebui să configurați un compilator JavaScript precum Babel sau flow-remove-types pentru a elimina tipurile de flux din codul dvs. TypeScript include un compilator pentru a converti codul TypeScript în JavaScript, facilitând integrarea.
TypeScript are instrumente mult mai bune și majoritatea cadrelor JavaScript îl acceptă implicit. Cele mai populare IDE-uri oferă suport de primă clasă pentru TypeScript. Flow este, de asemenea, acceptat, dar necesită un plug-in special.
Comunitate
Spre deosebire de Flow, cadrele JavaScript cum ar fi React, React Native, Vue și Angular acceptă TypeScript imediat.
Această adoptare pe scară largă și această comunitate mare au ca rezultat resurse de învățare, actualizări și suport pentru instrumente mai bune.
Flexibilitate
Flow acționează ca un verificator de tip care funcționează pentru a vă avertiza despre un cod potențial rău. TypeScript vă împiedică să scrieți cod rău și are un sistem strict de tipări. TypeScript acceptă, de asemenea încapsularea obiectelor, care ajută la menținerea unui cod complex gestionabil. Flow nu are această caracteristică.
Servicii
TypeScript oferă toate serviciile de limbaj JavaScript, cum ar fi refactorizarea codului și completarea automată. Flow este un verificator de tip static care oferă o înțelegere și o analiză profundă a codului dvs. scris.
Flow poate lucra până la modulele și bibliotecile importate ale proiectului și poate discerne modul în care acestea vă afectează codul. De exemplu, poate detecta și avertiza atunci când lipsește o bibliotecă necesară din proiectul dvs. sau când încercați să accesați o definiție care nu există.
Ce verificator static ar trebui să utilizați?
Există multe argumente valide pentru utilizarea fiecărui instrument, deoarece fiecare are caracteristici diferite. Unele pot avea prioritate maximă pentru un dezvoltator și prioritate scăzută pentru celălalt. Ambele instrumente funcționează bine în privința lor și oferă avantaje pentru utilizarea lor.
Ar trebui să examinați cerințele proiectului dvs. și să luați o decizie educată pe baza acestora.