Tuesday, April 23, 2019

Flow with the JS types.

Things are getting easier day by day in order to code in JS world and in order to fill the gap of datatypes between the function definition and function call, for the params, Facebook introduced the API called Flow, https://github.com/facebook/flow

The FB Flow is basically a way to define the datatype of the variable and it cross-checks that while passing the values to the Datatypes the values are passed in correct datatype format or not.

In a simple language, now you can say that a variable is going to be numeric in nature and you are not allowed to pass a string to that variable, if you do so while compiling the project itself, you will get an error from the Flow system regarding the same.

Dynamic binding is not going to be possible so openly as it used to be before.

So let's take a basic example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* @flow */
'use strict';

// `x` is declared to be a `number` explicitly.
// This means Flow will throw an error if we try to assign
// any value to `x` which is not a `number`.
var x: number = 5;

// this will not generate the error, since you are pushing number to number
x = 1234;

// #FlowExpectError – string does not match type of x, which is number
x = 'five';

// If we don't declare variable type explicitly, it's not sealed.
var y = true;

y = false;

// We are free to change the type any time by assigning a new value to the variable
y = 'hello';

// #FlowExpectError – Flow still type checks `y`, it knows which type it is currently.
var z: boolean = y;

In this code, we have used the Datatype binding at line number 7, so in that line, we have created a variable named "x" and told flow to make the datatype as Number.

Flow, in a nutshell, is like a preprocessor that is going to check the code against the datatypes and going to tell the exception on the basis of that.

After that, we have to compile the code which means we have to remove the code which we have added and which is not the part of the Javascript world like line number 7.

In order to check the code, we have an executable that is provided by flow module.  The executable reads a file called .flowconfig which contains the settings for Flow module.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
[ignore]
.*/node_modules/*

[include]

[libs]

[lints]

[options]
suppress_comment=\\(.\\|\n\\)*\\#FlowExpectError
suppress_comment=\\(.\\|\n\\)*\\#FlowIgnoreAsset
esproposal.class_instance_fields=enable
esproposal.class_static_fields=enable

[strict]

The linting provided by .flowconfig, with properties that can be found here:  https://flow.org/en/docs/config/

Also, Flow executable takes the parameters in the command line as well and even that info is available at the above link.

In order to check the validity of the code we have written, we can use the flow executable against the folder src/ (which is by default picked by flow).

The command for checking and building is added in package.json


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{
  "name": "demo-facebook-flow",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "check": "npx flow",
    "build": "npx flow-remove-types src/ -d lib/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "flow-bin": "^0.93.0",
    "flow-remove-types": "^1.2.3"
  }
}

Line number 8 and 9 is respectively the commands for checking and building (which means remove the code that a pure javascript engine don't understand )

After building it will create a folder named lib that will contain the code of our files without the flow types and that is executable as a normal node file.

Happy coding :)

No comments:

Post a Comment