javascript - redux 连接到组件 typescript DispatchProps 错误

Question

我在 TS 2.4.2 和 2.5、React 15.6 和 16.0 上遇到过这个问题，所以我认为这不是版本问题。我的其他项目没有这个问题，但这是一个新项目，我无法弄清楚这个问题。最大的不同是我使用的是最新的 (20171027) 版本的 https://github.com/wmonk/create-react-app-typescript

它不仅是这个 ListMessages 文件，我还在其他文件中测试过它。我在任何地方尝试使用 connect(mapStateToProps)(Component) 但我收到此错误 parameter of type 'ComponentType<{ messages: any; } & DispatchProp<any>>'

代码

import * as React from 'react'
import { connect } from 'react-redux'

import { IChatMessage } from '../Chat'
// export interface IChatMessage {
//  creatorId: string,
//  groupId: string,
//  value: string,
// }

import Message from '../ChatMessage'

import './ChatGroupMessages.css'

interface IProps {
  dispatch?: (action: any) => void, // tslint:disable-line no-any
  messages?: IChatMessage[],
}

interface IState {}

class ListMessages extends React.Component<IProps, IState> {
  static defaultProps = {
    messages: [
      {creatorId: 1, groupId: 0, value: 'Waazz up'}
    ]
  }

  list: any = null // tslint:disable-line no-any

  componentDidUpdate() {
    this.list.scrollTop = this.list.scrollHeight
  }

  render() {
    const {messages} = this.props

    return (
      <div className="chat_group_messages--container">
        <div className="chat_group_messages--list" ref={list => this.list = list}>
          {messages && messages.map((m, i) => <Message record={m} key={i} />)}
        </div>
      </div>
    )
  }
}

const mapStoreToProps = store => {
  const {messages} = store || {messages: {records: []}}

  return {messages: messages.records}
}

const ConnectedListMessages = connect(mapStoreToProps)(ListMessages)

export default ConnectedListMessages

错误

(53,56): error TS2345: Argument of type 'typeof ListMessages' is not assignable to parameter of type 'ComponentType<{ messages: any; } & DispatchProp<any>>'.
  Type 'typeof ListMessages' is not assignable to type 'StatelessComponent<{ messages: any; } & DispatchProp<any>>'.
    Type 'typeof ListMessages' provides no match for the signature '(props: { messages: any; } & DispatchProp<any> & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": ["es6", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "newLine": "LF",
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "outDir": "build/dist",
    "preserveConstEnums": true,
    "removeComments": true,
    "rootDir": "src",
    "sourceMap": true,    
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5"
  },
  "exclude": [
    "acceptance-tests",
    "build",
    "config",
    "coverage",
    "jest",
    "node_modules",
    "scripts",
    "src/setupTests.ts",
    "webpack",
    "./package-scripts.js"
  ]
}

包

  "dependencies": {
    "autoprefixer": "7.1.2",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "css-loader": "0.28.4",
    "dotenv": "4.0.0",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "fs-extra": "3.0.1",
    "history": "^4.7.2",
    "html-webpack-plugin": "2.29.0",
    "jest": "20.0.4",
    "kea": "0.22.1",
    "material-ui": "^0.18.7",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.6",
    "promise": "8.0.1",
    "react": "^15.6.2",
    "react-dev-utils": "^4.0.1",
    "react-dom": "^15.6.2",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "5.0.0-alpha.6",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.7.2",
    "redux-saga": "^0.16.0",
    "reselect": "^3.0.1",
    "source-map-loader": "^0.2.1",
    "style-loader": "0.18.2",
    "sw-precache-webpack-plugin": "0.11.4",
    "url-loader": "0.5.9",
    "webpack": "3.5.1",
    "webpack-dev-server": "2.7.1",
    "webpack-manifest-plugin": "1.2.1",
    "whatwg-fetch": "2.0.3"
  },
  "devDependencies": {
    "@types/history": "4.6.0",
    "@types/jest": "^21.1.5",
    "@types/material-ui": "^0.18.3",
    "@types/node": "^8.0.47",
    "@types/react": "^16.0.18",
    "@types/react-dom": "^16.0.2",
    "@types/react-redux": "^5.0.12",
    "@types/react-router-dom": "^4.2.0",
    "@types/react-router-redux": "^5.0.9",
    "@types/react-tap-event-plugin": "0.0.30",
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "nps": "^5.7.1",
    "nps-utils": "^1.5.0",
    "ts-jest": "^20.0.7",
    "ts-loader": "^2.3.7",
    "tslint": "^5.7.0",
    "tslint-loader": "^3.5.3",
    "tslint-react": "^3.2.0",
    "typescript": "^2.4.2"
  },

Answer 1

根据@types/react-redux 你需要提供StateProps/DispatchProps/OwnProps/MergedProps。 Link here

这就是我在我的应用程序中解决类似问题的方法。希望这会有所帮助。

import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import CloudIcon from 'material-ui/svg-icons/file/cloud';
import Paper from 'material-ui/Paper';
import { CoreStatusAction, coreStatus } from '../actions/coreStatus';

interface StatusProps {
  status: any,
  getStatus: () => void,
}

const STYLES = {
  ICON: {
    height: '200px',
    width: '200px',
  },
  PAPER: {
    margin: 'auto',
    width: 'max-content',
    padding: '50px',
  },
};

class Status extends React.Component<StatusProps> {
  constructor(props?: StatusProps) {
    super(props);
  }

  render() {
    return (
      <Paper style={STYLES.PAPER}>
        <CloudIcon style={STYLES.ICON}/>
      </Paper>
    );
  }

  componentWillMount() {
    this.props.getStatus();
  }
}

const mapStateToProps = (state: any) => ({
  status: state.status,
});

const mapDispathToProps = (dispatch: Dispatch<CoreStatusAction>) => ({
  getStatus: () => dispatch(coreStatus()),
});

export default connect<{ status: any }, { getStatus: () => void }>(
  mapStateToProps,
  mapDispathToProps,
)(Status);