Orodji JavaScript Flow in TypeScript sta si v mnogih pogledih podobni. Razlikujejo pa se glede funkcionalnosti in sposobnosti statičnega damalnika.
Ugotovite, kakšna sta primerjava Flow in TypeScript in kateri je najboljši statični preverjevalnik za vaš naslednji projekt.
Kaj je Flow?
Flow je orodje za preverjanje statičnega tipa za JavaScript, ki ga je ustvaril Facebook za predhodno prepoznavanje napak kode pri prevajanju in izvajanju. To naredi tako, da spremlja vrednosti, ki jih posreduje vaša koda, in kako se njihovi tipi podatkov spreminjajo skozi čas. Ta statični sistem preverjanja izboljša zanesljivost in berljivost. Pomaga tudi zmanjšati pojav napak v vaši kodi JavaScript.
Kaj je TypeScript?
TypeScript ni samo preverjevalnik tipov, kot je Flow, ampak močno tipiziran programski jezik. Microsoft je ustvaril jezik in ga zgradil na JavaScript.
Po dogovoru bi morali ustvariti datoteke TypeScript s pripono datoteke .ts. Datoteko TypeScript lahko prevedete v kodo JavaScript, tako da se lahko povsod, kjer se izvaja JavaScript, izvaja tudi TypeScript.
Konfiguriranje Flow za vašo aplikacijo JavaScript
Flow lahko integrirate v katero koli ogrodje JavaScript, ki se ga odločite uporabiti za svoj projekt. Morali boste imeti konfiguriran prevajalnik JavaScript, kot je Babel, da bo obravnaval vse vrste tokov v vaši kodi in jo prevedel v neobičajni JavaScript.
Če želite namestiti Flow v svoj projekt, zaženite naslednji ukaz:
preje dodajte --dev flow-bin
Nato bi morali globalno namestiti vmesnik ukazne vrstice Flow. Ta CLI ponuja več ukazov za gradnjo pretočnih aplikacij.
V sistemu macOS uporabite Homebrew za namestitev Flow CLI:
zvarek namestite flow-cli
Moral boš vedeti kako uporabljati Windows PowerShell za namestitev Flow na računalnik z operacijskim sistemom Windows.
Če želite namestiti Flow CLI v Windows, zaženite ta skript v terminalu PowerShell:
npr "& { $(im '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Pretočni projekti zahtevajo a .flowconfig datoteko za vse potrebne konfiguracije orodja.
Zaženite ta ukaz, da ustvarite konfiguracijsko datoteko Flow v novem ali obstoječem projektu:
npm run flow init
Zavedajte se, da lahko določena ogrodja privzeto pošiljajo projekte s konfiguracijsko datoteko Flow.
Zadnja stvar, ki jo morate storiti, je, da dodate skript Flow v svoj package.json mapa:
"skripte": {
"tok": "tok"
},
Zdaj ste uspešno konfigurirali Flow za izvajanje v vaši aplikaciji JavaScript.
Nastavitev TypeScripta v vašem projektu
Zaženite naslednji ukaz, da namestite TypeScript v svoj projekt:
npm namestite tipkopis --save-dev
Prav tako bi morali namestiti prevajalnik za prevajanje kode TypeScript v jasen JavaScript. Morda boste tudi morali nastavite konfiguracijo TypeScript za boljši potek dela izkušnje.
Globalno namestite prevajalnik TypeScript s tem ukazom:
npm namestite -g tipkopis
Za inicializacijo a tsconfig.json konfiguracijsko datoteko, v svoj terminal vnesite naslednji ukaz:
tsc --v
Z zgornjimi navodili boste začeli uporabljati TypeScript v svojem projektu.
Gradnja s tokom
Če želite napisati kodo Flow v datoteko JavaScript, deklarirajte sintakso Flow na vrhu kode pred kakršnimi koli izrazi ali stavki:
// @flow
Podatkovne vrste spremenljivk in funkcij lahko nastavite z opombo. Flow bo nato sprožil napako, če pričakovani tip ni izpolnjen.
Na primer:
// @flow
let foo: število = "zdravo";
Flow bo tukaj sprožil napako, ker je pričakovana vrednost tipa foo je število, ne niz.
Teči npm run flow da vidite izpis napake v terminalu:
Če omogočite razširitev Flow znotraj katerega koli izbranega urejevalnika besedila, bodo med kodiranjem prikazane napake v urejevalniku.
Flow uporablja tudi sklepanje o vrsti, da določi, kakšna mora biti pričakovana vrednost izraza.
Na primer:
// @flow
funkcijonaredi kaj(vrednost) {
povratna vrednost * "zdravo";
};
pustiti rezultat = naredi nekaj(6);
Ne morete izvajati aritmetičnih operacij med številko šest in nizom zdravo.
Izhod iz npm run flow bo napaka:
Razvijanje s TypeScriptom
Sintaksa tipov TypeScript je zelo podobna sintaksi Flow. Tipe spremenljivk in funkcij lahko definirate z opombami tipa, tako kot bi to storili v Flow.
TypeScript je opremljen z več drugimi funkcijami, podobnimi Flowu, kot je sklepanje o vrsti.
Vzemite primer kode TypeScript:
// Typescript.ts
tip Rezultat = "prehod" | "spodleteti"
funkcijopreveriti(rezultat: Rezultat) {
če (rezultat "prehod") {
console.log("opravljeno")
} drugače {
console.log("Ni uspelo")
}
}
Lahko tečeš tsc Typescript.ts za prevajanje te kode v navaden JavaScript.
To bi bila ista koda TypeScript, prevedena v vanilla JavaScript:
funkcijopreveriti(rezultat) {
če (rezultat "prehod") {
console.log("opravljeno")
} drugače {
console.log("Ni uspelo")
}
}
Prednosti in slabosti TypeScript in Flow
Zdaj veste, kako začeti uporabljati obe orodji v vašem projektu JavaScript. Morali bi poznati prednosti in slabosti uporabe vsakega.
Integracija
Postopek nastavitve za uporabo Flow je nekoliko bolj zapleten v primerjavi s TypeScript. Nastaviti boste morali prevajalnik JavaScript, kot je Babel ali flow-remove-types, da iz svoje kode odstranite vrste tokov. TypeScript vključuje prevajalnik za pretvorbo kode TypeScript v JavaScript, kar olajša integracijo.
TypeScript ima veliko boljše orodje in večina ogrodij JavaScript ga privzeto podpira. Večina priljubljenih IDE nudi prvovrstno podporo za TypeScript. Flow je prav tako podprt, vendar zahteva poseben vtičnik.
Skupnost
Za razliko od Flowa, ogrodja JavaScript, kot so React, React Native, Vue in Angular, takoj podpirajo TypeScript.
To široko sprejetje in velika skupnost imata za posledico boljše učne vire, posodobitve in podporo orodij.
Prilagodljivost
Flow deluje kot preverjevalnik vrst, ki vas opozori na morebitno slabo kodo. TypeScript preprečuje pisanje slabe kode in ima strog tipski sistem. Podpira tudi TypeScript enkapsulacijo objektov, ki pomaga ohranjati kompleksno kodo obvladljivo. Flow te funkcije nima.
Storitve
TypeScript ponuja vse jezikovne storitve JavaScript, kot sta preoblikovanje kode in samodejno dokončanje. Flow je preverjevalnik statičnih vrst, ki zagotavlja globoko razumevanje in analizo vaše napisane kode.
Flow lahko obdela uvožene module in knjižnice vašega projekta ter ugotovi, kako vplivajo na vašo kodo. Na primer, lahko zazna in izda opozorilo, ko zahtevana knjižnica v vašem projektu manjka ali ko poskušate dostopati do definicije, ki ne obstaja.
Kateri statični preverjevalnik bi morali uporabiti?
Obstaja veliko veljavnih argumentov za uporabo vsakega orodja, ker ima vsako drugačne funkcije. Nekateri so lahko za enega razvijalca najvišje prioritete, za drugega pa nizke. Obe orodji delujeta dobro v svojih pogledih in nudita prednosti pri njuni uporabi.
Preučiti morate zahteve svojega projekta in se na podlagi njih odločiti.
