Just flow with the flow. Designed by the Facebook team(open source) and for JavaScript developers, Flow is a static type checker that catches common errors in your application before they run. What is meant by a Static type checker? This generally means that the type of a variable is known at compile time. For some languages this means that you as the programmer must specify what type each variable is (e.g.: Java, C, C++); other languages offer some form of type inference, the capability of the type system to deduce the type of a variable (e.g.: OCaml, Haskell, Scala) — stackoverflow . Flow integrates with your code editor by checking changes and analyzing correctness of your code while you write code. Flow not only points out the error in your code, it also provides context as to what is wrong with the code. In this article we’d see dive into the smoothness of Flow and see how it could be beneficial for us. Make sure you have installed. NodeJS Pull out your code editor, I would be using as that is my code editor. There’s support for other editors such as , and . Sublime-text vim emacs nuclide Using Sublime-text, you would need to install a sublimeLinter package to have Flow working correctly which is . SublimeLinter-Flow Getting started is easy: Create a new project folder or open your already existing project. file in your project root. Create a _.flowconfig_ _npm install --save-dev flow-bin_ Create a new file or open any of your JS files. Just right at the top add this tiny JavaScript comment and that’s all. index.js // @flow In the file add this snippet for a start: index.js var str: number = 'hello world!';console.log(str); In your code editor, if you’re using Sublime text, you should see something like this below. Error messages displayed. What we did here was add a trivial type error, we expect to be a number but instead we assigned it a string. str To show that Flow constantly guards your code, take out the comment and see what happens. The error highlights are gone. //@flow Removing the flow comments triggers either to watch for errors or not. You can also check for errors in your terminal by running the command , you would get a log showing where the error occurred. flow Error log typing flow in the command line. Now if you had an existing project or you created a new project. If you ran your project or in your terminal, you would get a different error from what shows you. node index.js flow var str: number = 'hello world!';^SyntaxError: Unexpected token : This is because we need to add and a to help us transpile our code. Babel Babel plugin Install if you don’t already have it babel-cli npm install -g babel-cli npm install —-save-dev babel-plugin-transform-flow-strip-types Create a file in your project root and add .babelrc {"plugins: ["transform-flow-strip-types"]} In your terminal, run babel-node index.js If you will notice, even with the error Flow complains about, it was ignored. Meaning Flow does not stop you from going further with other things. But it is advisable to fix your errors before pushing to production :). Now to correct our error and let Flow stop barking at us for sending the wrong type. All we have to do is change to number string var str: string = 'hello world!';console.log(str); Flow supports a bunch of other types such as: boolean number string null void And , be sure to check them out. more One last example: Flow also supports type checking in function parameters. function doggy(x: number) {return x + 1;} What this means is that, we declare a function and we expect a number as the parameter. if we called the function: doggy(3) // flow displays no errorsdoggy("hola!") // we seem to enjoy flows error colors here. Just one last example. Just One Last Example: Having worked with Flow for a while now, i haven’t covered all the goodness of what Flow offers but here’s my favourite so far, feel free to share what you like about Flow in the comments to help others learn more. Flow allows us to define a function along with the return value we expect. What ever the function type may be, Async, Generators, Flow is compatible. function doggy(x: number): number {return "c";// throws error because a string is returned.} function catty(x: number): number {return 3; //throws no error because a number is returned} Finally! Check out t as well. Flow for Reac With this Type Checking, there are some advantages such as better productivity, more readable code and autocompletion by flow. Cheers!
