Поток: отсутствует аннотация типа для `OP` - PullRequest
Новая
       14

Поток: отсутствует аннотация типа для `OP`

2 голосов
/ 14 апреля 2019

У меня есть компонент, подключенный к хранилищу Redux с типами потока.Я использую: 

"flow-bin": "^0.89.0",
"flow-typed": "^2.5.1",
"react-redux": "^5.0.7",

Я устанавливаю типы для функций 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;

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;

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].

Когда я установил возвращаемые значения моих mapStateToProps и mapDispatchToProps, у меня возникла другая проблема: 

Flow: inexact `MapDispatchToProps` [1] is incompatible with exact object type [2].

РЕДАКТИРОВАТЬ: Я обновил свой 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;

И набирает файл: 

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

И у меня нет проблем с потоком, но у меня проблема с индексами в индексе JS вэта строка: 

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

Сразу после OwnProps: 

Eslint parsing error. Unexpected parsing error

Мои настройки 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",

Я копаюсь в версиях babel & eslint

...