JavaScript-verktygen Flow och TypeScript liknar varandra i många aspekter. Men de skiljer sig åt när det gäller deras funktionalitet och förmågor som statiska pjäser.
Ta reda på hur Flow och TypeScript jämförs och vilken som är den bästa statiska kontrollen för ditt nästa projekt.
Vad är Flow?
Flow är ett statiskt kontrollverktyg för JavaScript, skapat av Facebook för att identifiera kompilerings- och körtidskodfel i förväg. Den gör detta genom att övervaka de värden som din kod skickar och hur deras datatyper förändras över tiden. Detta statiska kontrollsystem förbättrar tillförlitligheten och läsbarheten. Det hjälper också till att minska förekomsten av buggar i din JavaScript-kod.
Vad är TypeScript?
TypeScript är inte bara en typkontroll, som Flow, utan ett starkt skrivet programmeringsspråk. Microsoft skapade språket och byggde det ovanpå JavaScript.
Enligt konvention bör du skapa TypeScript-filer med filtillägget .ts. Du kan kompilera en TypeScript-fil till JavaScript-kod, så varhelst JavaScript körs kan TypeScript också köras.
Konfigurera flöde för din JavaScript-applikation
Du kan integrera Flow i alla JavaScript-ramverk som du väljer att använda för ditt projekt. Du måste ha konfigurerat en JavaScript-kompilator som Babel för att hantera alla flödestyper i din kod och kompilera den till vanilla JavaScript.
För att installera Flow i ditt projekt, kör följande kommando:
garn lägga till --dev flow-bin
Därefter bör du installera Flows kommandoradsgränssnitt globalt. Denna CLI tillhandahåller flera kommandon för att bygga flödestillämpningar.
På macOS, använd Hembryggt för att installera Flow CLI:
brygga Installera flow-cli
Du kommer att behöva veta hur du använder Windows PowerShell för att installera Flow på en Windows-maskin.
För att installera Flow CLI på Windows, kör det här skriptet i din PowerShell-terminal:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Flödesprojekt kräver en .flowconfig fil för alla nödvändiga konfigurationer av verktyget.
Kör det här kommandot för att skapa en Flow-konfigurationsfil i ett nytt eller befintligt projekt:
npm kör flöde init
Var medveten om att specifika ramverk kan skicka projekt med en Flow-konfigurationsfil som standard.
Det sista du ska göra är att lägga till Flow-skriptet till din package.json fil:
"skript": {
"flöde": "flöde"
},
Du har nu konfigurerat Flow för att köras i din JavaScript-applikation.
Konfigurera TypeScript i ditt projekt
Kör följande kommando för att installera TypeScript i ditt projekt:
npm Installera maskinskriven --save-dev
Du bör också installera kompilatorn för att kompilera TypeScript-kod till vanilla JavaScript. Du kan också behöva ställ in TypeScript-konfigurationen för ett bättre arbetsflöde erfarenhet.
Installera TypeScript-kompilatorn globalt med detta kommando:
npm Installera -g maskinskriven
För att initiera en tsconfig.json config-fil, skriv in följande kommando i din terminal:
tsc --i det
Ovanstående instruktioner kommer att få dig att börja använda TypeScript i ditt projekt.
Byggnad Med Flöde
För att skriva Flow-kod i en JavaScript-fil, deklarera Flow-syntaxen överst i koden före alla uttryck eller satser:
// @flöde
Du kan ställa in variabel- och funktionsdatatyper med hjälp av anteckningar. Flödet kommer då att visa ett fel om den förväntade typen inte uppfylls.
Till exempel:
// @flöde
låt foo: nummer = "Hallå";
Flow kommer att kasta ett fel här eftersom det förväntade värdet typ av foo är ett tal, inte en sträng.
Springa npm körflöde för att se felutgången i terminalen:
Om du aktiverar Flow-tillägget i valfri textredigerare visas felen i din editor när du kodar.
Flow använder också typinferens för att bestämma vad det förväntade värdet för ett uttryck ska vara.
Till exempel:
// @flöde
fungeragöra någonting(värde) {
returvärde * "Hallå";
};
låta resultat = gör Något(6);
Du kan inte utföra aritmetiska operationer mellan siffran sex och strängen Hallå.
Utgången av npm körflöde blir ett fel:
Utvecklas med TypeScript
TypeScripts typsyntax är mycket lik Flows. Du kan definiera variabel- och funktionstyper med typanteckning precis som du skulle göra i Flow.
TypeScript levereras med flera andra funktioner som liknar Flow, som typinferens.
Ta exemplet TypeScript-kod:
// Typescript.ts
typ Resultat = "passera" | "misslyckas"
fungerakontrollera(resultat: Resultat) {
om (resultat "passera") {
console.log("passerade")
} annan {
console.log("Misslyckades")
}
}
Du kan springa tsc Typescript.ts för att kompilera den här koden till vanilj JavaScript.
Det här skulle vara samma TypeScript-kod som kompilerad till vanilla JavaScript:
fungerakontrollera(resultat) {
om (resultat "passera") {
console.log("passerade")
} annan {
console.log("Misslyckades")
}
}
För- och nackdelar med TypeScript och Flow
Nu vet du hur du kommer igång med båda verktygen i ditt JavaScript-projekt. Du bör känna till fördelarna och nackdelarna med att använda var och en.
Integration
Installationsprocessen för att använda Flow är något mer komplex än TypeScript. Du måste ställa in en JavaScript-kompilator som Babel eller flow-remove-typer för att ta bort flödestyper från din kod. TypeScript innehåller en kompilator för att konvertera TypeScript-kod till JavaScript, vilket gör integrationen enklare.
TypeScript har mycket bättre verktyg och de flesta JavaScript-ramverk stöder det som standard. De mest populära IDE: erna ger förstklassigt stöd för TypeScript. Flow stöds också men kräver en speciell plug-in.
gemenskap
Till skillnad från Flow stöder JavaScript-ramverk som React, React Native, Vue och Angular TypeScript direkt.
Denna utbredda användning och stora community resulterar i bättre lärresurser, uppdateringar och verktygsstöd.
Flexibilitet
Flow fungerar som en typkontroll som fungerar för att varna dig om potentiellt dålig kod. TypeScript hindrar dig från att skriva dålig kod och har ett strikt typsystem. TypeScript stöder också objektinkapsling, vilket hjälper till att hålla komplex kod hanterbar. Flow har inte denna funktion.
Tjänster
TypeScript tillhandahåller alla JavaScript-språktjänster, som kodrefaktorering och autokomplettering. Flow är en statisk typkontroll som ger en djup förståelse och analys av din skrivna kod.
Flow kan arbeta ner till ditt projekts importerade moduler och bibliotek och se hur de påverkar din kod. Till exempel kan den upptäcka och skicka en varning när ett obligatoriskt bibliotek i ditt projekt saknas eller när du försöker komma åt en definition som inte finns.
Vilken statisk checker ska du använda?
Det finns många giltiga argument för att använda varje verktyg eftersom alla har olika funktioner. Vissa kan ha högsta prioritet för en utvecklare och låg prioritet för den andra. Båda verktygen fungerar bra i sina egna avseenden och erbjuder fördelar för att använda dem.
Du bör undersöka kraven i ditt projekt och fatta ett välgrundat beslut baserat på dem.
