molecule icon indicating copy to clipboard operation
molecule copied to clipboard

Add type checking via flow

Open ariamckinley opened this issue 8 years ago • 2 comments

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.

ariamckinley avatar May 28 '17 04:05 ariamckinley

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

ariamckinley avatar May 28 '17 04:05 ariamckinley

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.

ariamckinley avatar May 28 '17 04:05 ariamckinley