flow
Adds static typing to JavaScript to improve developer productivity and code quality.
Top Related Projects
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
The Kotlin Programming Language.
Empowering everyone to build reliable and efficient software.
The Go programming language
The Dart SDK, including the VM, JS and Wasm compilers, analysis, core libraries, and more.
The Crystal Programming Language
Quick Overview
Flow is a static type checker for JavaScript developed by Facebook. It aims to find errors in JavaScript code without running it, using type inference to understand the code and detect inconsistencies. Flow can be integrated into various development environments and build systems to provide real-time feedback and improve code quality.
Pros
- Improves code reliability by catching type-related errors early in development
- Enhances code readability and maintainability through type annotations
- Offers gradual typing, allowing developers to add types incrementally
- Provides intelligent autocompletion in supported IDEs
Cons
- Requires additional setup and configuration in projects
- Can have a steep learning curve for developers new to static typing
- May introduce some overhead in development time due to type annotations
- Not as widely adopted as TypeScript, potentially limiting community support
Code Examples
- Basic type annotation:
// @flow
function square(n: number): number {
return n * n;
}
console.log(square(4)); // 16
console.log(square("4")); // Error: string is incompatible with number
- Using Maybe types for optional values:
// @flow
function greet(name: ?string): string {
if (name) {
return `Hello, ${name}!`;
}
return "Hello, stranger!";
}
console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet(null)); // "Hello, stranger!"
- Working with React components:
// @flow
import React from 'react';
type Props = {
name: string,
age: number,
};
const UserProfile = ({ name, age }: Props) => (
<div>
<h1>{name}</h1>
<p>Age: {age}</p>
</div>
);
export default UserProfile;
Getting Started
To start using Flow in your project:
- Install Flow:
npm install --save-dev flow-bin
- Add a Flow configuration file:
touch .flowconfig
- Add Flow check script to package.json:
"scripts": {
"flow": "flow"
}
- Run Flow:
npm run flow
- Add
// @flow
to the top of files you want to check with Flow.
Competitor Comparisons
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
Pros of TypeScript
- Wider adoption and larger community support
- Better tooling and IDE integration
- More comprehensive documentation and learning resources
Cons of TypeScript
- Steeper learning curve for beginners
- Slightly more verbose syntax in some cases
- Potentially longer compilation times for large projects
Code Comparison
TypeScript:
interface Person {
name: string;
age: number;
}
function greet(person: Person): string {
return `Hello, ${person.name}!`;
}
Flow:
// @flow
type Person = {
name: string,
age: number,
};
function greet(person: Person): string {
return `Hello, ${person.name}!`;
}
Both TypeScript and Flow aim to add static typing to JavaScript, but they have different approaches and ecosystems. TypeScript offers a more robust type system and better tooling support, while Flow provides a lighter-weight solution that may be easier to integrate into existing projects. The syntax differences are minimal, as shown in the code comparison. TypeScript's wider adoption often leads to better third-party library support and more community-driven resources. However, Flow's simplicity can be advantageous for smaller projects or teams looking for a less intrusive type-checking solution.
The Kotlin Programming Language.
Pros of Kotlin
- Full-featured programming language with broader application scope
- Strong interoperability with Java and Android ecosystem
- More mature and widely adopted in industry
Cons of Kotlin
- Steeper learning curve for developers new to JVM languages
- Larger runtime overhead compared to Flow's static type checking
Code Comparison
Kotlin:
fun greet(name: String): String {
return "Hello, $name!"
}
val result = greet("World")
println(result)
Flow:
// @flow
function greet(name: string): string {
return `Hello, ${name}!`;
}
const result = greet("World");
console.log(result);
Key Differences
- Kotlin is a full programming language, while Flow is a static type checker for JavaScript
- Kotlin compiles to JVM bytecode or JavaScript, Flow enhances JavaScript with type annotations
- Kotlin offers more language features and constructs, Flow focuses on adding type safety to existing JavaScript code
Use Cases
- Kotlin: Android app development, server-side applications, multiplatform projects
- Flow: Adding type checking to large JavaScript codebases, improving code quality in existing JavaScript projects
Community and Ecosystem
- Kotlin has a larger and more diverse ecosystem, with strong support from JetBrains and the Android community
- Flow has a more focused community, primarily centered around Facebook and React developers
Empowering everyone to build reliable and efficient software.
Pros of Rust
- Rust is a full-fledged programming language, offering more comprehensive features and capabilities than Flow
- Provides memory safety without garbage collection, leading to better performance and lower resource usage
- Has a growing ecosystem with a wide range of libraries and tools
Cons of Rust
- Steeper learning curve due to its unique concepts like ownership and borrowing
- Longer compilation times compared to Flow's type checking process
- Less integrated with JavaScript ecosystems, making it potentially more challenging for web developers
Code Comparison
Rust:
fn main() {
let x: i32 = 5;
println!("The value of x is: {}", x);
}
Flow:
// @flow
function add(x: number, y: number): number {
return x + y;
}
Summary
While Rust offers a more comprehensive programming experience with better performance and memory safety, Flow provides a simpler type-checking solution specifically for JavaScript. Rust's learning curve is steeper, but it offers more control and a wider range of applications. Flow, on the other hand, integrates more seamlessly with existing JavaScript projects and has a gentler learning curve for web developers already familiar with JavaScript.
The Go programming language
Pros of Go
- Compiled language with excellent performance and low memory footprint
- Built-in concurrency support with goroutines and channels
- Comprehensive standard library and robust ecosystem
Cons of Go
- Less flexible type system compared to Flow's gradual typing
- Steeper learning curve for developers coming from dynamic languages
- Lack of generics (prior to Go 1.18) made some abstractions challenging
Code Comparison
Flow:
function add(x: number, y: number): number {
return x + y;
}
Go:
func add(x int, y int) int {
return x + y
}
Summary
Go is a statically-typed, compiled language focused on simplicity and efficiency, while Flow is a static type checker for JavaScript. Go offers better performance and concurrency support, but Flow provides more flexibility with its gradual typing system. Go's syntax is more verbose but clearer, while Flow allows for more concise code within the JavaScript ecosystem. The choice between them depends on project requirements, team expertise, and performance needs.
The Dart SDK, including the VM, JS and Wasm compilers, analysis, core libraries, and more.
Pros of sdk
- Complete language ecosystem with its own compiler, runtime, and core libraries
- Supports both AOT and JIT compilation, offering flexibility for different use cases
- Strong tooling support, including a powerful IDE (IntelliJ IDEA) with Dart plugin
Cons of sdk
- Steeper learning curve due to being a full-fledged programming language
- Less widespread adoption compared to JavaScript, potentially limiting community resources
Code Comparison
sdk (Dart):
void main() {
String name = 'John';
int age = 30;
print('Hello, $name! You are $age years old.');
}
Flow:
// @flow
function greet(name: string, age: number): void {
console.log(`Hello, ${name}! You are ${age} years old.`);
}
Key Differences
- sdk is a complete programming language, while Flow is a static type checker for JavaScript
- sdk offers more comprehensive tooling and ecosystem support
- Flow integrates more seamlessly with existing JavaScript codebases
- sdk requires learning a new language syntax, while Flow extends JavaScript
Use Cases
- sdk: Developing cross-platform applications, especially with Flutter framework
- Flow: Adding type checking to existing JavaScript projects without changing the runtime
The Crystal Programming Language
Pros of Crystal
- Compiled language with static typing, offering better performance than JavaScript
- Ruby-like syntax, making it easy for Ruby developers to transition
- Built-in concurrency support with fibers
Cons of Crystal
- Smaller ecosystem and community compared to JavaScript and Flow
- Limited platform support (primarily Linux and macOS)
- Longer compilation times compared to JavaScript's immediate execution
Code Comparison
Crystal:
def greet(name : String)
puts "Hello, #{name}!"
end
greet("World")
Flow:
// @flow
function greet(name: string) {
console.log(`Hello, ${name}!`);
}
greet("World");
Key Differences
- Crystal is a compiled language, while Flow is a static type checker for JavaScript
- Crystal has a Ruby-like syntax, whereas Flow uses JavaScript syntax with type annotations
- Crystal offers native concurrency support, while Flow relies on JavaScript's asynchronous patterns
- Flow integrates with existing JavaScript codebases, while Crystal requires a complete rewrite
- Crystal's type system is built into the language, while Flow adds type checking on top of JavaScript
Both projects aim to improve code quality and catch errors early, but they take different approaches. Crystal offers a new language with built-in type safety, while Flow enhances existing JavaScript code with optional static typing.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Flow
Flow is a static typechecker for JavaScript. To find out more about Flow, check out flow.org.
Contents
- Requirements
- Using Flow
- Using Flow's parser from JavaScript
- Building Flow from source
- Join the Flow community
- License
Requirements
Flow works with:
- macOS (x86_64)
- Linux (x86_64 and arm64)
- Windows (x86_64, Windows 10 recommended)
There are binary distributions for each of these platforms and you can also build it from source on any of them as well.
Using Flow
Check out the installation instructions, and then the usage docs.
Using Flow's parser from JavaScript
While Flow is written in OCaml, its parser is available as a compiled-to-JavaScript module published to npm, named flow-parser. Most end users of Flow will not need to use this parser directly, but JavaScript packages which make use of parsing Flow-typed JavaScript can use this to generate Flow's syntax tree with annotated types attached.
Building Flow from source
Flow is written in OCaml (OCaml 5.2.0 is required).
-
Install system dependencies:
-
Mac:
brew install opam
-
Debian:
sudo apt-get install opam
-
Other Linux: see opam docs
-
Windows: cygwin and a number of dependencies like
make
,gcc
andg++
are required.One way to install everything is to install Chocolatey and then run
.\scripts\windows\install_deps.ps1
and.\scripts\windows\install_opam.ps1
. Otherwise, see the "Manual Installation" section of OCaml for Windows docs and install all of the packages listed in ourinstall_deps.ps1
.The remainder of these instructions should be run inside the Cygwin shell:
C:\tools\cygwin\Cygwin
. Thencd /cygdrive/c/Users/you/path/to/checkout
.
-
-
Validate the
opam
version is2.x.x
:opam --version
The following instructions expect
2.x.x
. Should your package manager have installed a1.x.x
version, please refer to the opam docs to install a newer version manually. -
Initialize
opam
:# on Mac and Linux: opam init # on Windows: scripts/windows/init_opam.sh
-
Install Flow's OCaml dependencies:
# from within this git checkout make deps
note: If you find that you get an error looking for
ocaml-base-compiler
version, your local dependency repo may be out of date and you need to runopam update
+opam upgrade
-
Build the
flow
binary:eval $(opam env) make
This produces the
bin/flow
binary. -
Build
flow.js
(optional):opam install -y js_of_ocaml.5.7.2 make js
This produces
bin/flow.js
.The Flow parser can also be compiled to JavaScript. Read how here.
Running the tests
To run the tests, first compile flow using make
. Then run bash ./runtests.sh bin/flow
There is a make test
target that compiles and runs tests.
To run a subset of the tests you can pass a second argument to the runtests.sh
file.
For example: bash runtests.sh bin/flow class | grep -v 'SKIP'
Join the Flow community
- Website: https://flow.org
- Discord: https://discord.gg/8ezwRUK
- irc: #flowtype on Freenode
- Twitter: follow @flowtype and #flowtype to keep up with the latest Flow news.
- Stack Overflow: Ask a question with the flowtype tag
License
Flow is MIT-licensed (LICENSE). The website and documentation are licensed under the Creative Commons Attribution 4.0 license (website/LICENSE-DOCUMENTATION).
Top Related Projects
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
The Kotlin Programming Language.
Empowering everyone to build reliable and efficient software.
The Go programming language
The Dart SDK, including the VM, JS and Wasm compilers, analysis, core libraries, and more.
The Crystal Programming Language
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot