JavaScript rīki Flow un TypeScript ir līdzīgi daudzos aspektos. Tomēr tie atšķiras pēc to funkcionalitātes un spējām kā statiski pārbaudītāji.
Uzziniet, kā Flow un TypeScript salīdzina un kurš ir labākais statiskais pārbaudītājs jūsu nākamajam projektam.
Kas ir plūsma?
Flow ir statiskā tipa pārbaudes rīks JavaScript, ko izveidojis Facebook, lai iepriekš identificētu kompilēšanas un izpildes koda kļūdas. Tas tiek darīts, pārraugot vērtības, ko jūsu kods nodod, un to, kā laika gaitā mainās to datu veidi. Šī statiskā pārbaudes sistēma uzlabo uzticamību un lasāmību. Tas arī palīdz samazināt kļūdu rašanos jūsu JavaScript kodā.
Kas ir TypeScript?
TypeScript ir ne tikai tipa pārbaudītājs, piemēram, Flow, bet arī stingri drukāta programmēšanas valoda. Microsoft izveidoja valodu, veidojot to uz JavaScript.
Parasti ir jāizveido TypeScript faili ar .ts faila paplašinājumu. TypeScript failu var apkopot JavaScript kodā, tāpēc visur, kur darbojas JavaScript, var palaist arī TypeScript.
Plūsmas konfigurēšana jūsu JavaScript lietojumprogrammai
Varat integrēt Flow jebkurā JavaScript ietvarā, kuru nolemjat izmantot savam projektam. Jums ir jābūt konfigurētam JavaScript kompilatoram, piemēram, Babel, lai apstrādātu visus plūsmas veidus jūsu kodā un kompilētu to vaniļas JavaScript formātā.
Lai projektā instalētu Flow, palaidiet šādu komandu:
dziju pievienot --dev flow-bin
Pēc tam jums ir jāinstalē Flow komandrindas saskarne globāli. Šis CLI nodrošina vairākas komandas plūsmas lietojumprogrammu veidošanai.
Operētājsistēmā macOS izmantojiet Homebrew lai instalētu Flow CLI:
brūvēt uzstādīt plūsma-kli
Jums būs jāzina kā lietot Windows PowerShell lai instalētu Flow Windows datorā.
Lai instalētu Flow CLI operētājsistēmā Windows, palaidiet šo skriptu savā PowerShell terminālī:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Plūsmas projektiem ir nepieciešams a .flowconfig failu visām nepieciešamajām rīka konfigurācijām.
Palaidiet šo komandu, lai izveidotu plūsmas konfigurācijas failu jaunā vai esošā projektā:
npm palaišanas plūsmas init
Ņemiet vērā, ka konkrēti ietvari var piegādāt projektus ar Flow konfigurācijas failu pēc noklusējuma.
Pēdējā lieta, kas jādara, ir pievienot plūsmas skriptu savam pack.json fails:
"skripti": {
"plūsma": "plūsma"
},
Tagad esat veiksmīgi konfigurējis Flow, lai tas darbotos jūsu JavaScript lietojumprogrammā.
TypeScript iestatīšana jūsu projektā
Palaidiet šo komandu, lai projektā instalētu TypeScript:
npm uzstādīt mašīnrakstā --save-dev
Jums vajadzētu arī instalēt kompilatoru, lai kompilētu TypeScript kodu vaniļas JavaScript. Jums var būt arī nepieciešams iestatiet TypeScript konfigurāciju labākai darbplūsmai pieredze.
Instalējiet TypeScript kompilatoru globāli ar šo komandu:
npm uzstādīt -g mašīnrakstā
Lai inicializētu a tsconfig.json konfigurācijas failu, terminālī ievadiet šādu komandu:
tsc --tajā
Iepriekš sniegtie norādījumi ļaus jums sākt lietot TypeScript savā projektā.
Ēka ar plūsmu
Lai JavaScript failā ierakstītu plūsmas kodu, koda augšdaļā pirms izteiksmēm vai priekšrakstiem deklarējiet plūsmas sintaksi:
// @flow
Varat iestatīt mainīgo un funkciju datu tipus, izmantojot anotāciju. Ja paredzētais veids netiks izpildīts, plūsma parādīs kļūdu.
Piemēram:
// @flow
let foo: skaitlis = "Sveiki";
Flow šeit parādīs kļūdu, jo paredzamās vērtības veids foo ir skaitlis, nevis virkne.
Skrien npm darbības plūsma lai redzētu kļūdas izvadi terminālī:
Iespējojot paplašinājumu Flow jebkurā izvēlētajā teksta redaktorā, kodēšanas laikā tiks parādītas redaktora kļūdas.
Flow izmanto arī tipa secinājumus, lai noteiktu, kādai jābūt izteiksmes paredzamajai vērtībai.
Piemēram:
// @flow
funkcijudari kaut ko(vērtību) {
atgriešanas vērtība* "Sveiki";
};
ļaut rezultāts = doSomething (6);
Jūs nevarat izpildīt aritmētiskās darbības starp skaitli seši un virkni Sveiki.
Izvade no npm darbības plūsma būs kļūda:
Izstrāde ar TypeScript
TypeScript tipa sintakse ir ļoti līdzīga Flow tipa sintakse. Varat definēt mainīgo un funkciju veidus ar tipa anotāciju tāpat kā plūsmā.
TypeScript tiek piegādāts ar vairākām citām funkcijām, kas ir līdzīgas Flow, piemēram, tipa secinājums.
Izmantojiet TypeScript koda piemēru:
// Mašīnraksts.ts
tips Rezultāts = "caurlaide" | "neizdoties"
funkcijupārbaudīt(rezultāts: Rezultāts) {
ja (rezultāts "caurlaide") {
console.log("Nokārtots")
} cits {
console.log("Neizdevās")
}
}
Tu vari skriet tsc Typescript.ts lai apkopotu šo kodu vienkāršā vaniļas JavaScript.
Tas būtu tas pats TypeScript kods, kas apkopots vaniļas JavaScript:
funkcijupārbaudīt(rezultāts) {
ja (rezultāts "caurlaide") {
console.log("Nokārtots")
} cits {
console.log("Neizdevās")
}
}
TypeScript un Flow plusi un mīnusi
Tagad jūs zināt, kā sākt izmantot abus rīkus savā JavaScript projektā. Jums jāzina katra izmantošanas plusi un mīnusi.
Integrācija
Iestatīšanas process, lai izmantotu Flow, ir nedaudz sarežģītāks, salīdzinot ar TypeScript. Jums būs jāiestata JavaScript kompilators, piemēram, Babel vai flow-remove-types, lai no koda izņemtu plūsmas veidus. TypeScript ir iekļauts kompilators TypeScript koda konvertēšanai uz JavaScript, padarot integrāciju vieglāku.
TypeScript ir daudz labāki rīki, un lielākā daļa JavaScript ietvaru to atbalsta pēc noklusējuma. Lielākā daļa populārāko IDE nodrošina pirmās klases atbalstu TypeScript. Tiek atbalstīta arī plūsma, taču tam ir nepieciešams īpašs spraudnis.
kopiena
Atšķirībā no Flow, JavaScript ietvari, piemēram, React, React Native, Vue un Angular, atbalsta TypeScript.
Šīs plašās ieviešanas un lielās kopienas rezultāts ir labāki mācību resursi, atjauninājumi un rīku atbalsts.
Elastīgums
Flow darbojas kā tipa pārbaudītājs, kas darbojas, lai brīdinātu par potenciāli sliktu kodu. TypeScript neļauj rakstīt sliktu kodu, un tam ir stingra tipa sistēma. Atbalsta arī TypeScript objektu iekapsulēšana, kas palīdz uzturēt sarežģītu kodu pārvaldāmu. Flow nav šīs funkcijas.
Pakalpojumi
TypeScript nodrošina visus JavaScript valodas pakalpojumus, piemēram, koda refaktorēšanu un automātisko pabeigšanu. Flow ir statiska tipa pārbaudītājs, kas nodrošina dziļu jūsu rakstītā koda izpratni un analīzi.
Flow var darboties līdz jūsu projekta importētajiem moduļiem un bibliotēkām un noteikt, kā tie ietekmē jūsu kodu. Piemēram, tas var noteikt un parādīt brīdinājumu, ja jūsu projektā trūkst vajadzīgās bibliotēkas vai kad mēģināt piekļūt definīcijai, kas neeksistē.
Kuru statisko pārbaudītāju vajadzētu izmantot?
Katra rīka izmantošanai ir daudz pamatotu argumentu, jo katram ir dažādas funkcijas. Daži no tiem var būt viena izstrādātāja galvenā prioritāte, bet otram - zemas prioritātes. Abi rīki savā ziņā darbojas labi un piedāvā priekšrocības to lietošanai.
Jums vajadzētu izpētīt sava projekta prasības un, pamatojoties uz tām, pieņemt izglītotu lēmumu.
