JavaScriptové nástroje Flow a TypeScript sú si v mnohých aspektoch podobné. Líšia sa však z hľadiska ich funkčnosti a schopností ako statických kontrolórov.
Zistite, ako sa porovnávajú Flow a TypeScript a ktorý je najlepší statický nástroj na kontrolu pre váš ďalší projekt.
Čo je tok?
Flow je nástroj na kontrolu statického typu pre JavaScript, ktorý vytvoril Facebook, aby vopred identifikoval chyby pri kompilácii a spustení kódu. Robí to monitorovaním hodnôt, ktoré váš kód odovzdáva, a toho, ako sa ich typy údajov časom menia. Tento systém statickej kontroly zlepšuje spoľahlivosť a čitateľnosť. Pomáha tiež znižovať výskyt chýb vo vašom kóde JavaScript.
Čo je TypeScript?
TypeScript nie je len typová kontrola, ako je Flow, ale silne typovaný programovací jazyk. Microsoft vytvoril jazyk a postavil ho na JavaScripte.
Podľa konvencie by ste mali vytvárať súbory TypeScript s príponou .ts. Súbor TypeScript môžete zostaviť do kódu JavaScript, takže kdekoľvek sa spustí JavaScript, môže sa spustiť aj TypeScript.
Konfigurácia toku pre vašu aplikáciu JavaScript
Flow môžete integrovať do akéhokoľvek rámca JavaScript, ktorý sa rozhodnete použiť pre svoj projekt. Budete musieť mať nakonfigurovaný kompilátor JavaScriptu, ako je Babel, aby spracoval všetky typy tokov vo vašom kóde a skompiloval ho do vanilkového JavaScriptu.
Ak chcete nainštalovať Flow vo svojom projekte, spustite nasledujúci príkaz:
pridať priadzu --dev flow-bin
Ďalej by ste mali globálne nainštalovať rozhranie príkazového riadka Flow. Toto CLI poskytuje niekoľko príkazov na vytváranie tokových aplikácií.
V systéme macOS použite Homebrew na inštaláciu Flow CLI:
variť Inštalácia prietok-cli
Budete to musieť vedieť ako používať prostredie Windows PowerShell na inštaláciu Flow na počítači so systémom Windows.
Ak chcete nainštalovať Flow CLI v systéme Windows, spustite tento skript v termináli PowerShell:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Tokové projekty vyžadujú a .flowconfig súbor pre všetky potrebné konfigurácie nástroja.
Spustite tento príkaz na vytvorenie konfiguračného súboru Flow v novom alebo existujúcom projekte:
npm run flow init
Uvedomte si, že špecifické rámce môžu štandardne dodávať projekty s konfiguračným súborom Flow.
Posledná vec, ktorú musíte urobiť, je pridať skript Flow do svojho package.json súbor:
"skripty": {
"tok": "tok"
},
Teraz ste úspešne nakonfigurovali Flow na spustenie vo vašej aplikácii JavaScript.
Nastavenie TypeScript vo vašom projekte
Spustite nasledujúci príkaz a nainštalujte TypeScript vo svojom projekte:
npm Inštalácia strojopis --save-dev
Mali by ste tiež nainštalovať kompilátor na kompiláciu kódu TypeScript do vanilla JavaScript. Možno budete musieť nastavte konfiguráciu TypeScript pre lepší pracovný postup skúsenosti.
Nainštalujte kompilátor TypeScript globálne pomocou tohto príkazu:
npm Inštalácia -g strojopis
Na inicializáciu a tsconfig.json konfiguračný súbor, zadajte do svojho terminálu nasledujúci príkaz:
tsc --init
Vyššie uvedené pokyny vám pomôžu začať používať TypeScript vo vašom projekte.
Budova s prietokom
Ak chcete napísať kód Flow do súboru JavaScript, deklarujte syntax Flow v hornej časti kódu pred akýmikoľvek výrazmi alebo príkazmi:
// @flow
Dátové typy premenných a funkcií môžete nastaviť pomocou anotácie. Tok potom vyvolá chybu, ak nie je splnený predpokladaný typ.
Napríklad:
// @flow
nech foo: číslo = "Ahoj";
Tok tu vyvolá chybu, pretože očakávaný typ hodnoty foo je číslo, nie reťazec.
Bežať npm beh prietoku aby ste videli chybový výstup v termináli:
Povolením rozšírenia Flow v ľubovoľnom textovom editore sa pri kódovaní zobrazia chyby vo vašom editore.
Flow tiež používa odvodenie typu na určenie očakávanej hodnoty výrazu.
Napríklad:
// @flow
funkciuurob niečo(hodnotu) {
návratová hodnota * "Ahoj";
};
nech výsledok = urobiť niečo(6);
Nemôžete vykonávať aritmetické operácie medzi číslom šesť a reťazcom Ahoj.
Výstup z npm beh prietoku bude chyba:
Vývoj pomocou TypeScript
Syntax typu TypeScript je veľmi podobná syntaxi Flow. Typy premenných a funkcií môžete definovať pomocou typovej anotácie rovnako ako vo Flow.
TypeScript sa dodáva s niekoľkými ďalšími funkciami podobnými Flow, ako je odvodenie typu.
Vezmite si príklad kódu TypeScript:
// Typescript.ts
typ Výsledok = "prejsť" | "zlyhať"
funkciuoveriť(výsledok: Výsledok) {
ak (výsledok "prejsť") {
console.log("Prešiel")
} inak {
console.log("Nepodarilo sa")
}
}
Môžete bežať tsc Typescript.ts skompilovať tento kód do obyčajného vanilkového JavaScriptu.
Toto by bol rovnaký kód TypeScript skompilovaný do vanilkového JavaScriptu:
funkciuoveriť(výsledok) {
ak (výsledok "prejsť") {
console.log("Prešiel")
} inak {
console.log("Nepodarilo sa")
}
}
Výhody a nevýhody TypeScript a Flow
Teraz viete, ako začať používať oba nástroje vo svojom projekte JavaScript. Mali by ste poznať výhody a nevýhody každého z nich.
integrácia
Proces nastavenia na používanie Flow je v porovnaní s TypeScriptom o niečo zložitejší. Na odstránenie typov tokov z kódu budete musieť nastaviť kompilátor JavaScriptu, ako je Babel alebo flow-remove-types. TypeScript obsahuje kompilátor na konverziu kódu TypeScript na JavaScript, čo uľahčuje integráciu.
TypeScript má oveľa lepšie nástroje a väčšina frameworkov JavaScript ho štandardne podporuje. Najpopulárnejšie IDE poskytujú prvotriednu podporu pre TypeScript. Flow je tiež podporovaný, ale vyžaduje špeciálny plug-in.
Spoločenstva
Na rozdiel od Flow, JavaScript frameworky ako React, React Native, Vue a Angular podporujú TypeScript hneď po vybalení.
Výsledkom tohto širokého prijatia a veľkej komunity sú lepšie vzdelávacie zdroje, aktualizácie a podpora nástrojov.
Flexibilita
Flow funguje ako typová kontrola, ktorá vás varuje pred potenciálne zlým kódom. TypeScript vám bráni písať zlý kód a má prísny typový systém. TypeScript tiež podporuje zapuzdrenie objektov, ktoré pomáha udržiavať komplexný kód spravovateľný. Flow túto funkciu nemá.
Služby
TypeScript poskytuje všetky služby jazyka JavaScript, ako je refaktorovanie kódu a automatické dokončovanie. Flow je statický typ kontroly, ktorý poskytuje hlboké pochopenie a analýzu vášho napísaného kódu.
Flow môže prejsť na importované moduly a knižnice vášho projektu a zistiť, ako ovplyvňujú váš kód. Môže napríklad zistiť a vygenerovať varovanie, keď vo vašom projekte chýba požadovaná knižnica alebo keď sa pokúsite získať prístup k definícii, ktorá neexistuje.
Ktorú statickú kontrolu by ste mali použiť?
Existuje veľa platných argumentov pre použitie každého nástroja, pretože každý má iné vlastnosti. Niektoré môžu mať najvyššiu prioritu pre jedného vývojára a nízku prioritu pre druhého. Oba nástroje fungujú dobre vo svojich vlastných ohľadoch a ponúkajú výhody pri ich používaní.
Mali by ste preskúmať požiadavky vášho projektu a na základe nich urobiť kvalifikované rozhodnutie.
