JavaScript-verktøyene Flow og TypeScript er like i mange aspekter. Imidlertid er de forskjellige når det gjelder funksjonalitet og evner som statiske brikker.
Finn ut hvordan Flow og TypeScript sammenlignes og hvilken som er den beste statiske sjekken for ditt neste prosjekt.
Hva er flow?
Flow er et statisk kontrollverktøy for JavaScript, laget av Facebook for å identifisere kompilerings- og kjøretidskodefeil på forhånd. Den gjør dette ved å overvåke verdiene koden din sender og hvordan datatypene deres endrer seg over tid. Dette statiske kontrollsystemet forbedrer påliteligheten og lesbarheten. Det bidrar også til å redusere forekomsten av feil i JavaScript-koden din.
Hva er TypeScript?
TypeScript er ikke bare en typekontroll, som Flow, men et sterkt skrevet programmeringsspråk. Microsoft skapte språket ved å bygge det på toppen av JavaScript.
Av konvensjon bør du lage TypeScript-filer med filtypen .ts. Du kan kompilere en TypeScript-fil til JavaScript-kode, så uansett hvor JavaScript kjører, kan TypeScript kjøres også.
Konfigurere flyt for JavaScript-applikasjonen din
Du kan integrere Flow i et hvilket som helst JavaScript-rammeverk du velger å bruke for prosjektet ditt. Du må ha konfigurert en JavaScript-kompilator som Babel for å håndtere alle flyttypene i koden din og kompilere den til vanilla JavaScript.
For å installere Flow i prosjektet ditt, kjør følgende kommando:
legg til garn --dev flow-bin
Deretter bør du installere Flow-kommandolinjegrensesnittet globalt. Denne CLI gir flere kommandoer for å bygge flytapplikasjoner.
På macOS, bruk Hjemme brygget for å installere Flow CLI:
brygge installere flyt-cli
Du må vite hvordan du bruker Windows PowerShell for å installere Flow på en Windows-maskin.
For å installere Flow CLI på Windows, kjør dette skriptet i PowerShell-terminalen:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Flytprosjekter krever en .flowconfig fil for alle nødvendige konfigurasjoner av verktøyet.
Kjør denne kommandoen for å opprette en Flow-konfigurasjonsfil i et nytt eller eksisterende prosjekt:
npm kjøre flow init
Vær oppmerksom på at spesifikke rammeverk kan sende prosjekter med en Flow-konfigurasjonsfil som standard.
Den siste tingen å gjøre er å legge til Flow-skriptet til din package.json fil:
"skript": {
"strømme": "strømme"
},
Du har nå konfigurert Flow til å kjøre i JavaScript-applikasjonen.
Sette opp TypeScript i prosjektet ditt
Kjør følgende kommando for å installere TypeScript i prosjektet ditt:
npm installere maskinskrift --save-dev
Du bør også installere kompilatoren for å kompilere TypeScript-kode til vanilla JavaScript. Du må kanskje også sett opp TypeScript-konfigurasjonen for en bedre arbeidsflyt erfaring.
Installer TypeScript-kompilatoren globalt med denne kommandoen:
npm installere -g maskinskrift
For å initialisere en tsconfig.json config-fil, skriv inn følgende kommando i terminalen din:
tsc --i det
Instruksjonene ovenfor vil få deg i gang med å bruke TypeScript i prosjektet ditt.
Bygg med flyt
For å skrive flytkode i en JavaScript-fil, erklærer du flytsyntaksen øverst i koden før noen uttrykk eller setninger:
// @flow
Du kan angi variabel- og funksjonsdatatyper ved å bruke merknader. Flow vil da oppstå en feil hvis den forventede typen ikke oppfylles.
For eksempel:
// @flow
la foo: tall = "Hallo";
Flow vil kaste en feil her fordi den forventede verdien type foo er et tall, ikke en streng.
Løpe npm kjøre flyt for å se feilutgangen i terminalen:
Aktivering av Flow-utvidelsen i en hvilken som helst tekstredigerer vil vise feilene i redigeringsprogrammet mens du koder.
Flow bruker også typeslutning for å bestemme hva den forventede verdien av et uttrykk skal være.
For eksempel:
// @flow
funksjongjør noe(verdi) {
returverdi * "Hallo";
};
la resultat = gjørNoe(6);
Du kan ikke utføre aritmetiske operasjoner mellom tallet seks og strengen Hallo.
Utgangen av npm kjøre flyt vil være en feil:
Utvikler med TypeScript
TypeScripts typesyntaks er veldig lik Flows. Du kan definere variabel- og funksjonstyper med typekommentarer akkurat som du ville gjort i Flow.
TypeScript leveres med flere andre funksjoner som ligner på Flow, som typeslutning.
Ta eksempelet TypeScript-koden:
// Typescript.ts
type Resultat = "sende" | "mislykkes"
funksjonbekrefte(resultat: Resultat) {
hvis (resultat "sende") {
console.log("Bestått")
} ellers {
console.log("Mislyktes")
}
}
Du kan løpe tsc Typescript.ts for å kompilere denne koden til vanlig vanilje JavaScript.
Dette ville være den samme TypeScript-koden kompilert inn i vanilla JavaScript:
funksjonbekrefte(resultat) {
hvis (resultat "sende") {
console.log("Bestått")
} ellers {
console.log("Mislyktes")
}
}
Fordeler og ulemper med TypeScript og Flow
Nå vet du hvordan du kommer i gang med å bruke begge verktøyene i JavaScript-prosjektet ditt. Du bør vite fordeler og ulemper ved å bruke hver.
Integrering
Oppsettprosessen for å bruke Flow er noe mer kompleks i motsetning til TypeScript. Du må sette opp en JavaScript-kompilator som Babel eller flow-remove-typer for å fjerne flyttyper fra koden din. TypeScript inkluderer en kompilator for å konvertere TypeScript-kode til JavaScript, noe som gjør integrasjonen enklere.
TypeScript har mye bedre verktøy og de fleste JavaScript-rammeverk støtter det som standard. De fleste populære IDE-er gir førsteklasses støtte for TypeScript. Flow støttes også, men krever en spesiell plug-in.
Samfunnet
I motsetning til Flow, støtter JavaScript-rammeverk som React, React Native, Vue og Angular TypeScript ut av esken.
Denne utbredte bruken og det store fellesskapet resulterer i bedre læringsressurser, oppdateringer og verktøystøtte.
Fleksibilitet
Flow fungerer som en typekontroll som fungerer for å advare deg om potensielt dårlig kode. TypeScript hindrer deg i å skrive dårlig kode og har et strengt typesystem. TypeScript støtter også objektinnkapsling, som bidrar til å holde kompleks kode håndterbar. Flow har ikke denne funksjonen.
Tjenester
TypeScript tilbyr alle JavaScript-språktjenester, som koderefaktorering og autofullføring. Flow er en statisk type kontrollør som gir en dyp forståelse og analyse av din skrevne kode.
Flow kan jobbe ned til prosjektets importerte moduler og biblioteker og se hvordan de påvirker koden din. For eksempel kan den oppdage og sende en advarsel når et nødvendig bibliotek i prosjektet ditt mangler, eller når du prøver å få tilgang til en definisjon som ikke eksisterer.
Hvilken statisk kontrollør bør du bruke?
Det er mange gyldige argumenter for å bruke hvert verktøy fordi hvert verktøy har forskjellige funksjoner. Noen kan ha topp prioritet for den ene utvikleren og lav prioritet for den andre. Begge verktøyene fungerer godt i hver sin henseende og gir fordeler ved å bruke dem.
Du bør undersøke kravene til prosjektet ditt og ta en utdannet beslutning basert på dem.
