Adding flow to an existing project

Question

Is it viable to add Flowtype to an existing, large project?

I added /* @flow weak */ to a single .js file, and then ran flow check and it's highlighting tons of function calls to globally defined libs because it has no idea what any of them are. So I updated my .flowconfig file to look like this:

[ignore]
node_modules/
bower_components/
typings/

[include]
twig/

[libs]
bower_components/timezone-js/src/date.js
bower_components/jquery/dist/jquery.js
bower_components/jquery-migrate/jquery-migrate.js
bower_components/jquery-ui/jquery-ui.js
bower_components/jqueryui-touch-punch/jquery.ui.touch-punch.js
bower_components/jquery-cookie/jquery.cookie.js
bower_components/jquery.expander/jquery.expander.js
bower_components/jquery.transit/jquery.transit.js
www/js/select2.js
bower_components/fancybox/source/jquery.fancybox.pack.js
bower_components/lodash/lodash.js
bower_components/underscore.string/lib/underscore.string.js
bower_components/json2/json2.js
bower_components/jquery-validation/dist/jquery.validate.js
bower_components/jquery-file-upload/js/jquery.iframe-transport.js
bower_components/jquery-file-upload/js/jquery.fileupload.js
bower_components/DataTables/media/js/jquery.dataTables.js
bower_components/jquery.taps/jquery.taps.js
bower_components/file-saver.js/FileSaver.js
bower_components/react/react.js
bower_components/react/react-dom.js
bower_components/react/react-dom-server.js
node_modules/babel-core/external-helpers.js
node_modules/babel-core/browser-polyfill.js
... more libs ...

[options]
munge_underscores=true

And now it just runs out of memory when I run flow check.

So, what then? Is my project just too big to use flow?

Answer 1

Paths in .flowconfig are regular expressions over absolute paths. So, to ignore everything under node_modules and bower_components you would use something like this:

[ignore]
.*/node_modules/.*
.*/bower_components/.*

The [libs] section contains paths to Flow declarations (interface files), which is where you define the types for the globals in your app. You could point this to a directory where you keep all your interface files:

[libs]
.*/lib/interfaces/.*

For example, for jQuery, you could have the following declaration:

declare module "jQuery" {
  declare function $(element: any): any;
}

Note that we've used the any type, which is effectively turning off type checking for this argument or return type.

See also the section on third-party integrations in the docs.