流程:缺少`OP`的类型注释

Art*_*r Z 5 javascript reactjs flowtype redux

我有一个使用 Flow 类型连接到 Redux 存储的组件。我用:

"flow-bin": "^0.89.0",
"flow-typed": "^2.5.1",
"react-redux": "^5.0.7",
Run Code Online (Sandbox Code Playgroud)

我为 mapStateToProps 和 mapDispatchToProps 函数设置了类型

我的 index.js

// @flow
import * as React from 'react';
import { connect } from 'react-redux';
import type { Dispatch } from 'redux';
import type { DispatchProps, StateProps, NotificationItem, NotificationsProps, State, OwnProps } from './index.types';
import { createNotificationAction, createRemoveNotificationAction } from './redux';
import View from './View';

function Notifications(props: NotificationsProps) {
  return <View {...props} />;
}

const mapStateToProps = ({ notifications }: State): StateProps => ({ notifications });

const mapDispatchToProps = (dispatch: Dispatch<*>): DispatchProps => ({
  removeNotification: (item: NotificationItem) => dispatch(createRemoveNotificationAction(item)),
  createNotification: (item: NotificationItem) => dispatch(createNotificationAction(item)),
});

const Connected = connect<NotificationsProps, OwnProps, StateProps, DispatchProps, State, Dispatch<*>>(mapStateToProps, mapDispatchToProps)(Notifications);

export default Connected;
Run Code Online (Sandbox Code Playgroud)

index.types.js

// @flow
import * as React from 'react';
import type { NotificationItem } from './redux';

export type StoreNotifications = {
  notifications: Array<NotificationItem>,
}

export type MapStateToProps = StoreNotifications

export type MapDispatchToProps = {
  removeNotification: (item: NotificationItem) => any,
  createNotification: (item: NotificationItem) => any,
}

export type NotificationsProps = {
  children: React.Node,
} & MapStateToProps & MapDispatchToProps;
Run Code Online (Sandbox Code Playgroud)

Flow 显示连接函数的错误:

Flow: Missing type annotation for `OP`. `OP` is a type parameter declared in function type [1] and was implicitly instantiated at call of `connect` [2].
Run Code Online (Sandbox Code Playgroud)

当我设置了 my 的返回值后mapStateToPropsmapDispatchToProps我又遇到了另一个问题:

Flow: inexact `MapDispatchToProps` [1] is incompatible with exact object type [2].
Run Code Online (Sandbox Code Playgroud)

编辑:我已经更新了我的 index.js:

// @flow
import * as React from 'react';
import { connect } from 'react-redux';
import type { Dispatch } from 'redux';
import type { DispatchProps, StateProps, NotificationItem, NotificationsProps, State, OwnProps } from './index.types';
import { createNotificationAction, createRemoveNotificationAction } from './redux';
import View from './View';

function Notifications(props: NotificationsProps) {
  return <View {...props} />;
}

const mapStateToProps = ({ notifications }: State): StateProps => ({ notifications });

const mapDispatchToProps = (dispatch: Dispatch<*>): DispatchProps => ({
  removeNotification: (item: NotificationItem) => dispatch(createRemoveNotificationAction(item)),
  createNotification: (item: NotificationItem) => dispatch(createNotificationAction(item)),
});

const Connected = connect<NotificationsProps, OwnProps, StateProps, DispatchProps, State, Dispatch<*>>(mapStateToProps, mapDispatchToProps)(Notifications);

export default Connected;
Run Code Online (Sandbox Code Playgroud)

并输入文件:

// @flow
import * as React from 'react';

export type NotificationItem = {
  id: string,
  title: string,
  type: 'success' | 'warning' | 'danger',
  message: string,
  code: string,
  delay: number,
}

export type State = { +notifications: Array<NotificationItem> }

export type StateProps = {| +notifications: Array<NotificationItem> |}

export type DispatchProps = {|
  removeNotification: (item: NotificationItem) => any,
  createNotification: (item: NotificationItem) => any,
|}

export type OwnProps = {|
  children: React.Node
|}

export type NotificationsProps = { ...StateProps, ...DispatchProps, ...OwnProps };
Run Code Online (Sandbox Code Playgroud)

而且我没有流量问题,但是我在这一行的索引 JS 中有 lint 问题:

const Connected = connect<NotificationsProps, OwnProps, StateProps, DispatchProps, State, Dispatch<*>>(mapStateToProps, mapDispatchToProps)(Notifications);
Run Code Online (Sandbox Code Playgroud)

紧随其后OwnProps

Eslint parsing error. Unexpected parsing error
Run Code Online (Sandbox Code Playgroud)

我的 babel 设置:

"babel-eslint": "^8.2.6",
"babel-polyfill": "^6.26.0",
"eslint": "^5.4.0",
"eslint-config-standard": "^12.0.0",
"eslint-config-standard-react": "^7.0.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jest": "^21.17.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-standard": "^4.0.0",
"flow-typed": "^2.5.1",
Run Code Online (Sandbox Code Playgroud)

我正在研究 babel 和 eslint 版本