De JavaScript-tools Flow en TypeScript lijken in veel opzichten op elkaar. Ze verschillen echter met betrekking tot hun functionaliteit en mogelijkheden als statische schijven.
Ontdek hoe Flow en TypeScript zich verhouden en wat de beste statische checker is voor uw volgende project.
Wat is stroom?
Flow is een statisch type checker-tool voor JavaScript, gemaakt door Facebook om vooraf compileer- en runtime-codefouten te identificeren. Het doet dit door de waarden te controleren die uw code doorgeeft en hoe hun gegevenstypen in de loop van de tijd veranderen. Dit statische controlesysteem verbetert de betrouwbaarheid en leesbaarheid. Het helpt ook om het optreden van bugs in uw JavaScript-code te verminderen.
Wat is typescript?
TypeScript is niet alleen een typecontrole, zoals Flow, maar een sterk getypeerde programmeertaal. Microsoft heeft de taal gemaakt en deze bovenop JavaScript gebouwd.
Volgens afspraak moet u TypeScript-bestanden maken met de bestandsextensie .ts. U kunt een TypeScript-bestand in JavaScript-code compileren, dus overal waar JavaScript wordt uitgevoerd, kan TypeScript ook worden uitgevoerd.
Stroom configureren voor uw JavaScript-toepassing
Je kunt Flow integreren in elk JavaScript-framework dat je besluit te gebruiken voor je project. U moet een JavaScript-compiler zoals Babel hebben geconfigureerd om alle stroomtypes in uw code te verwerken en deze in vanille-JavaScript te compileren.
Voer de volgende opdracht uit om Flow in uw project te installeren:
garen toevoegen --dev stroombak
Vervolgens moet u de Flow-opdrachtregelinterface globaal installeren. Deze CLI biedt verschillende opdrachten voor het bouwen van stroomtoepassingen.
Gebruik op macOS Zelf brouwen om Flow CLI te installeren:
brouwen installeren stroom-cli
U zult het moeten weten hoe Windows PowerShell te gebruiken om Flow op een Windows-computer te installeren.
Voer dit script uit in uw PowerShell-terminal om Flow CLI op Windows te installeren:
bijv "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Flow-projecten vereisen een .flowconfig bestand voor alle noodzakelijke configuraties van de tool.
Voer deze opdracht uit om een Flow-configuratiebestand te maken in een nieuw of bestaand project:
npm run flow init
Houd er rekening mee dat specifieke frameworks projecten standaard met een Flow-configuratiebestand kunnen verzenden.
Het laatste dat u hoeft te doen, is het Flow-script toevoegen aan uw pakket.json bestand:
"scripts": {
"stroom": "stroom"
},
Je hebt Flow nu met succes geconfigureerd om in je JavaScript-toepassing te worden uitgevoerd.
TypeScript instellen in uw project
Voer de volgende opdracht uit om TypeScript in uw project te installeren:
npm installeren typoscript --save-dev
U moet ook de compiler installeren om TypeScript-code in vanilla JavaScript te compileren. Het kan ook nodig zijn stel de TypeScript-configuratie in voor een betere workflow ervaring.
Installeer de TypeScript-compiler globaal met deze opdracht:
npm installeren -g typoscript
Om een te initialiseren tsconfig.json config-bestand, voert u de volgende opdracht in uw terminal in:
tsc --in het
Met de bovenstaande instructies kunt u aan de slag met TypeScript in uw project.
Bouwen met stroom
Om Flow-code in een JavaScript-bestand te schrijven, declareert u de Flow-syntaxis boven aan de code vóór eventuele uitdrukkingen of instructies:
// @stroom
U kunt variabele en functiegegevenstypen instellen met behulp van annotatie. Flow geeft dan een foutmelding als niet aan het verwachte type wordt voldaan.
Bijvoorbeeld:
// @stroom
laat foo: nummer = "Hallo";
Flow genereert hier een fout omdat het type verwachte waarde van foe is een getal, geen tekenreeks.
Loop npm loopstroom om de foutuitvoer in de terminal te zien:
Als je de Flow-extensie in een teksteditor naar keuze inschakelt, worden de fouten in je editor weergegeven terwijl je codeert.
Flow gebruikt ook type-inferentie om te bepalen wat de verwachte waarde van een uitdrukking zou moeten zijn.
Bijvoorbeeld:
// @stroom
functiedoe iets(waarde) {
winstwaarde * "Hallo";
};
laten resultaat = iets doen(6);
U kunt geen rekenkundige bewerkingen uitvoeren tussen het getal zes en de tekenreeks Hallo.
De uitvoer van npm loopstroom zal een fout zijn:
Ontwikkelen met TypeScript
De typesyntaxis van TypeScript lijkt sterk op die van Flow. U kunt variabele- en functietypen definiëren met typeannotatie, net zoals u dat in Flow zou doen.
TypeScript wordt geleverd met verschillende andere functies die vergelijkbaar zijn met Flow, zoals type-inferentie.
Neem het voorbeeld TypeScript-code:
// Typescript.ts
typ Resultaat = "doorgang" | "mislukking"
functieverifiëren(resultaat: resultaat) {
als (resultaat "doorgang") {
console.log("Geslaagd")
} anders {
console.log("Mislukt")
}
}
Je kan lopen tsc Typescript.ts om deze code te compileren naar gewoon vanille JavaScript.
Dit zou dezelfde TypeScript-code zijn die is gecompileerd in vanilla JavaScript:
functieverifiëren(resultaat) {
als (resultaat "doorgang") {
console.log("Geslaagd")
} anders {
console.log("Mislukt")
}
}
Voors en tegens van TypeScript en Flow
Nu weet u hoe u aan de slag kunt met beide tools in uw JavaScript-project. U moet de voor- en nadelen van het gebruik van elk kennen.
Integratie
Het installatieproces om Flow te gebruiken is iets complexer in tegenstelling tot TypeScript. U moet een JavaScript-compiler zoals Babel of flow-remove-types instellen om flow-types uit uw code te verwijderen. TypeScript bevat een compiler om TypeScript-code naar JavaScript te converteren, waardoor integratie eenvoudiger wordt.
TypeScript heeft veel betere tooling en de meeste JavaScript-frameworks ondersteunen dit standaard. De meest populaire IDE's bieden eersteklas ondersteuning voor TypeScript. Flow wordt ook ondersteund, maar vereist een speciale plug-in.
Gemeenschap
In tegenstelling tot Flow ondersteunen JavaScript-frameworks zoals React, React Native, Vue en Angular TypeScript out of the box.
Deze wijdverbreide acceptatie en grote community resulteren in betere leermiddelen, updates en toolondersteuning.
Flexibiliteit
Flow fungeert als een typecontrole die werkt om u te waarschuwen voor mogelijk slechte code. TypeScript voorkomt dat u slechte code schrijft en heeft een strikt typesysteem. TypeScript ondersteunt ook objectinkapseling, waardoor complexe code beheersbaar blijft. Flow heeft deze functie niet.
Diensten
TypeScript biedt alle JavaScript-taalservices, zoals code-refactoring en automatische aanvulling. Flow is een statische type checker die een diep begrip en analyse van uw geschreven code biedt.
Flow kan de geïmporteerde modules en bibliotheken van uw project analyseren en bepalen hoe deze uw code beïnvloeden. Het kan bijvoorbeeld detecteren en een waarschuwing genereren wanneer een vereiste bibliotheek in uw project ontbreekt of wanneer u toegang probeert te krijgen tot een definitie die niet bestaat.
Welke statische checker moet u gebruiken?
Er zijn veel geldige argumenten voor het gebruik van elke tool, omdat ze allemaal verschillende functies hebben. Sommige hebben voor de ene ontwikkelaar de hoogste prioriteit en voor de andere een lage prioriteit. Beide tools werken op hun eigen manier goed en bieden voordelen voor het gebruik ervan.
U moet de vereisten van uw project onderzoeken en op basis daarvan een weloverwogen beslissing nemen.
