JavaScript-værktøjerne Flow og TypeScript ligner hinanden i mange aspekter. Men de er forskellige med hensyn til deres funktionalitet og evner som statiske brikker.
Find ud af, hvordan Flow og TypeScript sammenlignes, og hvilken er den bedste statiske kontrol til dit næste projekt.
Hvad er flow?
Flow er et statisk kontrolværktøj til JavaScript, skabt af Facebook for at identificere kompilerings- og runtime-kodefejl på forhånd. Det gør den ved at overvåge de værdier, din kode passerer, og hvordan deres datatyper ændrer sig over tid. Dette statiske kontrolsystem forbedrer pålideligheden og læsbarheden. Det hjælper også med at reducere forekomsten af fejl i din JavaScript-kode.
Hvad er TypeScript?
TypeScript er ikke bare en typekontrol, som Flow, men et stærkt indtastet programmeringssprog. Microsoft skabte sproget og byggede det oven på JavaScript.
Ifølge konventionen bør du oprette TypeScript-filer med filtypenavnet .ts. Du kan kompilere en TypeScript-fil til JavaScript-kode, så uanset hvor JavaScript kører, kan TypeScript også køre.
Konfiguration af flow til din JavaScript-applikation
Du kan integrere Flow i enhver JavaScript-ramme, du beslutter dig for at bruge til dit projekt. Du skal have konfigureret en JavaScript-compiler som Babel til at håndtere alle flowtyperne i din kode og kompilere den til vanilla JavaScript.
For at installere Flow i dit projekt skal du køre følgende kommando:
garn tilføje --dev flow-bin
Dernæst skal du installere Flow-kommandolinjegrænsefladen globalt. Denne CLI giver flere kommandoer til opbygning af flowapplikationer.
På macOS, brug Hjemmebryg for at installere Flow CLI:
brygge installere flow-cli
Du skal vide det hvordan man bruger Windows PowerShell for at installere Flow på en Windows-maskine.
For at installere Flow CLI på Windows skal du køre dette script i din PowerShell-terminal:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Flowprojekter kræver en .flowconfig fil for alle nødvendige konfigurationer af værktøjet.
Kør denne kommando for at oprette en Flow-konfigurationsfil i et nyt eller eksisterende projekt:
npm køre flow init
Vær opmærksom på, at specifikke rammer kan sende projekter med en Flow-konfigurationsfil som standard.
Den sidste ting at gøre er at tilføje Flow-scriptet til din package.json fil:
"scripts": {
"flyde": "flyde"
},
Du har nu konfigureret Flow til at køre i din JavaScript-applikation.
Opsætning af TypeScript i dit projekt
Kør følgende kommando for at installere TypeScript i dit projekt:
npm installere maskinskrift --save-dev
Du bør også installere compileren for at kompilere TypeScript-kode til vanilla JavaScript. Det kan du også få brug for opsæt TypeScript-konfigurationen for en bedre arbejdsgang erfaring.
Installer TypeScript-kompileren globalt med denne kommando:
npm installere -g maskinskrift
For at initialisere en tsconfig.json config-fil, skal du indtaste følgende kommando i din terminal:
tsc --i det
Ovenstående instruktioner vil få dig i gang med at bruge TypeScript i dit projekt.
Bygning med flow
For at skrive Flow-kode i en JavaScript-fil skal du erklære Flow-syntaksen øverst i koden før eventuelle udtryk eller sætninger:
// @flow
Du kan indstille variabel- og funktionsdatatyper ved hjælp af annotering. Flow vil derefter rejse en fejl, hvis den forventede type ikke er opfyldt.
For eksempel:
// @flow
lad foo: tal = "Hej";
Flow vil kaste en fejl her, fordi den forventede værdi type foo er et tal, ikke en streng.
Løb npm run flow for at se fejludgangen i terminalen:
Aktivering af Flow-udvidelsen i en hvilken som helst teksteditor vil vise fejlene i din editor, mens du koder.
Flow bruger også typeinferens til at bestemme, hvad den forventede værdi af et udtryk skal være.
For eksempel:
// @flow
fungeregør noget(værdi) {
returværdi * "Hej";
};
lade resultat = gør Noget(6);
Du kan ikke udføre aritmetiske operationer mellem tallet seks og strengen Hej.
Outputtet af npm run flow vil være en fejl:
Udvikling med TypeScript
TypeScripts typesyntaks ligner meget Flows. Du kan definere variabel- og funktionstyper med typeanmærkning, ligesom du ville gøre i Flow.
TypeScript leveres med adskillige andre funktioner, der ligner Flow, såsom typeinferens.
Tag eksemplet TypeScript-kode:
// Typescript.ts
type Resultat = "passere" | "svigte"
fungereverificere(resultat: Resultat) {
hvis (resultat "passere") {
console.log("Bestået")
} andet {
console.log("mislykkedes")
}
}
Du kan løbe tsc Typescript.ts for at kompilere denne kode til almindelig vanilla JavaScript.
Dette ville være den samme TypeScript-kode kompileret i vanilla JavaScript:
fungereverificere(resultat) {
hvis (resultat "passere") {
console.log("Bestået")
} andet {
console.log("mislykkedes")
}
}
Fordele og ulemper ved TypeScript og Flow
Nu ved du, hvordan du kommer i gang med at bruge begge værktøjer i dit JavaScript-projekt. Du bør kende fordele og ulemper ved at bruge hver.
Integration
Opsætningsprocessen for at bruge Flow er noget mere kompleks i modsætning til TypeScript. Du skal konfigurere en JavaScript-compiler som Babel eller flow-remove-typer for at fjerne flowtyper fra din kode. TypeScript inkluderer en compiler til at konvertere TypeScript-kode til JavaScript, hvilket gør integrationen nemmere.
TypeScript har meget bedre værktøj, og de fleste JavaScript-rammer understøtter det som standard. De mest populære IDE'er giver førsteklasses support til TypeScript. Flow er også understøttet, men kræver et særligt plug-in.
Fællesskab
I modsætning til Flow understøtter JavaScript-rammer som React, React Native, Vue og Angular TypeScript ud af boksen.
Denne udbredte anvendelse og store fællesskab resulterer i bedre læringsressourcer, opdateringer og værktøjssupport.
Fleksibilitet
Flow fungerer som en typekontrol, der arbejder for at advare dig om potentielt dårlig kode. TypeScript forhindrer dig i at skrive dårlig kode og har et strengt typesystem. TypeScript understøtter også objektindkapsling, som hjælper med at holde kompleks kode håndterbar. Flow har ikke denne funktion.
Tjenester
TypeScript leverer alle JavaScript-sprogtjenesterne, såsom koderefactoring og autofuldførelse. Flow er en statisk typekontrol, der giver en dyb forståelse og analyse af din skrevne kode.
Flow kan arbejde ned til dit projekts importerede moduler og biblioteker og se, hvordan de påvirker din kode. For eksempel kan det registrere og afgive en advarsel, når et påkrævet bibliotek i dit projekt mangler, eller når du forsøger at få adgang til en definition, der ikke eksisterer.
Hvilken statisk checker skal du bruge?
Der er mange gyldige argumenter for at bruge hvert værktøj, fordi hvert værktøj har forskellige funktioner. Nogle kan have topprioritet for den ene udvikler og lav prioritet for den anden. Begge værktøjer fungerer godt i hver deres henseende og giver fordele ved at bruge dem.
Du bør undersøge kravene til dit projekt og træffe en kvalificeret beslutning baseret på dem.
