redux가 구성 요소 타이프 스크립트에 연결합니다. DispatchProps <any> 오류

Question

TS 2.4.2 및 2.5, React 15.6 및 16.0에서이 문제가 발생 했으므로 버전 문제는 아닙니다. 내 다른 프로젝트에이 문제가 없지만 이것은 새로운 것이므로 문제를 파악할 수 없습니다. 큰 차이점은 최신 (20171027) 버전의 https://github.com/wmonk/create-react-app-typescript

입니다.이 ListMessages 파일뿐만 아니라 다른 파일에서도 테스트했습니다. 어디서나 내가 (mapStateToProps) (구성 요소)를 연결 사용하기 위해 노력하고있어하지만 난이 오류를 얻을 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" 
    ] 
} 

@에 따르면 617,451,515,

패키지

"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

유형/- 반응 돌아 오는 당신이 StateProps/DispatchProps/OwnProps/MergedProps를 제공해야합니다. Link here

이것은 내 앱에서 simmilar 문제를 해결 한 방법입니다. 희망이 도움이됩니다.

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