具有Typescript和react-redux的状态组件:类型'typeof MyClass'的参数不能分配给类型Component的参数

时间:2019-01-11 14:51:29

标签: javascript reactjs typescript redux react-redux

我正在尝试将Typescript与React和Redux结合使用。

但是我现在正在挣扎。

我收到此错误:

  

./ src / containers / Hello.tsx   [tsl] /home/marc/Development/TypeScript-React-Starter-master/src/containers/Hello.tsx(20,61)中的错误         TS2345:无法将类型'HelloType'的参数分配给类型'Component <{enthusiasmLevel:number;名称:字符串; }&{onIncrement:()=> IncrementEnthusiasm; onDecrement:()=> DecrementEnthusiasm; }>'。     类型'Hello'的类型不能分配给'ComponentClass <{enthusiasmLevel:number;名称:字符串; }&{onIncrement:()=> IncrementEnthusiasm; onDecrement:()=> DecrementEnthusiasm; }>'。       类型“ Hello”不能分配给类型“ Component <{enthusiasmLevel:number;名称:字符串; }&{onIncrement:()=> IncrementEnthusiasm; onDecrement:()=> DecrementEnthusiasm; },ComponentState>。         属性“ setState”的类型不兼容。           类型'{(f:(prevState:{},props:Props)=> Pick <{},K>,callback ?:(()=> any)| undefined):void; (状态:Pick <{},K>,回调函数?:(()=> any)|未定义):void; }'不能分配给类型'{ >选择,回调?:(()=>任何)|未定义):void; (状态:Pick <...>,回调?:(()=> any)...'。             参数“ f”和“ f”的类型不兼容。               参数“ props”和“ props”的类型不兼容。                 类型'Props'不能分配给类型'{enthusiasmLevel:number;名称:字符串; }&{onIncrement:()=> IncrementEnthusiasm; onDecrement:()=> DecrementEnthusiasm; }'。                   类型'Props'不能分配给类型'{onIncrement:()=> IncrementEnthusiasm; onDecrement:()=> DecrementEnthusiasm; }'。                     属性“ onIncrement”的类型不兼容。                       输入'(()=> void)| undefined”不能分配给类型“()=> IncrementEnthusiasm”。                         不能将类型'undefined'分配给类型'()=> IncrementEnthusiasm'。

那是我的React组件:

import * as React from 'react';
import './Hello.css';

export interface Props {
  name: string;
  enthusiasmLevel: number;
  onIncrement?: () => void;
  onDecrement?: () => void;
}

class Hello extends React.Component<Props, {}> {

   render(){
     const { enthusiasmLevel, onIncrement, onDecrement } = this.props;

     if (enthusiasmLevel <= 0) {
       throw new Error('You could be a little more enthusiastic. :D');
     }

     return (
       <div className="hello">
         <div className="greeting">
           Hello {name + getExclamationMarks(enthusiasmLevel)}
         </div>
         <div>
           <button onClick={onDecrement}>-</button>
           <button onClick={onIncrement}>+</button>
         </div>
       </div>
     );
   }

}

export default Hello;

// helpers

function getExclamationMarks(numChars: number) {
  return Array(numChars + 1).join('!');
}

就是发生错误的文件:

import Hello from '../components/Hello';
import * as actions from '../actions/';
import { StoreState } from '../types/index';
import { connect, Dispatch } from 'react-redux';

export function mapStateToProps({ enthusiasmLevel, languageName }: StoreState) {
  return {
    enthusiasmLevel,
    name: languageName,
  };
}

export function mapDispatchToProps(dispatch: Dispatch<actions.EnthusiasmAction>) {
  return {
    onIncrement: () => dispatch(actions.incrementEnthusiasm()),
    onDecrement: () => dispatch(actions.decrementEnthusiasm()),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Hello);

StoreState接口:

export interface StoreState {
    languageName: string;
    enthusiasmLevel: number;
}

我不确定这是怎么了。 唯一可行的解​​决方法是:

export default connect(mapStateToProps, mapDispatchToProps)(Hello as any);

这是我眼中的丑陋解决方案。

1 个答案:

答案 0 :(得分:0)

您的Props界面的类型提示与connect()()期望的界面不完全匹配,如错误消息所示:

  

'Hello'类型不能分配给'Component <{enthusiasmLevel:number;名称:字符串; }& {onIncrement:()=> IncrementEnthusiasm; onDecrement:()=> DecrementEnthusiasm; } ,ComponentState>”。

  1. onIncrementonDecrement道具不得为可选,并且
  2. onIncrementonDecrement道具不会返回void,而是分别返回IncrementEnthusiamDecrementEnthusiam

您的Props界面应如下所示:

export interface Props {
  name: string;
  enthusiasmLevel: number;
  onIncrement: () => IncrementEnthusiasm;
  onDecrement: () => DecrementEnthusiasm;
}