Flow Blog
Flow articles and announcements
Types-First: A Scalable New Architecture for Flow
Posted May 18, 2020 by Panagiotis Vekris
Flow Types-First mode is out! It unlocks Flow’s potential at scale by leveraging fully typed module boundaries. Read more in our latest blog post.
Read more on Medium →Making Flow error suppressions more specific
Posted Mar 16, 2020 by Daniel Sainati
We’re improving Flow error suppressions so that they don’t accidentally hide errors.
Read more on Medium →What we’re building in 2020
Posted Mar 9, 2020 by Andrew Pardoe
Learn about how Flow will improve in 2020.
Read more on Medium →Improvements to Flow in 2019
Posted Feb 19, 2020 by Andrew Pardoe
Take a look back at improvements we made to Flow in 2019.
Read more on Medium →How to upgrade to exact-by-default object type syntax
Posted Jan 29, 2020 by Jordan Brown
Object types will become exact-by-default. Read this post to learn how to get your code ready!
Read more on Medium →Spreads: Common Errors & Fixes
Posted Oct 30, 2019 by Jordan Brown
Fixes to object spreads will expose errors in your codebase. Read more about common errors and how to fix them.
Read more on Medium →Live Flow errors in your IDE
Posted Oct 25, 2019 by Gabe Levi
Live errors while you type makes Flow feel faster in your IDE!
Read more on Medium →Coming Soon: Changes to Object Spreads
Posted Aug 20, 2019 by Jordan Brown
Changes are coming to how Flow models object spreads! Learn more in this post.
Read more on Medium →Upgrading Flow Codebases
Posted Apr 9, 2019 by Jordan Brown
Having trouble upgrading from 0.84.0? Read about how the Flow team upgrades Flow at Facebook!
Read more on Medium →A More Responsive Flow
Posted Feb 8, 2019 by Gabe Levi
Flow 0.92 improves on the Flow developer experience.
Read more on Medium →What the Flow Team Has Been Up To
Posted Jan 28, 2019 by Avik Chaudhuri
Take a look at what the Flow was up to in 2018.
Read more on Medium →Supporting React.forwardRef and Beyond
Posted Dec 13, 2018 by Jordan Brown
We made some major changes to our React model to better model new React components. Let’s talk about React.AbstractComponent!
Read more on Medium →Asking for Required Annotations
Posted Oct 29, 2018 by Sam Goldman
Flow will be asking for more annotations starting in 0.85.0. Learn how to deal with these errors in our latest blog post.
Read more on Medium →On the Roadmap: Exact Objects by Default
Posted Oct 18, 2018 by Jordan Brown
We are changing object types to be exact by default. We’ll be releasing codemods to help you upgrade.
Read more on Medium →New Flow Errors on Unknown Property Access in Conditionals
Posted Mar 16, 2018 by Gabe Levi
TL;DR: Starting in 0.68.0, Flow will now error when you access unknown properties in conditionals.
Read more on Medium →Better Flow Error Messages for the JavaScript Ecosystem
Posted Feb 20, 2018 by Caleb Meredith
Over the last year, the Flow team has been slowly auditing and improving all the possible error messages generated by the type checker. In Flow 0.66 we’re excited to announce a new error message format designed to decrease the time it takes you to read and fix each bug Flow finds.
Read more on Medium →Typing Higher-Order Components in Recompose With Flow
Posted Sep 3, 2017 by Ivan Starkov
One month ago Recompose landed an official Flow library definition. The definitions were a long time coming, considering the original PR was created by @GiulioCanti a year ago.
Read more on Medium →Private Object Properties Using Flow’s Opaque Type Aliases
Posted Aug 25, 2017 by Jordan Brown
In the last few weeks, a proposal for private class fields in Javascript reached stage 3. This is going to be a great way to hide implementation details away from users of your classes. However, locking yourself in to an OOP style of programming is not always ideal if you prefer a more functional style. Let’s talk about how you can use Flow’s opaque type aliases to get private properties on any object type.
Read more on Medium →Even Better Support for React in Flow
Posted Aug 16, 2017 by Caleb Meredith
The first version of Flow support for React was a magical implementation of
React.createClass()
. Since then, React has evolved significantly. It is time
to rethink how Flow models React.
Linting in Flow
Posted Aug 4, 2017 by Roger Ballard
Flow’s type information is useful for so much more than just proving your programs are correct. Introducing Flow linter.
Read more on Medium →Opaque Type Aliases
Posted Jul 27, 2017 by Jordan Brown
Do you ever wish that you could hide your implementation details away from your users? Find out how opaque type aliases can get the job done!
Read more on Medium →Strict Checking of Function Call Arity
Posted May 7, 2017 by Gabe Levi
One of Flow’s original goals was to be able to understand idiomatic JavaScript. In JavaScript, you can call a function with more arguments than the function expects. Therefore, Flow never complained about calling a function with extraneous arguments.
We are changing this behavior.
Introducing Flow-Typed
Posted Oct 13, 2016 by Jeff Morrison
Having high-quality and community-driven library definitions (“libdefs”) are important for having a great experience with Flow. Today, we are introducing flow-typed: A repository and CLI tool that represent the first parts of a new workflow for building, sharing, and distributing Flow libdefs.
The goal of this project is to grow an ecosystem of libdefs that allows Flow’s type inference to shine and that aligns with Flow’s mission: To extract precise and accurate types from real-world JavaScript. We’ve learned a lot from similar efforts like DefinitelyTyped for TypeScript and we want to bring some of the lessons we’ve learned to the Flow ecosystem.
Here are some of the objectives of this project:
Property Variance and Other Upcoming Changes
Posted Oct 4, 2016 by Sam Goldman
The next release of Flow, 0.34, will include a few important changes to object types:
- property variance,
- invariant-by-default dictionary types,
- covariant-by-default method types,
- and more flexible getters and setters.
Windows Support is Here!
Posted Aug 1, 2016 by Gabe Levi
We are excited to announce that Flow is now officially available on 64-bit Windows! Starting with Flow v0.30.0, we will publish a Windows binary with each release. You can download the Windows binary in a .zip file directly from the GitHub releases page or install it using the flow-bin npm package. Try it out and report any issues you come across!
Getting Flow working on Windows was not easy, and it was made possible by the hard work of Grégoire, Çagdas and Fabrice from OCamlPro.
New Implementation of Unions and Intersections
Posted Jul 1, 2016 by Sam Goldman
Summary
Before Flow 0.28, the implementation of union/intersection types had serious bugs and was the root cause of a lot of weird behaviors you may have run into with Flow in the past. These bugs have now been addressed in a diff landing in 0.28.
Version 0.21.0
Posted Feb 2, 2016 by Gabe Levi
Yesterday we deployed Flow v0.21.0! As always, we’ve listed out the most interesting changes in the Changelog. However, since I’m on a plane and can’t sleep, I thought it might be fun to dive into a couple of the changes! Hope this blog post turns out interesting and legible!
JSX Intrinsics
If you’re writing JSX, it’s probably a mix of your own React Components and some intrinsics. For example, you might write
1 2 3 |
|
In this example, FluffyBunny
is a React Component you wrote and div
is a
JSX intrinsic. Lower-cased JSX elements are assumed to be intrinsics by React
and by Flow. Up until Flow v0.21.0, Flow ignored intrinsics and gave them the
type any
. This meant Flow let you set any property on JSX intrinsics. Flow
v0.21.0 will, by default, do the same thing as v0.20.0, However now you can
also configure Flow to properly type your JSX intrinsics!
Version 0.19.0
Posted Dec 1, 2015 by Gabe Levi
Flow v0.19.0 was deployed today! It has a ton of changes, which the Changelog summarizes. The Changelog can be a little concise, though, so here are some longer explanations for some of the changes. Hope this helps!
@noflow
Flow is opt-in by default (you add @flow
to a file). However we noticed that
sometimes people would add Flow annotations to files that were missing @flow
.
Often, these people didn’t notice that the file was being ignored by Flow. So
we decided to stop allowing Flow syntax in non-Flow files. This is easily fixed
by adding either @flow
or @noflow
to your file. The former will make the
file a Flow file. The latter will tell Flow to completely ignore the file.
Declaration files
Files that end with .flow
are now treated specially. They are the preferred
provider of modules. That is if both foo.js
and foo.js.flow
exist, then
when you write import Foo from './foo'
, Flow will use the type exported from
foo.js.flow
rather than foo.js
.
We imagine two main ways people will use .flow
files.
Typing Generators with Flow
Posted Nov 9, 2015 by Sam Goldman
Flow 0.14.0 included support for generator functions. Generator functions provide a unique ability to JavaScript programs: the ability to suspend and resume execution. This kind of control paves the way for async/await, an upcoming feature already supported by Flow.
Version 0.17.0
Posted Oct 7, 2015 by Gabe Levi
Today we released Flow v0.17.0! The first thing you may notice is that we changed the way we display errors at the command line. The new errors look like this:
This should hopefully help our command line users understand many errors without having to refer to their source code. We’ll keep iterating on this format, so tell us what you like and what you don’t like! Thanks to @frantic for building this feature!
There are a whole bunch of other features and fixes in this release! Head on over to our Release for the full list!
Version 0.16.0
Posted Sep 22, 2015 by Jeff Morrison
On Friday we released Flow v0.16.0! We had some major perf improvements that we wanted to get into a release, plus let/const support was ready (thanks again @samwgoldman)!
As always, the Changelog is best at summing up the big changes.
Version 0.15.0
Posted Sep 10, 2015 by Gabe Levi
Today we released Flow v0.15.0! A lot has changed in the last month and we’re excited to get the hard work of all our contributors in front of people! Big thanks to everyone who contributed to this release!
Check out the Changelog to see what’s new.
Version 0.14.0
Posted Jul 29, 2015 by Gabe Levi
It has come to our attention that not everyone obsessively checks GitHub for Flow releases. This came as a surprise, but we would like to support these users too. Therefore, we will start announcing each Flow release on the blog, starting with this release.
So here is Flow v0.14.0! Check out the Changelog for the canonical list of what has changed.
Announcing Disjoint Unions
Posted Jul 3, 2015 by Avik Chaudhuri
Sometimes programs need to deal with different kinds of data all at once, where the shape of the data can be different based on what kind of data the code is looking at. This kind of programming is so common in functional programming languages that almost all such languages come with a way of:
- Specifying such data by a set of disjoint cases, distinguished by “tags”, where each tag is associated with a different “record” of properties. (These descriptions are called “disjoint union” or “variant” types.)
- Doing case analysis on such data, by checking tags and then directly accessing the associated record of properties. (The common way to do such case analysis is by pattern matching.)
Examples of programs that analyze or transform such data range from compilers working with abstract syntax trees, to operations that may return exceptional values, with much more in between!
As of Flow 0.13.1 it is now possible to program in this style in JavaScript in a type-safe manner. You can define a disjoint union of object types and do case analysis on objects of that type by switching on the value of some common property (called a “sentinel”) in those object types.
Flow’s syntax for disjoint unions looks like:
type BinaryTree =
{ kind: "leaf", value: number } |
{ kind: "branch", left: BinaryTree, right: BinaryTree }
function sumLeaves(tree: BinaryTree): number {
if (tree.kind === "leaf") {
return tree.value;
} else {
return sumLeaves(tree.left) + sumLeaves(tree.right);
}
}
Announcing Bounded Polymorphism
Posted Mar 12, 2015 by Avik Chaudhuri
As of Flow 0.5.0, you can define polymorphic functions and classes with bounds on their type parameters. This is extremely useful for writing functions and classes that need some constraints on their type parameters. Flow’s bounded polymorphism syntax looks like
class BagOfBones<T: Bone> { ... }
function eat<T: Food>(meal: T): Indigestion<T> { ... }
The problem
Consider the following code that defines a polymorphic function in Flow:
function fooBad<T>(obj: T): T {
console.log(Math.abs(obj.x));
return obj;
}
This code does not (and should not!) type check. Not all values obj: T
have a property x
, let alone a property x
that is a number
, given the additional requirement imposed by Math.abs()
.
Announcing Flow Comments
Posted Feb 20, 2015 by Gabe Levi
As of Flow 0.4.0, you can put your Flow-specific syntax in special comments. If you use these special comments then you do not need to transform away Flow-specific syntax before running your code. While we strongly recommend that you write your code without the special comments, this feature will help people who can’t fit a Flow-stripping transformation into their setup. This was one of our most requested features and hopefully it will enable even more people to use Flow!
This feature introduces 3 special comments: /*:
, /*::
, and /*flow-include
. Flow will read the code inside these special comments and treat the code as if the special comment tokens didn’t exist. These special comments are valid JavaScript block comments, so your JavaScript engine will ignore the code inside the comments.
Announcing Typecasts
Posted Feb 18, 2015 by Basil Hosmer
As of version 0.3.0, Flow supports typecast expression.
A typecast expression is a simple way to type-annotate any JavaScript expression. Here are some examples of typecasts:
(1 + 1 : number);
var a = { name: (null: ?string) };
([1, 'a', true]: Array<mixed>).map(fn);
For any JavaScript expression <expr>
and any Flow type <type>
, you can write
(<expr> : <type>)
Note: the parentheses are necessary.
Announcing Import Type
Posted Feb 18, 2015 by Jeff Morrison
As of Flow 0.3.0, it’s now possible to import types from another module. So, for example, if you’re only importing a class for purposes of referencing it in a type annotation, you can now use the new import type
syntax to do this.
Motivation
Has this ever happened to you:
// @flow
// Post-transformation lint error: Unused variable 'URI'
import URI from "URI";
// But if you delete the require you get a Flow error:
// identifier URI - Unknown global name
module.exports = function(x: URI): URI {
return x;
}
Now you have an out! To solve this problem (and with an eye toward a near future with ES6 module syntax), we’ve added the new import type
syntax. With import type
, you can convey what you really mean here — that you want to import the type of the class and not really the class itself.