Comment Types

Flow with plain JavaScript code by using a special comment syntax

Flow supports a comment-based syntax, which makes it possible to use Flow without having to compile your files.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// @flow

/*::
type MyAlias = {
  foo: number,
  bar: boolean,
  baz: string,
};
*/

function method(value /*: MyAlias */) /*: boolean */ {
  return value.bar;
}

method({ foo: 1, bar: true, baz: ["oops"] });
Cannot call `method` with object literal bound to `value` because array literal [1] is incompatible with string [2] in property `baz`. [incompatible-call]

These comments allow Flow to work in plain JavaScript files without any additional work.

Comment types syntax

There are two primary pieces of the syntax: type includes and type annotations.

Comment type include

If you want to have Flow treat a comment as if it were normal syntax, you can do so by adding a double colon :: to the start of the comment.

1
2
3
4
5
6
7
8
9
10
11
 
/*::
type Foo = {
  foo: number,
  bar: boolean,
  baz: string
};
*/

class MyClass {
  /*:: prop: string; */
}

This includes the code into the syntax that Flow sees.

1
2
3
4
5
6
7
8
9
 
type Foo = {
  foo: number,
  bar: boolean,
  baz: string
};

class MyClass {
  prop: string;
}

But JavaScript ignores these comments, so all it has is the valid syntax.

1
2
3
 
class MyClass {

}

This syntax is also available in a flow-include form.

1
2
3
4
5
6
7
8
9
10
11
 
/*flow-include
type Foo = {
  foo: number,
  bar: boolean,
  baz: string
};
*/

class MyClass {
  /*flow-include prop: string; */
}

Comment type annotation

Instead of typing out a full include every time, you can also use the type annotation shorthand with a single colon : at the start of the comment.

1
2
3
 
function method(param /*: string */) /*: number */ {
  // ...
}

This would be the same as including a type annotation inside an include comment.

1
2
3
 
function method(param /*:: : string */) /*:: : number */ {
  // ...
}

Note: If you want to use optional function parameters you’ll need to use the include comment form.

Special thanks to: Jarno Rantanen for building flotate and supporting us merging his syntax upstream into Flow.

← Module Types

Was this guide helpful? Let us know by sending a message to @flowtype.