using flowtype with @Inject from 'mobx-react'

FlowTypedMobxInject.js

import type File from "File";
import type FileService from "FileService";

type FileDetailProps = {
  file: File
};

class FileDetail extends React.Component<FileDetailProps> {
  render() {
    // remove the file prop and flow will complain!
    return <FileDownload file={this.props.file} />;
  }
}

type InjectedProps = {
  fileService: FileService
};

// for older flow versions
function typedInject<Props>(
  WrappedComponent: React.ComponentType<InjectedProps & Props>
): React.ComponentType<Props> {
  return inject("fileService")(WrappedComponent);
}

// for flow version > 60 (or so)
function typedInject<Props: {}>(
  WrappedComponent: React.ComponentType<Props>
): React.ComponentType<$Diff<Props, InjectedProps>> {
  return inject("fileService")(WrappedComponent);
}

// NOTE you can spread types from InjectedProps to reuse them
type FileDownloadProps = {
  file: File,
  ...$Exact<InjectedProps>
};

//NOTE using
//@typedInject
//class FileDownload extends ... will NOT work - why? (maybe related to `esproposal.decorators=ignore` in .flowconfig)

const FileDownload = typedInject(
  class FileDownload extends React.Component<FileDownloadProps> {
    download = () => {
      // flow will happily access both file and fileService props!
      this.props.fileService.downloadFile(this.props.file);

      // flow will complain: [flow] property `foo` (Property not found in object type)
      this.props.foo.bar();
    };

    render() {
      return <Button onPress={this.download}>download file!</Button>;
    }
  }
);

I prefer explicit way of typing inject. I described it here: facebook/flow#6777 (comment)

The proposed way has several advantages:

1. It supports covariant (readonly) props.
2. It supports optional props and defaultProps.
3. You are not required to mark optional any injected props.
4. It allows you to inject subtypes instead of props' type;
5. It allows you to inject only small part of store, not entire store.
6. It has exhaustive type checks. So you can not inject any props that are not defined in component props. You should pass to component all mandatory props that are not injected, not marked optional and not default. You can not pass prop to component that has been already injected. Also you can not pass any props that is not defined in component props.