Skip to main content

@babel/preset-flow

This preset is recommended if you use Flow, a static type checker for JavaScript code. It includes the following plugins:

Example

In

JavaScript
function foo(one: any, two: number, three?): string {}

Out

JavaScript
function foo(one, two, three) {}

Installation

npm install --save-dev @babel/preset-flow

Usage

babel.config.json
{
"presets": ["@babel/preset-flow"]
}

Via CLI

Shell
babel --presets @babel/preset-flow script.js

Via Node API

JavaScript
require("@babel/core").transformSync("code", {
presets: ["@babel/preset-flow"],
});

Options

all

boolean, defaults to false.

Flow will only parse Flow-specific features if a @flow pragma is present atop the file, or the all option is set inside the .flowconfig.

If you are using the all option in your Flow config, be sure to set this option to true to get matching behavior.

For example, without either of the above set, the following call expression with a type argument:

f<T>(e)

Would get parsed as a nested binary expression:

JavaScript
f < T > e;

allowDeclareFields

boolean, defaults to false

Added in: v7.9.0

note

This will be enabled by default in Babel 8

When enabled, type-only class fields are only removed if they are prefixed with the declare modifier:

JavaScript
class A {
declare foo: string; // Removed
bar: string; // Initialized to undefined
}

ignoreExtensions

boolean, defaults to false

Added in: v7.21.4

When it is set to true, Babel will apply the flow transform to all extensions. When it is set to false, Babel will avoid the flow transform for *.tsx files.

You can read more about configuring preset options here