Stream Type Annotations and a valid JavaScript source

Question

I play with the new Facebook stream type checking system.

In Flow, to meet Underscore , it looks like they are changing this JavaScript code

var root = this; 

in that

 var root: any = this; 

But this is no longer valid JavaScript, right? I understand why external front-end files would be useful, but how are type annotations added directly to valid JavaScript sources?

Previously, the Google Closure compiler and other projects used JS comments.

Answer 1

For stream 0.4.0, you can put stream syntax in comments. This solves your problem. So your example would look like this:

 var root/*: any*/ = this; 

This results in valid JavaScript syntax and there is no need to translate your code.

More information can be found here: http://flowtype.org/blog/2015/02/20/Flow-Comments.html

Answer 2

You are right, this code is no longer valid javascript. This means that when using Flow in someJavascriptFile.js, you must run a program that removes the stream code from someJavascriptFile.js, which is called transpiling. Which transpiler to use depends on how you run javascript and probably change over time, so I won’t refer to any.

You can also wrap stream types in a comment, for example. var name /*:string*/ = "Hello flow." which is valid javascript but makes the code harder to read in my opinion.

In theory, Javascript engines might one day support parsing a stream, but that’s a long time.

Answer 3

I skipped Running Stream Code , which discusses adding a build step to remove type annotations.

You can use the JSX conversion tool (part of the React tools) to translate your files into plain JavaScript

I also found flow-typestrip , which is an alternative.

I prefer the external interface files to the module, since you can not enter the build step.