Stark typisierte JavaScript-Lösungen

JavaScript ist eine schwach typisierte (oder dynamisch typisierte) Sprache, das heißt, der Typ der Variablen ist undefiniert.

x = 5; // 5
x = x + 'A'; // '5A'

Im obigen Code ist die Variable x zunächst ein numerischer Wert und dann ein String. Der Typ wird vollständig durch den aktuellen Wert bestimmt.

Der Vorteil der schwachen Typisierung besteht darin, dass sie sehr flexibel ist und sehr prägnanten Code schreiben kann. Bei großen Projekten ist die starke Typisierung jedoch vorteilhafter, da sie die Komplexität des Systems verringern, Typfehler zur Kompilierungszeit erkennen und die Belastung für Programmierer verringern kann.

Jemand hat versucht, JavaScript zu einer stark typisierten Sprache zu machen. Bis Strong Typing endlich offiziell unterstützt wird, stellt dieser Artikel drei Lösungen vor, die jetzt verfügbar sind.

1. TypeScript

TypeScript ist eine 2012 von Microsoft eingeführte Programmiersprache. Sie ist eine Obermenge von JavaScript und kann zur Ausführung in JavaScript kompiliert werden. Sein größtes Merkmal ist, dass es starkes Tippen und die ES6-Klasse unterstützt.

Installieren Sie zunächst TypeScript.

$ npm install -g typescript

Geben Sie dann den Typ für die Variable an.

// greet.ts
function greet(person: string) {
  console.log("Hello, " + person);
}
greet([0, 1, 2]);

Das Obige ist der Code der Dateigreet.ts, und das Suffix ts gibt an, dass es sich um TypeScript-Code handelt. Die Parameter der Funktion Greet werden als Strings deklariert, beim Aufruf wird jedoch ein Array übergeben.

Die Verwendung des Befehls tsc zum Kompilieren der ts-Datei in eine js-Datei führt zu einem Typkonfliktfehler.

$ tsc greeter.ts
greet.ts(5,9): error TS2345: Argument of type 'number[]'   
is not assignable to parameter of type 'string'.

2. Flowcheck

Flowcheck ist eine leichtgewichtige Typzusicherungsbibliothek, die zur Laufzeit prüfen kann, ob der Variablentyp korrekt ist.

Installieren Sie zunächst Flowcheck.

$ npm install -g flowcheck

Schreiben Sie dann ein Skript, das den Variablentyp deklariert.

function sum(a: number, b: number) {
  return a + b;
}
sum('hello','world')

Als nächstes verwenden Sie den folgenden Befehl, um das Skript in eine normale JavaScript-Datei zu konvertieren.

$ browserify -t flowcheck -t [reactify --strip-types] \
input.js -o output.js

Die konvertierten Dateien lauten wie folgt.

var _f = require("flowcheck/assert");
function sum(a, b) {
    _f.check(arguments, _f.arguments([_f.number, _f.number]));
  return a + b;
}

Wie Sie sehen können, wird eine Assertionsbibliothek in den Code eingefügt. Bevor jede Funktion ausgeführt wird, wird eine Assertion ausgeführt und ein Fehler gemeldet, wenn die Typen nicht übereinstimmen.

$ node output.js
// throw new TypeError(message);
            ^
TypeError: 
Expected an instance of number got "hello",   
context: arguments / [number, number] / 0
Expected an instance of number got "world",  
context: arguments / [number, number] / 1

3. Flow

Flow ist ein Typprüfungstool, das 2014 von Facebook veröffentlicht wurde, um den Quellcode von React zu überprüfen.

Der Installationsbefehl lautet wie folgt.

$ npm install --global flow-bin

Wenn die Installation nicht erfolgreich ist (das ist bei mir der Fall), müssen Sie sie selbst aus dem Quellcode kompilieren.

Es gibt viele Möglichkeiten, Flow zu verwenden, ich werde nur einige Beispiele nennen. Die beiden zuvor vorgestellten Tools können nur Variablen mit deklarierten Typen prüfen, während Flow Variablentypen ableiten kann.

// hello.js
/* @flow */
function foo(x) {
  return x*10;
}
foo("Hello, world!");

Das Obige ist die Datei hello.js. Die erste Zeile der Datei ist ein Kommentar, der angibt, dass Flow zum Überprüfen des Variablentyps verwendet werden muss.

$ flow check
hello.js:7:5,19: string
This type is incompatible with
/hello.js:4:10,13: number

Führen Sie den Befehl „flow check“ aus und erhalten Sie eine Fehlermeldung: Der erwartete Parameter der Funktion foo ist ein numerischer Wert, in Wirklichkeit jedoch eine Zeichenfolge.

Flow unterstützt auch die Typdeklaration von Variablen.

/* @flow */
function foo(x: string, y: number): string {
  return x.length * y;
}
foo("Hello", 42);

Eine weitere interessante Funktion ist, dass Flow Typanmerkungen in Typdeklarationen umwandeln kann.

// annotation.js
/**
  @param {number} x
  @return {number}
 */
function square(x) {
  return x * x;
}
square(5);

Wenn Sie den Befehl „flow port“ ausführen, erhalten Sie die folgenden Ergebnisse.

$ flow port annotation.js
function square(x: number) : number {
   return x * x;
 }

Eine weitere Einführung in Flow finden Sie unter „Flow erkunden, Facebooks Typprüfer für JavaScript“.