A JavaScript-eszközök Flow és TypeScript sok szempontból hasonlóak. Mindazonáltal eltérnek egymástól a funkcionalitásuk és statikus ellenőrző képességeik tekintetében.
Tudja meg, hogyan hasonlítja össze a Flow-t és a TypeScriptet, és melyik a legjobb statikus ellenőrző a következő projekthez.
Mi az Flow?
A Flow egy statikus típusellenőrző eszköz a JavaScripthez, amelyet a Facebook hozott létre a fordítási és futási kódhibák előzetes azonosítására. Ezt úgy éri el, hogy figyeli a kód által átadott értékeket és az adattípusok időbeli változását. Ez a statikus ellenőrző rendszer javítja a megbízhatóságot és az olvashatóságot. Ezenkívül segít csökkenteni a hibák előfordulását a JavaScript-kódban.
Mi az a TypeScript?
A TypeScript nem csak egy típusellenőrző, mint a Flow, hanem egy erősen tipizált programozási nyelv. A Microsoft létrehozta a nyelvet, a JavaScriptre építve.
Megállapodás szerint .ts kiterjesztésű TypeScript fájlokat kell létrehoznia. A TypeScript-fájlt JavaScript-kódba fordíthatja, így bárhol fut a JavaScript, a TypeScript is futhat.
Flow konfigurálása JavaScript-alkalmazásához
A Flow-t bármely JavaScript-keretrendszerbe integrálhatja, amelyet a projektjéhez használni szeretne. Be kell állítania egy JavaScript-fordítót, például a Babel-t, hogy kezelje a kódjában található összes folyamtípust, és fordítsa le vanilla JavaScript-be.
A Flow projektbe való telepítéséhez futtassa a következő parancsot:
fonal hozzá --dev flow-bin
Ezután globálisan telepítse a Flow parancssori felületet. Ez a parancssori felület számos parancsot biztosít a folyamatalkalmazások létrehozásához.
macOS rendszeren használja Homebrew a Flow CLI telepítéséhez:
sörfőzés telepítés flow-cli
Tudnia kell majd hogyan kell használni a Windows PowerShellt hogy telepítse a Flow-t Windows rendszerű gépre.
A Flow CLI Windows rendszeren való telepítéséhez futtassa ezt a szkriptet a PowerShell terminálon:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Flow projektek megkövetelik a .flowconfig fájlt az eszköz összes szükséges konfigurációjához.
Futtassa ezt a parancsot egy Flow konfigurációs fájl létrehozásához egy új vagy meglévő projektben:
npm run flow init
Ne feledje, hogy bizonyos keretrendszerek alapértelmezés szerint Flow konfigurációs fájllal szállítják a projekteket.
Az utolsó teendő az, hogy hozzáadja a Flow szkriptet a sajátjához package.json fájl:
"forgatókönyvek": {
"folyam": "folyam"
},
Sikeresen konfigurálta a Flow-t a JavaScript-alkalmazásban való futtatásra.
A TypeScript beállítása a projektben
Futtassa a következő parancsot a TypeScript telepítéséhez a projektben:
npm telepítés gépelt --save-dev
Ezenkívül telepítenie kell a fordítót, hogy a TypeScript kódot vanilla JavaScript-be fordítsa. Szükség lehet arra is állítsa be a TypeScript konfigurációt a jobb munkafolyamat érdekében tapasztalat.
Telepítse globálisan a TypeScript fordítót ezzel a paranccsal:
npm telepítés -g gépirat
Az inicializáláshoz a tsconfig.json config fájlba írja be a következő parancsot a termináljába:
tsc --benne
A fenti utasítások segítségével elkezdheti a TypeScript használatát a projektben.
Épület Flow-val
A folyamatkód JavaScript-fájlba írásához deklarálja a folyamat szintaxisát a kód tetején, mielőtt bármilyen kifejezést vagy utasítást tartalmazna:
// @folyam
Változó- és függvényadattípusokat állíthat be az annotáció segítségével. A Flow ezután hibát jelez, ha a várt típus nem teljesül.
Például:
// @folyam
let foo: szám = "Helló";
A Flow itt hibát fog dobni, mert a várható érték típusa foo szám, nem karakterlánc.
Fuss npm futási áramlás a terminál hibakimenetének megtekintéséhez:
Ha bármely szövegszerkesztőben engedélyezi a Flow bővítményt, akkor a kódolás közben megjelennek a szerkesztőben lévő hibák.
A Flow típuskövetkeztetést is használ annak meghatározására, hogy mi legyen egy kifejezés várható értéke.
Például:
// @folyam
funkciócsinálj valamit(érték) {
visszatérési érték * "Helló";
};
hagyja eredmény = doSomething(6);
A hatos szám és a karakterlánc között nem hajthat végre aritmetikai műveleteket Helló.
A kimenete npm futási áramlás hiba lesz:
Fejlesztés TypeScripttel
A TypeScript típusszintaxisa nagyon hasonlít a Flow-éhoz. Változó- és függvénytípusokat definiálhat a típusjegyzetekkel, akárcsak a Flow-ban.
A TypeScript számos egyéb, a Flow-hoz hasonló funkcióval rendelkezik, mint például a típuskövetkeztetés.
Vegyük a TypeScript-kód példáját:
// Typescript.ts
típus Eredmény = "pass" | "nem sikerül"
funkcióellenőrizni(eredmény: Eredmény) {
ha (eredmény "pass") {
console.log("Átment")
} más {
console.log("nem sikerült")
}
}
Futhatsz tsc Typescript.ts hogy ezt a kódot sima vanilla JavaScript-re fordítsuk.
Ez ugyanaz a TypeScript kód lenne, amely a vanilla JavaScript-be lett fordítva:
funkcióellenőrizni(eredmény) {
ha (eredmény "pass") {
console.log("Átment")
} más {
console.log("nem sikerült")
}
}
A TypeScript és a Flow előnyei és hátrányai
Most már tudja, hogyan kezdje el mindkét eszköz használatát JavaScript-projektjében. Ismernie kell mindegyik használatának előnyeit és hátrányait.
Integráció
A Flow használatának beállítási folyamata valamivel összetettebb, szemben a TypeScript-szel. Be kell állítania egy JavaScript-fordítót, például a Babel-t, vagy a flow-remove-types parancsot, hogy kivonja a folyamattípusokat a kódból. A TypeScript tartalmaz egy fordítót, amely a TypeScript kódot JavaScriptgé konvertálja, megkönnyítve az integrációt.
A TypeScript sokkal jobb szerszámokkal rendelkezik, és a legtöbb JavaScript-keretrendszer alapértelmezés szerint támogatja. A legtöbb népszerű IDE első osztályú támogatást nyújt a TypeScript számára. A Flow szintén támogatott, de speciális beépülő modult igényel.
Közösség
A Flow-val ellentétben a JavaScript-keretrendszerek, például a React, a React Native, a Vue és az Angular már a dobozból támogatják a TypeScript-et.
Ez a széles körben elterjedt alkalmazás és a nagy közösség jobb tanulási forrásokat, frissítéseket és eszköztámogatást eredményez.
Rugalmasság
A Flow típusellenőrzőként működik, amely figyelmeztet a potenciálisan rossz kódra. A TypeScript megakadályozza, hogy rossz kódot írjon, és szigorú típusrendszere van. A TypeScript is támogatja objektum-beágyazás, amely segít az összetett kód kezelhetővé tételében. A Flow nem rendelkezik ezzel a funkcióval.
Szolgáltatások
A TypeScript biztosítja az összes JavaScript nyelvi szolgáltatást, például a kódújrafeldolgozást és az automatikus kiegészítést. A Flow egy statikus típusellenőrző, amely az írott kód mély megértését és elemzését biztosítja.
A Flow a projekt importált moduljaira és könyvtáraira támaszkodhat, és felismerheti, hogyan hatnak ezek a kódra. Például képes észlelni és figyelmeztetést adni, ha a projektben hiányzik egy szükséges könyvtár, vagy ha nem létező definícióhoz próbál hozzáférni.
Melyik statikus ellenőrzőt érdemes használni?
Sok érvényes érv szól az egyes eszközök használata mellett, mert mindegyiknek más-más jellemzője van. Előfordulhat, hogy egyes fejlesztők elsőbbséget élveznek az egyik fejlesztő számára, és alacsony prioritást élveznek a másik számára. Mindkét eszköz jól működik a maga szempontjából, és előnyöket kínál a használatukhoz.
Meg kell vizsgálnia a projekt követelményeit, és ezek alapján megalapozott döntést kell hoznia.
