JavaScript alati Flow i TypeScript slični su u mnogim aspektima. Međutim, razlikuju se s obzirom na njihovu funkcionalnost i sposobnosti kao statičke dame.
Saznajte kako se uspoređuju Flow i TypeScript i koji je najbolji statički alat za provjeru za vaš sljedeći projekt.
Što je tok?
Flow je alat za provjeru statičnog tipa za JavaScript, koji je kreirao Facebook kako bi unaprijed identificirao pogreške koda kompajliranja i izvođenja. To čini praćenjem vrijednosti koje vaš kod prolazi i kako se njihove vrste podataka mijenjaju tijekom vremena. Ovaj sustav statičke provjere poboljšava pouzdanost i čitljivost. Također pomaže smanjiti pojavu grešaka u vašem JavaScript kodu.
Što je TypeScript?
TypeScript nije samo provjera tipa, poput Flowa, već programski jezik sa strogim tipovima. Microsoft je stvorio jezik, izgradivši ga na JavaScriptu.
Prema konvenciji, trebali biste stvoriti TypeScript datoteke s ekstenzijom datoteke .ts. Možete prevesti TypeScript datoteku u JavaScript kod, tako da gdje god se JavaScript izvodi, TypeScript također može raditi.
Konfiguriranje protoka za vašu JavaScript aplikaciju
Možete integrirati Flow u bilo koji JavaScript okvir koji odlučite koristiti za svoj projekt. Morat ćete konfigurirati JavaScript kompilator kao što je Babel za rukovanje svim tipovima toka u vašem kodu i kompajlirati ga u vanilin JavaScript.
Da biste instalirali Flow u svoj projekt, pokrenite sljedeću naredbu:
pređe dodati --dev flow-bin
Zatim biste trebali globalno instalirati sučelje naredbenog retka Flow. Ovaj CLI pruža nekoliko naredbi za izgradnju tokovnih aplikacija.
Na macOS-u koristite Domaće pivo za instaliranje Flow CLI:
skuhati instalirati protok-cli
Morat ćete znati kako koristiti Windows PowerShell kako biste instalirali Flow na Windows stroj.
Da biste instalirali Flow CLI na Windows, pokrenite ovu skriptu na svom PowerShell terminalu:
npr "& { $(im '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Protočni projekti zahtijevaju a .flowconfig datoteku za sve potrebne konfiguracije alata.
Pokrenite ovu naredbu za stvaranje Flow konfiguracijske datoteke u novom ili postojećem projektu:
npm run flow init
Imajte na umu da određeni okviri mogu isporučivati projekte s Flow konfiguracijskom datotekom prema zadanim postavkama.
Zadnje što trebate učiniti je dodati Flow skriptu u vaš paket.json datoteka:
"skripte": {
"teći": "teći"
},
Sada ste uspješno konfigurirali Flow za rad u vašoj JavaScript aplikaciji.
Postavljanje TypeScripta u vašem projektu
Pokrenite sljedeću naredbu da instalirate TypeScript u svoj projekt:
npm instalirati strojopis --save-dev
Također biste trebali instalirati kompajler za kompajliranje TypeScript koda u vanilla JavaScript. Možda ćete također trebati postavite TypeScript konfiguraciju za bolji tijek rada iskustvo.
Instalirajte TypeScript kompilator globalno ovom naredbom:
npm instalirati -g strojopis
Za pokretanje a tsconfig.json konfiguracijsku datoteku, unesite sljedeću naredbu u svoj terminal:
tsc --u tome
Gore navedene upute pomoći će vam da počnete koristiti TypeScript u svom projektu.
Gradnja s protokom
Da biste napisali Flow kod u JavaScript datoteku, deklarirajte Flow sintaksu na vrhu koda prije bilo kakvih izraza ili izjava:
// @teći
Pomoću primjedbi možete postaviti varijable i tipove podataka funkcija. Protok će tada pokrenuti pogrešku ako predviđeni tip nije ispunjen.
Na primjer:
// @teći
pusti foo: broj = "zdravo";
Protok će ovdje izbaciti pogrešku jer je očekivana vrijednost tipa fuj je broj, a ne niz.
Trčanje npm run flow da vidite izlaz pogreške u terminalu:
Omogućavanje proširenja Flow unutar bilo kojeg uređivača teksta po izboru prikazat će pogreške u uređivaču dok kodirate.
Flow također koristi zaključak tipa kako bi odredio što bi trebala biti očekivana vrijednost izraza.
Na primjer:
// @teći
funkcijaučini nešto(vrijednost) {
povratna vrijednost * "zdravo";
};
neka rezultat = učini nešto(6);
Ne možete izvršiti aritmetičke operacije između broja šest i niza zdravo.
Izlaz iz npm run flow bit će greška:
Razvoj s TypeScriptom
Sintaksa tipa TypeScripta vrlo je slična Flowovoj. Možete definirati tipove varijabli i funkcija s oznakom tipa baš kao što biste to učinili u Flowu.
TypeScript se isporučuje s nekoliko drugih značajki sličnih Flowu, poput zaključivanja tipa.
Uzmimo primjer TypeScript koda:
// Typescript.ts
tip Rezultat = "proći" | "iznevjeriti"
funkcijapotvrditi(rezultat: Rezultat) {
ako (rezultat "proći") {
console.log("Prošao")
} drugo {
console.log("Neuspjeh")
}
}
Možete trčati tsc Tipkopis.ts da prevede ovaj kod u običan JavaScript.
Ovo bi bio isti TypeScript kod kompajliran u vanilla JavaScript:
funkcijapotvrditi(proizlaziti) {
ako (rezultat "proći") {
console.log("Prošao")
} drugo {
console.log("Neuspjeh")
}
}
Za i protiv TypeScripta i Flowa
Sada znate kako početi koristiti oba alata u svom JavaScript projektu. Trebali biste znati prednosti i mane svakog od njih.
Integracija
Proces postavljanja za korištenje Flowa nešto je složeniji za razliku od TypeScripta. Morat ćete postaviti JavaScript kompilator kao što je Babel ili flow-remove-types kako biste uklonili vrste toka iz svog koda. TypeScript uključuje kompilator za pretvaranje TypeScript koda u JavaScript, što olakšava integraciju.
TypeScript ima mnogo bolji alat i većina JavaScript okvira podržava ga prema zadanim postavkama. Većina popularnih IDE-a pruža prvoklasnu podršku za TypeScript. Flow je također podržan, ali zahtijeva poseban dodatak.
Zajednica
Za razliku od Flowa, JavaScript okviri kao što su React, React Native, Vue i Angular podržavaju TypeScript odmah.
Ovo široko usvajanje i velika zajednica rezultiraju boljim resursima za učenje, ažuriranjima i podrškom za alate.
Fleksibilnost
Flow djeluje kao provjera tipa koja vas upozorava na potencijalno loš kod. TypeScript sprječava pisanje lošeg koda i ima strogi sustav tipova. TypeScript također podržava enkapsulacija objekata, koja pomaže da složeni kod bude upravljiv. Flow nema ovu značajku.
Usluge
TypeScript pruža sve usluge jezika JavaScript, poput refaktoriranja koda i automatskog dovršavanja. Flow je statički alat za provjeru tipa koji pruža duboko razumijevanje i analizu vašeg pisanog koda.
Flow može raditi na uvezenim modulima i bibliotekama vašeg projekta i razlučiti kako oni utječu na vaš kod. Na primjer, može detektirati i izbaciti upozorenje kada potrebna biblioteka u vašem projektu nedostaje ili kada pokušate pristupiti definiciji koja ne postoji.
Koji statički alat za provjeru trebate koristiti?
Postoji mnogo valjanih argumenata za korištenje svakog alata jer svaki ima različite značajke. Neki mogu imati najviši prioritet za jednog programera, a niski za drugog. Oba alata dobro funkcioniraju sama po sebi i nude prednosti za njihovo korištenje.
Trebali biste ispitati zahtjeve svog projekta i na temelju njih donijeti obrazovanu odluku.