„JavaScript“ įrankiai „Flow“ ir „TypeScript“ yra panašūs daugeliu aspektų. Tačiau jie skiriasi savo funkcionalumu ir galimybėmis kaip statinės šaškės.
Sužinokite, kaip lygina „Flow“ ir „TypeScript“ ir kuris yra geriausias statinis tikrintuvas kitam projektui.
Kas yra Srautas?
„Flow“ yra statinis „JavaScript“ tipo tikrinimo įrankis, sukurtas „Facebook“, kad iš anksto nustatytų kompiliavimo ir vykdymo kodo klaidas. Tai daroma stebint reikšmes, kurias perduoda jūsų kodas, ir kaip laikui bėgant keičiasi jų duomenų tipai. Ši statinė tikrinimo sistema pagerina patikimumą ir skaitomumą. Tai taip pat padeda sumažinti klaidų atsiradimą „JavaScript“ kode.
Kas yra TypeScript?
„TypeScript“ yra ne tik tipo tikrintuvas, kaip „Flow“, bet ir stipriai spausdinama programavimo kalba. „Microsoft“ sukūrė kalbą, kurdama ją „JavaScript“.
Pagal susitarimą turėtumėte sukurti „TypeScript“ failus su .ts failo plėtiniu. Galite kompiliuoti „TypeScript“ failą į „JavaScript“ kodą, todėl visur, kur veikia „JavaScript“, gali veikti ir „TypeScript“.
Srauto konfigūravimas jūsų „JavaScript“ programai
Galite integruoti „Flow“ į bet kurią „JavaScript“ sistemą, kurią nuspręsite naudoti savo projektui. Turėsite sukonfigūruoti „JavaScript“ kompiliatorių, pvz., „Babel“, kad galėtumėte apdoroti visus srauto tipus jūsų kode ir sukompiliuoti jį į „vanilla JavaScript“.
Norėdami įdiegti „Flow“ savo projekte, paleiskite šią komandą:
verpalų pridėti --dev flow-bin
Tada turėtumėte įdiegti „Flow“ komandų eilutės sąsają visame pasaulyje. Šis CLI pateikia keletą komandų srauto programoms kurti.
„MacOS“ naudokite Homebrew Norėdami įdiegti „Flow CLI“:
užvirinti diegti srautas-kli
Jums reikės žinoti kaip naudoti „Windows PowerShell“. norėdami įdiegti „Flow“ „Windows“ įrenginyje.
Norėdami įdiegti „Flow CLI“ sistemoje „Windows“, paleiskite šį scenarijų „PowerShell“ terminale:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Srauto projektams reikia a .flowconfig failą visoms būtinoms įrankio konfigūracijoms.
Vykdykite šią komandą, kad sukurtumėte srauto konfigūracijos failą naujame arba esamame projekte:
npm paleidimo srautas init
Atminkite, kad pagal numatytuosius nustatymus konkrečios sistemos gali pristatyti projektus su „Flow“ konfigūracijos failu.
Paskutinis dalykas, kurį reikia padaryti, yra pridėti srauto scenarijų package.json failas:
"scenarijus": {
"srautas": "srautas"
},
Dabar sėkmingai sukonfigūravote „Flow“, kad jis veiktų „JavaScript“ programoje.
„TypeScript“ nustatymas jūsų projekte
Vykdykite šią komandą, kad įdiegtumėte „TypeScript“ savo projekte:
npm diegti mašinraštis --save-dev
Taip pat turėtumėte įdiegti kompiliatorių, kad sukompiliuotumėte TypeScript kodą į „vanilla JavaScript“. Taip pat gali prireikti nustatykite „TypeScript“ konfigūraciją, kad darbo eiga būtų geresnė patirtį.
Įdiekite „TypeScript“ kompiliatorių visame pasaulyje naudodami šią komandą:
npm diegti -g mašinraštis
Norėdami inicijuoti a tsconfig.json config failą, įveskite šią komandą į savo terminalą:
tsc --init
Aukščiau pateiktos instrukcijos padės jums pradėti naudoti „TypeScript“ savo projekte.
Statyba su srautu
Norėdami rašyti srauto kodą „JavaScript“ faile, kodo viršuje prieš bet kokias išraiškas ar teiginius nurodykite srauto sintaksę:
// @flow
Naudodami anotaciją galite nustatyti kintamųjų ir funkcijų duomenų tipus. Tada srautas sukels klaidą, jei nesilaikoma numatyto tipo.
Pavyzdžiui:
// @flow
tegul foo: skaičius = "Sveiki";
Srautas čia parodys klaidą, nes numatomos vertės tipas foo yra skaičius, o ne eilutė.
Bėk npm eigos srautas Norėdami pamatyti klaidos išvestį terminale:
Įgalinus plėtinį „Flow“ bet kurioje pasirinktoje teksto rengyklėje, koduojant bus rodomos redaktoriaus klaidos.
Flow taip pat naudoja tipo išvadą, kad nustatytų, kokia turėtų būti numatoma išraiškos reikšmė.
Pavyzdžiui:
// @flow
funkcijapadaryti ką nors(vertė) {
grąžinimo vertė * "Sveiki";
};
leisti rezultatas = doSomething (6);
Negalite atlikti aritmetinių operacijų tarp skaičiaus šeši ir eilutės Sveiki.
Išvestis npm eigos srautas bus klaida:
Kūrimas naudojant TypeScript
„TypeScript“ tipo sintaksė yra labai panaši į „Flow“. Galite apibrėžti kintamųjų ir funkcijų tipus naudodami tipo anotaciją taip pat, kaip tai darytumėte sraute.
„TypeScript“ pateikiama su keliomis kitomis funkcijomis, panašiomis į „Flow“, pvz., tipo išvada.
Paimkite „TypeScript“ kodo pavyzdį:
// Mašinraštis.ts
tipas Rezultatas = "praeiti" | "nepavyks"
funkcijapatikrinti(rezultatas: Rezultatas) {
jei (rezultatas "praeiti") {
console.log("Praėjo")
} Kitas {
console.log("Nepavyko")
}
}
Galite bėgti tsc Typescript.ts Norėdami sukompiliuoti šį kodą į paprastą „JavaScript“.
Tai būtų tas pats „TypeScript“ kodas, sudarytas į „vanilla JavaScript“:
funkcijapatikrinti(rezultatas) {
jei (rezultatas "praeiti") {
console.log("Praėjo")
} Kitas {
console.log("Nepavyko")
}
}
„TypeScript“ ir „Flow“ privalumai ir trūkumai
Dabar žinote, kaip pradėti naudoti abu įrankius savo „JavaScript“ projekte. Turėtumėte žinoti kiekvieno naudojimo privalumus ir trūkumus.
Integracija
Sąrankos procesas norint naudoti „Flow“ yra šiek tiek sudėtingesnis nei „TypeScript“. Turėsite nustatyti „JavaScript“ kompiliatorių, pvz., „Babel“, arba „flow-remove-types“, kad pašalintumėte srauto tipus iš kodo. „TypeScript“ apima kompiliatorių, skirtą „TypeScript“ kodui konvertuoti į „JavaScript“, kad būtų lengviau integruoti.
„TypeScript“ turi daug geresnius įrankius, o dauguma „JavaScript“ sistemų palaiko juos pagal numatytuosius nustatymus. Dauguma populiariausių IDE teikia aukščiausios klasės „TypeScript“ palaikymą. Srautas taip pat palaikomas, tačiau tam reikalingas specialus papildinys.
bendruomenė
Skirtingai nei „Flow“, „JavaScript“ sistemos, tokios kaip „React“, „React Native“, „Vue“ ir „Angular“, palaiko „TypeScript“.
Dėl šio plačiai paplitusio pritaikymo ir didelės bendruomenės gaunami geresni mokymosi ištekliai, atnaujinimai ir įrankių palaikymas.
Lankstumas
„Flow“ veikia kaip tipo tikrintuvas, įspėjantis apie galimai blogą kodą. „TypeScript“ neleidžia rašyti blogo kodo ir turi griežtą tipų sistemą. „TypeScript“ taip pat palaiko objektų inkapsuliacija, kuri padeda valdyti sudėtingą kodą. „Flow“ šios funkcijos neturi.
Paslaugos
„TypeScript“ teikia visas „JavaScript“ kalbos paslaugas, pvz., kodo keitimą ir automatinį užbaigimą. „Flow“ yra statinis tipo tikrintuvas, leidžiantis giliai suprasti ir analizuoti jūsų parašytą kodą.
„Flow“ gali dirbti iki jūsų projekto importuotų modulių ir bibliotekų ir nustatyti, kaip jie veikia jūsų kodą. Pavyzdžiui, jis gali aptikti ir pateikti įspėjimą, kai projekte trūksta reikiamos bibliotekos arba kai bandote pasiekti neegzistuojančią apibrėžimą.
Kurį statinį tikrintuvą turėtumėte naudoti?
Yra daug pagrįstų argumentų dėl kiekvieno įrankio naudojimo, nes kiekvienas turi skirtingas funkcijas. Kai kurie gali būti svarbiausi vienam kūrėjui, o žemas prioritetas kitam. Abu įrankiai puikiai veikia savaip ir turi pranašumų juos naudojant.
Turėtumėte išnagrinėti savo projekto reikalavimus ir jais remdamiesi priimti išsilavinusį sprendimą.
