JavaScripti tööriistad Flow ja TypeScript on paljudes aspektides sarnased. Kuid need erinevad oma funktsionaalsuse ja staatilise kabe võime poolest.
Siit saate teada, kuidas Flow ja TypeScript võrreldavad ning milline on teie järgmise projekti jaoks parim staatiline kontrollija.
Mis on Flow?
Flow on JavaScripti staatiline tüübikontrolli tööriist, mille Facebook on loonud kompileerimis- ja käituskoodi vigade eelnevaks tuvastamiseks. See teeb seda, jälgides väärtusi, mida teie kood edastab ja kuidas nende andmetüübid aja jooksul muutuvad. See staatiline kontrollisüsteem parandab töökindlust ja loetavust. Samuti aitab see vähendada vigade esinemist teie JavaScripti koodis.
Mis on TypeScript?
TypeScript ei ole lihtsalt tüübikontroll, nagu Flow, vaid tugevasti trükitud programmeerimiskeel. Microsoft lõi keele, ehitades selle JavaScripti peale.
Tavapäraselt peaksite looma TypeScript-failid faililaiendiga ts. TypeScripti faili saate kompileerida JavaScripti koodiks, nii et kõikjal, kus JavaScript töötab, saab töötada ka TypeScript.
Voo seadistamine teie JavaScripti rakenduse jaoks
Saate integreerida Flow mis tahes JavaScripti raamistikku, mida otsustate oma projekti jaoks kasutada. Peate olema konfigureerinud JavaScripti kompilaatori, nagu Babel, et käsitleda kõiki teie koodi vootüüpe ja kompileerida see vanilje JavaScriptiks.
Flow oma projekti installimiseks käivitage järgmine käsk:
lisa lõng --dev flow-bin
Järgmisena peaksite installima Flow käsurea liidese globaalselt. See CLI pakub mitmeid käske voorakenduste loomiseks.
MacOS-is kasutage Kodupruul Flow CLI installimiseks:
pruulima installida flow-cli
Te peate teadma kuidas kasutada Windows PowerShelli Flow installimiseks Windowsi masinasse.
Flow CLI installimiseks Windowsis käivitage see skript oma PowerShelli terminalis:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Vooluprojektid nõuavad a .flowconfig faili kõigi vajalike tööriista konfiguratsioonide jaoks.
Käivitage see käsk, et luua uues või olemasolevas projektis voo konfiguratsioonifail:
npm käivitusvoolu init
Pidage meeles, et teatud raamistikud võivad vaikimisi tarnida projekte Flow konfiguratsioonifailiga.
Viimane asi, mida teha, on lisada oma voo skript package.json fail:
"skriptid": {
"voolu": "voolu"
},
Olete nüüd edukalt konfigureerinud Flow oma JavaScripti rakenduses käitamiseks.
TypeScripti seadistamine oma projektis
TypeScripti installimiseks oma projekti käivitage järgmine käsk:
npm installida masinakiri --save-dev
Samuti peaksite installima kompilaatori, et kompileerida TypeScripti kood vanilje JavaScripti. Teil võib tekkida vajadus ka parema töövoo jaoks seadistage TypeScripti konfiguratsioon kogemusi.
Installige TypeScripti kompilaator globaalselt selle käsuga:
npm installida -g masinakiri
Initsialiseerimiseks a tsconfig.json konfiguratsioonifail, sisestage oma terminali järgmine käsk:
tsc --selles
Ülaltoodud juhised aitavad teil projektis TypeScripti kasutama hakata.
Vooluga ehitamine
JavaScripti faili vookoodi kirjutamiseks deklareerige enne mis tahes avaldisi või avaldusi koodi ülaosas voo süntaks:
// @flow
Annotatsiooni abil saate määrata muutujate ja funktsioonide andmetüüpe. Voog tekitab veateate, kui eeldatav tüüp ei ole täidetud.
Näiteks:
// @flow
let foo: number = "Tere";
Voog kuvab siin vea, kuna eeldatav väärtuse tüüp foo on arv, mitte string.
Jookse npm jooksev vool terminalis veaväljundi nägemiseks:
Flow laienduse lubamine mis tahes valitud tekstiredaktoris kuvab teie redaktoris olevad vead koodi sisestamisel.
Voog kasutab ka tüübijäreldust, et määrata, milline peaks olema avaldise eeldatav väärtus.
Näiteks:
// @flow
funktsioonitee midagi(väärtus) {
tagastatav väärtus * "Tere";
};
lase tulemus = doSomething(6);
Te ei saa teostada aritmeetilisi tehteid arvu kuue ja stringi vahel Tere.
Väljund npm jooksev vool tuleb viga:
Arendamine TypeScriptiga
TypeScripti tüübisüntaks on väga sarnane Flow omaga. Muutujate ja funktsioonide tüüpe saate määratleda tüübimärkusega täpselt nii, nagu teeksite seda funktsiooni Flow puhul.
TypeScriptil on mitmeid muid Flow'ga sarnaseid funktsioone, näiteks tüübi järeldamine.
Võtke näiteks TypeScripti kood:
// Typescript.ts
tüüp Tulemus = "üle andma" | "ebaõnnestuda"
funktsioonikontrollida(tulemus: tulemus) {
kui (tulemus "üle andma") {
console.log("Läbitud")
} muidu {
console.log("Ebaõnnestunud")
}
}
Sa võid joosta tsc Typescript.ts selle koodi kompileerimiseks tavaliseks vanilje JavaScriptiks.
See oleks sama TypeScripti kood, mis on kompileeritud vanilje JavaScripti:
funktsioonikontrollida(tulemus) {
kui (tulemus "üle andma") {
console.log("Läbitud")
} muidu {
console.log("Ebaõnnestunud")
}
}
TypeScripti ja Flow plussid ja miinused
Nüüd teate, kuidas alustada mõlema tööriista kasutamist oma JavaScripti projektis. Peaksite teadma igaühe kasutamise plusse ja miinuseid.
Integratsioon
Flow kasutamise häälestusprotsess on TypeScriptist erinevalt mõnevõrra keerulisem. Vootüüpide koodist eemaldamiseks peate seadistama JavaScripti kompilaatori (nt Babel) või voo eemaldamise tüübid. TypeScript sisaldab kompilaatorit TypeScripti koodi teisendamiseks JavaScriptiks, muutes integreerimise lihtsamaks.
TypeScriptil on palju paremad tööriistad ja enamik JavaScripti raamistikke toetab seda vaikimisi. Enamik populaarseid IDE-sid pakuvad TypeScripti esmaklassilist tuge. Flow on samuti toetatud, kuid nõuab spetsiaalset pistikprogrammi.
kogukond
Erinevalt Flow'st toetavad JavaScripti raamistikud nagu React, React Native, Vue ja Angular TypeScripti karbist välja.
Selle laialdase kasutuselevõtu ja suure kogukonna tulemuseks on paremad õpperessursid, värskendused ja tööriistade tugi.
Paindlikkus
Flow toimib tüübikontrollina, mis hoiatab teid potentsiaalselt halva koodi eest. TypeScript ei lase sul kirjutada halba koodi ja sellel on range tüübisüsteem. Samuti toetab TypeScript objektide kapseldamine, mis aitab hoida keerulist koodi hallatavana. Flow'l seda funktsiooni pole.
Teenused
TypeScript pakub kõiki JavaScripti keeleteenuseid, nagu koodi ümberkujundamine ja automaatne lõpetamine. Flow on staatiline tüübikontroll, mis annab teie kirjutatud koodi sügava mõistmise ja analüüsi.
Flow võib töötada kuni teie projekti imporditud moodulite ja teekideni ning tuvastada, kuidas need teie koodi mõjutavad. Näiteks võib see tuvastada ja anda hoiatuse, kui teie projektis puudub nõutav teek või kui proovite pääseda juurde definitsioonile, mida pole olemas.
Millist staatilist kontrollijat peaksite kasutama?
Iga tööriista kasutamiseks on palju põhjendatud argumente, kuna igal tööriistal on erinevad omadused. Mõned neist võivad olla ühele arendajale esmatähtsad ja teisele madala prioriteediga. Mõlemad tööriistad töötavad omal moel hästi ja pakuvad nende kasutamisel eeliseid.
Peaksite uurima oma projekti nõudeid ja tegema nende põhjal teadliku otsuse.
