JavaScriptové nástroje Flow a TypeScript jsou si v mnoha ohledech podobné. Liší se však svou funkčností a schopnostmi jako statická kontrola.
Zjistěte, jak se Flow a TypeScript porovnávají a který je nejlepší statický nástroj pro kontrolu vašeho dalšího projektu.
Co je Flow?
Flow je nástroj pro kontrolu statického typu pro JavaScript, který vytvořil Facebook, aby předem identifikoval chyby kompilace a běhu kódu. Dělá to sledováním hodnot, které váš kód předává, a toho, jak se jejich datové typy v průběhu času mění. Tento systém statické kontroly zlepšuje spolehlivost a čitelnost. Pomáhá také snížit výskyt chyb ve vašem kódu JavaScript.
Co je TypeScript?
TypeScript není jen typová kontrola, jako je Flow, ale silně typovaný programovací jazyk. Microsoft vytvořil jazyk a postavil jej na JavaScriptu.
Podle konvence byste měli vytvářet soubory TypeScript s příponou .ts. Soubor TypeScript můžete zkompilovat do kódu JavaScript, takže kdekoli běží JavaScript, může běžet i TypeScript.
Konfigurace toku pro vaši aplikaci JavaScript
Flow můžete integrovat do jakéhokoli rámce JavaScript, který se rozhodnete použít pro svůj projekt. Budete muset mít nakonfigurovaný kompilátor JavaScriptu, jako je Babel, aby zpracoval všechny typy toků ve vašem kódu a zkompiloval jej do vanilkového JavaScriptu.
Chcete-li nainstalovat Flow do svého projektu, spusťte následující příkaz:
přidat přízi --dev flow-bin
Dále byste měli globálně nainstalovat rozhraní příkazového řádku Flow. Toto CLI poskytuje několik příkazů pro vytváření aplikací toku.
V systému macOS použijte Homebrew k instalaci Flow CLI:
vařit Nainstalujte flow-cli
Budete to muset vědět jak používat prostředí Windows PowerShell k instalaci Flow na počítači se systémem Windows.
Chcete-li nainstalovat Flow CLI na Windows, spusťte tento skript v terminálu PowerShell:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Průtokové projekty vyžadují a .flowconfig soubor pro všechny potřebné konfigurace nástroje.
Spuštěním tohoto příkazu vytvoříte konfigurační soubor Flow v novém nebo existujícím projektu:
npm run flow init
Uvědomte si, že konkrétní rámce mohou ve výchozím nastavení dodávat projekty s konfiguračním souborem Flow.
Poslední věcí, kterou musíte udělat, je přidat skript Flow do vašeho package.json soubor:
"skripty": {
"tok": "tok"
},
Nyní jste úspěšně nakonfigurovali Flow pro spuštění ve vaší JavaScriptové aplikaci.
Nastavení TypeScript ve vašem projektu
Spusťte následující příkaz a nainstalujte TypeScript do vašeho projektu:
npm Nainstalujte strojopis --save-dev
Měli byste také nainstalovat kompilátor pro kompilaci kódu TypeScript do vanilkového JavaScriptu. Můžete také potřebovat nastavte konfiguraci TypeScript pro lepší pracovní postup Zkušenosti.
Nainstalujte kompilátor TypeScript globálně pomocí tohoto příkazu:
npm Nainstalujte -g strojopis
Chcete-li inicializovat a tsconfig.json konfiguračního souboru zadejte do svého terminálu následující příkaz:
tsc --init
Výše uvedené pokyny vám pomohou začít používat TypeScript ve vašem projektu.
Budova S Průtokem
Chcete-li napsat kód Flow do souboru JavaScript, deklarujte syntaxi Flow v horní části kódu před jakýmikoli výrazy nebo příkazy:
// @flow
Pomocí anotace můžete nastavit datové typy proměnných a funkcí. Flow pak vyvolá chybu, pokud není splněn očekávaný typ.
Například:
// @flow
nech foo: číslo = "Ahoj";
Flow zde vyvolá chybu, protože typ očekávané hodnoty foo je číslo, ne řetězec.
Běh npm run flow abyste viděli chybový výstup v terminálu:
Povolením rozšíření Flow v libovolném textovém editoru se při kódování zobrazí chyby ve vašem editoru.
Flow také používá odvození typu k určení, jaká by měla být očekávaná hodnota výrazu.
Například:
// @flow
funkcedělej něco(hodnota) {
návratová hodnota * "Ahoj";
};
nechat výsledek = něco udělat(6);
Mezi číslem šest a řetězcem nelze provádět aritmetické operace Ahoj.
Výstup z npm run flow bude chyba:
Vývoj pomocí TypeScript
Syntaxe typu TypeScript je velmi podobná syntaxi Flow. Typy proměnných a funkcí můžete definovat pomocí typové anotace stejně jako ve Flow.
TypeScript se dodává s několika dalšími funkcemi podobnými Flow, jako je odvození typu.
Vezměte si příklad kódu TypeScript:
// Typescript.ts
typ Výsledek = "složit" | "selhat"
funkceověřit(výsledek: Výsledek) {
pokud (výsledek "složit") {
console.log("Prošel")
} jiný {
console.log("Nepodařilo se")
}
}
Můžete běžet tsc Typescript.ts zkompilovat tento kód do prostého vanilkového JavaScriptu.
Toto by byl stejný kód TypeScript zkompilovaný do vanilla JavaScript:
funkceověřit(výsledek) {
pokud (výsledek "složit") {
console.log("Prošel")
} jiný {
console.log("Nepodařilo se")
}
}
Výhody a nevýhody TypeScript a Flow
Nyní víte, jak začít používat oba nástroje ve vašem projektu JavaScript. Měli byste znát výhody a nevýhody použití každého z nich.
Integrace
Proces nastavení pro použití Flow je poněkud složitější než TypeScript. Budete muset nastavit kompilátor JavaScriptu, jako je Babel nebo flow-remove-types, abyste z kódu odstranili typy toků. TypeScript obsahuje kompilátor pro převod kódu TypeScript na JavaScript, což usnadňuje integraci.
TypeScript má mnohem lepší nástroje a většina frameworků JavaScript je standardně podporuje. Nejpopulárnější IDE poskytují prvotřídní podporu pro TypeScript. Flow je také podporován, ale vyžaduje speciální plug-in.
Společenství
Na rozdíl od Flow, JavaScript frameworky jako React, React Native, Vue a Angular podporují TypeScript hned po vybalení.
Toto široké přijetí a velká komunita mají za následek lepší výukové zdroje, aktualizace a podporu nástrojů.
Flexibilita
Flow funguje jako typová kontrola, která vás varuje před potenciálně špatným kódem. TypeScript vám brání v psaní špatného kódu a má přísný typový systém. TypeScript také podporuje zapouzdření objektů, které pomáhá udržovat složitý kód spravovatelný. Flow tuto funkci nemá.
Služby
TypeScript poskytuje všechny služby jazyka JavaScript, jako je refaktorování kódu a automatické dokončování. Flow je statický typ kontroly, který poskytuje hluboké porozumění a analýzu vašeho psaného kódu.
Flow se může propracovat až k importovaným modulům a knihovnám vašeho projektu a zjistit, jak ovlivňují váš kód. Může například detekovat a vyvolat varování, když požadovaná knihovna ve vašem projektu chybí nebo když se pokusíte o přístup k definici, která neexistuje.
Kterou statickou kontrolu byste měli použít?
Existuje mnoho platných argumentů pro použití každého nástroje, protože každý má jiné vlastnosti. Některé mohou mít pro jednoho vývojáře nejvyšší prioritu a pro druhého nízkou prioritu. Oba nástroje fungují dobře ve svých vlastních ohledech a nabízejí výhody pro jejich použití.
Měli byste prozkoumat požadavky svého projektu a na základě nich učinit kvalifikované rozhodnutí.