How weakly typed JavaScript is converted to a strong type

JavaScript is a network of scripting language, has been widely used in Web application development, often used for Web pages to add a variety of dynamic features, to provide users with smoother and more beautiful browsing effect.

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

In the code above, variable x is initially a numeric value, then a string, and the type is entirely determined by the current value, which is called the weak type.

The advantage of a weak type is that it is flexible enough to write very concise code. However, for large projects, the strong type is more advantageous, can reduce the complexity of the system, at compile-time found type errors, reduce the burden on the programmer.

There have been attempts to turn JavaScript into a strongly typed language. Before the official final support for strong types, this article describes three solutions that are now available.

First, typescript

Typescript is a programming language introduced by Microsoft in 2012, a superset of JavaScript that can be compiled into JavaScript execution. Its greatest feature is the support of strong type and ES6 Class.

First, install typescript.


$ NPM install-g typescript

Then, specify the type for the variable.


Greet.ts
function greet (person:string) {
Console.log ("Hello," + person);
}

Greet ([0, 1, 2]);

This is the code for the file greet.ts, and the suffix TS indicates that this is typescript code. The function greet the argument, declaring the type as a string, but passing in an array at the time of the call.

By using the TSC command to compile a TS file into a JS file, a type mismatch error is thrown.


$ TSC Greeter.ts
Greet.ts (5,9): Error ts2345:argument of type ' number[] '
Is isn't assignable to parameter of type ' string '.

Second, Flowcheck

Flowcheck is a lightweight type assertion library that can check for the correct variable type at run time (runtime).

First, install Flowcheck.


$ NPM install-g Flowcheck

Then, write a script that declares the type of the variable.


function sum (a:number, B:number) {
return a + B;
}

sum (' Hello ', ' world ')

Next, use the following command to convert the script to a normal JavaScript file.


$ browserify-t flowcheck-t [reactify--strip-types] \
Input.js-o Output.js

The converted file is as follows.


var _f = require ("Flowcheck/assert");

function sum (A, b) {
_f.check (arguments, _f.arguments ([_f.number, _f.number]);
return a + B;
}

You can see that an assertion library is inserted into the code. An assertion is executed each time the function is run, and an error occurs if the type does not match.


$ node Output.js
throw new TypeError (message);
^
TypeError:

Expected an instance of number got "Hello",
Context:arguments/[number, number]/0

Expected an instance the number got "world",
Context:arguments/[number, number]/1

Iii. Flow

Flow is a type-checking tool that Facebook released in 2014 to check react's source code.

The installation commands are as follows.


$ NPM Install--global Flow-bin

If the installation is not successful (this is how I am), I need to compile from the source code.

There are a lot of uses for flow, I just give a few examples. The two tools described above can only examine variables that declare a type, and flow can infer the variable type.


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

Above is the file Hello.js, and the first line of the file is a comment indicating the need to use the Flow check variable type.


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

Run the Flow check command to get an error message: The expected function Foo's argument is a numeric value, but it is actually a string.

Flow also supports type declarations for variables.


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

Another interesting feature is that flow can convert type annotations (annotation) to type declarations.


Annotation.js
/**
@param {Number} x
@return {Number}
*/
function Square (x) {
return x * x;
}
Square (5);

Run the Flow port command, and you get the following result.


$ flow Port Annotation.js
function Square (X:number): number {
return x * x;
}