Die JavaScript-Tools Flow und TypeScript ähneln sich in vielen Aspekten. Sie unterscheiden sich jedoch hinsichtlich ihrer Funktionalität und Fähigkeiten als statische Dame.

Finden Sie heraus, wie sich Flow und TypeScript vergleichen lassen und welches der beste statische Prüfer für Ihr nächstes Projekt ist.

Was ist Strömung?

Flow ist ein statisches Type-Checker-Tool für JavaScript, das von Facebook entwickelt wurde, um Kompilier- und Laufzeitcodefehler im Voraus zu identifizieren. Dies geschieht durch Überwachen der Werte, die Ihr Code übergibt, und wie sich ihre Datentypen im Laufe der Zeit ändern. Dieses statische Prüfsystem verbessert die Zuverlässigkeit und Lesbarkeit. Es hilft auch, das Auftreten von Fehlern in Ihrem JavaScript-Code zu reduzieren.

Was ist TypeScript?

TypeScript ist nicht nur ein Typprüfer wie Flow, sondern eine stark typisierte Programmiersprache. Microsoft hat die Sprache entwickelt und auf JavaScript aufgebaut.

Per Konvention sollten Sie TypeScript-Dateien mit der Dateierweiterung .ts erstellen. Sie können eine TypeScript-Datei in JavaScript-Code kompilieren, sodass überall dort, wo JavaScript ausgeführt wird, auch TypeScript ausgeführt werden kann.

instagram viewer

Flow für Ihre JavaScript-Anwendung konfigurieren

Sie können Flow in jedes JavaScript-Framework integrieren, das Sie für Ihr Projekt verwenden möchten. Sie müssen einen JavaScript-Compiler wie Babel konfiguriert haben, um alle Flow-Typen in Ihrem Code zu verarbeiten und ihn in Vanilla-JavaScript zu kompilieren.

Führen Sie den folgenden Befehl aus, um Flow in Ihrem Projekt zu installieren:

Garn hinzufügen --dev flow-bin

Als nächstes sollten Sie die Flow-Befehlszeilenschnittstelle global installieren. Diese CLI bietet mehrere Befehle zum Erstellen von Flow-Anwendungen.

Verwenden Sie unter macOS Hausgemacht Flow CLI installieren:

brauen Installieren Flow-Kli

Sie müssen es wissen wie man Windows PowerShell verwendet um Flow auf einem Windows-Rechner zu installieren.

Um Flow CLI unter Windows zu installieren, führen Sie dieses Skript in Ihrem PowerShell-Terminal aus:

iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"

Flow-Projekte erfordern a .flowconfig Datei für alle notwendigen Konfigurationen des Tools.

Führen Sie diesen Befehl aus, um eine Flow-Konfigurationsdatei in einem neuen oder vorhandenen Projekt zu erstellen:

npm start flow init

Beachten Sie, dass bestimmte Frameworks Projekte möglicherweise standardmäßig mit einer Flow-Konfigurationsdatei ausliefern.

Als letztes müssen Sie das Flow-Skript zu Ihrer hinzufügen Paket.json Datei:

"Skripte": {
"Fluss": "Fluss"
},

Sie haben Flow jetzt erfolgreich für die Ausführung in Ihrer JavaScript-Anwendung konfiguriert.

Einrichten von TypeScript in Ihrem Projekt

Führen Sie den folgenden Befehl aus, um TypeScript in Ihrem Projekt zu installieren:

npm Installieren Typoskript --save-dev

Sie sollten auch den Compiler installieren, um TypeScript-Code in Vanilla-JavaScript zu kompilieren. Möglicherweise müssen Sie dies auch tun Richten Sie die TypeScript-Konfiguration für einen besseren Workflow ein Erfahrung.

Installieren Sie den TypeScript-Compiler global mit diesem Befehl:

npm Installieren -g Typoskript

Um eine zu initialisieren tsconfig.json config-Datei geben Sie den folgenden Befehl in Ihr Terminal ein:

tsc --drin

Die obigen Anweisungen erleichtern Ihnen den Einstieg in die Verwendung von TypeScript in Ihrem Projekt.

Bauen mit Flow

Um Flow-Code in eine JavaScript-Datei zu schreiben, deklarieren Sie die Flow-Syntax am Anfang des Codes vor allen Ausdrücken oder Anweisungen:

// @Fluss

Sie können Variablen- und Funktionsdatentypen mithilfe von Anmerkungen festlegen. Flow löst dann einen Fehler aus, wenn der erwartete Typ nicht erfüllt wird.

Zum Beispiel:

// @Fluss
lass foo: Zahl = "Hallo";

Flow gibt hier einen Fehler aus, da der erwartete Werttyp von foo ist eine Zahl, kein String.

Laufen npm-Lauffluss um die Fehlerausgabe im Terminal zu sehen:

Wenn Sie die Flow-Erweiterung in einem beliebigen Texteditor aktivieren, werden die Fehler in Ihrem Editor angezeigt, während Sie codieren.

Flow verwendet auch Typrückschluss, um zu bestimmen, was der erwartete Wert eines Ausdrucks sein sollte.

Zum Beispiel:

// @Fluss
Funktionetwas tun(Wert) {
 Rückgabewert * "Hallo";
};
lassen Ergebnis = etwas tun (6);

Zwischen der Zahl Sechs und der Zeichenfolge können keine Rechenoperationen ausgeführt werden Hallo.

Die Ausgabe von npm-Lauffluss wird ein Fehler sein:

Entwickeln mit TypeScript

Die Typsyntax von TypeScript ist der von Flow sehr ähnlich. Sie können Variablen- und Funktionstypen mit Typanmerkungen genau wie in Flow definieren.

TypeScript wird mit mehreren anderen Funktionen geliefert, die Flow ähneln, wie z. B. Typrückschluss.

Nehmen Sie den Beispiel-TypeScript-Code:

// Typescript.ts
Geben Sie Ergebnis = ein "passieren" | "scheitern"
Funktionverifizieren(Ergebnis: Ergebnis) {
 wenn (Ergebnis "passieren") {
 Konsole.log ("Bestanden")
 } anders {
 Konsole.log ("Fehlgeschlagen")
 }
}

Du kannst rennen tsc Typoskript.ts um diesen Code in Plain Vanilla JavaScript zu kompilieren.

Dies wäre derselbe TypeScript-Code, der in Vanille-JavaScript kompiliert wurde:

Funktionverifizieren(Ergebnis) {
 wenn (Ergebnis "passieren") {
 Konsole.log ("Bestanden")
 } anders {
 Konsole.log ("Fehlgeschlagen")
 }
}

Vor- und Nachteile von TypeScript und Flow

Jetzt wissen Sie, wie Sie mit der Verwendung beider Tools in Ihrem JavaScript-Projekt beginnen können. Sie sollten die Vor- und Nachteile der Verwendung kennen.

Integration

Der Einrichtungsprozess zur Verwendung von Flow ist im Gegensatz zu TypeScript etwas komplexer. Sie müssen einen JavaScript-Compiler wie Babel oder flow-remove-types einrichten, um Flow-Typen aus Ihrem Code zu entfernen. TypeScript enthält einen Compiler zum Konvertieren von TypeScript-Code in JavaScript, wodurch die Integration vereinfacht wird.

TypeScript hat viel bessere Werkzeuge und die meisten JavaScript-Frameworks unterstützen es standardmäßig. Die gängigsten IDEs bieten erstklassige Unterstützung für TypeScript. Flow wird ebenfalls unterstützt, erfordert jedoch ein spezielles Plug-in.

Gemeinschaft

Im Gegensatz zu Flow unterstützen JavaScript-Frameworks wie React, React Native, Vue und Angular TypeScript standardmäßig.

Diese weit verbreitete Akzeptanz und große Community führen zu besseren Lernressourcen, Updates und Tool-Support.

Flexibilität

Flow fungiert als Typprüfer, der Sie vor potenziell fehlerhaftem Code warnt. TypeScript verhindert, dass Sie schlechten Code schreiben, und hat ein strenges Typsystem. TypeScript unterstützt auch Objektkapselung, die dazu beiträgt, komplexen Code überschaubar zu halten. Flow hat diese Funktion nicht.

Dienstleistungen

TypeScript bietet alle JavaScript-Sprachdienste wie Code-Refactoring und automatische Vervollständigung. Flow ist ein statischer Typprüfer, der ein tiefes Verständnis und eine Analyse Ihres geschriebenen Codes ermöglicht.

Flow kann bis zu den importierten Modulen und Bibliotheken Ihres Projekts vorgehen und erkennen, wie sie sich auf Ihren Code auswirken. Beispielsweise kann es erkennen und eine Warnung ausgeben, wenn eine erforderliche Bibliothek in Ihrem Projekt fehlt oder wenn Sie versuchen, auf eine nicht vorhandene Definition zuzugreifen.

Welchen statischen Checker sollten Sie verwenden?

Es gibt viele gültige Argumente für die Verwendung jedes Tools, da jedes unterschiedliche Funktionen hat. Einige können für einen Entwickler von höchster Priorität und für den anderen von niedriger Priorität sein. Beide Tools funktionieren für sich genommen gut und bieten Vorteile für den Einsatz.

Sie sollten die Anforderungen Ihres Projekts prüfen und darauf basierend eine fundierte Entscheidung treffen.