Add type checking via flow
Status
WIP
Description
This PR adds support for the flow type checker.
Notes
For maximum type safety, it is not recommended to use redux's bindActionCreators (reason here). So instead of doing this
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
setNotification,
}, dispatch),
};
}
we do this
function mapDispatchToProps(dispatch: Dispatch): Object {
return {
actions: {
setNotification: (text: string): void => dispatch(setNotification(text))
}
};
}
This is a fairly small difference, but something to keep in mind. This is also not required, it's just for maximum type safety (which is the point of flow in the first place).
Also if you're not familiar with flow, it adds a directory at the root of the project called flow-typed. This is so that flow can import the types of third party libraries that don't already use flow. New types can be installed via flow-typed install [email protected]. Full list of packages can be found here.
This PR also adds eslint and babel plugins for flow type. The babel plugin automatically converts component's types into prop types.
So this
class App extends Component {
props: {
children: Array<React.Element<>>,
actions: {
setNotification: (notification: string) => Object
},
notification: ?string
}
render(): React$Element<any> {
...
}
}
becomes this
class App extends Component {
render(): React$Element<any> {
...
}
}
App.propTypes = {
children: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired,
notification: PropTypes.string
};
One more thing: it also adds a custom vscode workspace settings file. This is so that vscode can properly display javascript files that have flow annotations in them. Without these overrides, intellisense will spit out errors about type annotations only being allowed inside typescript files.