Skip to content
This repository has been archived by the owner on Dec 8, 2020. It is now read-only.

Add type checking via flow #24

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Add type checking via flow #24

wants to merge 8 commits into from

Conversation

AriTheElk
Copy link

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 library-name@version.number. Full list of packages can be found here.

@AriTheElk
Copy link
Author

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
};

@AriTheElk
Copy link
Author

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant