@babel/preset-flow

What is @babel/preset-flow?

The @babel/preset-flow npm package is a Babel preset for transforming Flow syntax. Flow is a static type checker for JavaScript, and this preset allows developers to strip Flow types from their source code to make it compatible with standard JavaScript environments. This is useful for projects that use Flow for type checking but need to remove the type annotations for production builds.

What are @babel/preset-flow's main functionalities?

Type Annotations Stripping

This code sample shows a class with Flow type annotations. The @babel/preset-flow will remove the ': number' type annotations when transforming the code.

class MyClass {
  size: number;

  constructor(size: number) {
    this.size = size;
  }
}

Interface Stripping

This code sample defines a Flow interface. The @babel/preset-flow will remove the entire interface declaration when transforming the code.

interface Serializable {
  serialize(): string;
}

Type Alias Removal

This code sample shows a Flow type alias. The @babel/preset-flow will remove the type alias when transforming the code.

type Point = {
  x: number,
  y: number
};

Other packages similar to @babel/preset-flow

@babel/preset-typescript

Similar to @babel/preset-flow, this package is used to strip TypeScript types from the source code to convert it into plain JavaScript. It serves a similar purpose for TypeScript as @babel/preset-flow does for Flow.

flow-remove-types

This package is a lightweight alternative to Babel for removing Flow type annotations from files. It is faster and simpler but does not offer the extensive plugin system and transformations that Babel provides.

README

@babel/preset-flow

Babel preset for all Flow plugins.

This preset includes the following plugins:

• transform-flow-strip-types

Example

In

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

Out

function foo(one, two, three) {}

Installation

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

Usage

Via .babelrc (Recommended)

.babelrc

{
  "presets": ["@babel/flow"]
}

Via CLI

babel --presets @babel/flow script.js

Via Node API

require("@babel/core").transform("code", {
  presets: ["@babel/flow"]
});