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

Question

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

但是我现在正在挣扎。

我收到此错误：

./src/containers/Hello.tsx [tsl] /home/marc/Development/TypeScript-React-Starter-master/src/containers/Hello.tsx(20,61）中的错误TS2345：“ typeof Hello”类型的参数不能分配给'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; }'不能分配给类型'{（f：（prevState：ComponentState，props：{enthusiasmLevel：number; name：string;}＆{onIncrement：（）=> IncrementEnthusiasm; onDecrement：（）=> DecrementEnthusiasm;} = >选择，回调？：（（）=>任何）|未定义）：void; （状态：Pick <...>，回调？：（（）=> any）...'。参数'f'和'f'的类型不兼容。参数'props'和'props'的类型不兼容。类型'Props'不能分配给类型'{enthusiasmLevel：number; name：string;}＆{onIncrement：（）=> IncrementEnthusiasm; onDecrement：（）=> DecrementEnthusiasm;}'。类型'Props'不能分配给类型'{onIncrement：（）=> IncrementEnthusiasm; onDecrement：（）=> DecrementEnthusiasm;}'。属性'onIncrement'的类型不兼容。类型'（（）=> void）|未定义'不能分配给类型'（（ ）=> 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);

在我眼里这是一个丑陋的解决方案。

Answer 1

错误消息中指出， Props接口的类型提示与connect()()所需的接口不完全匹配：

类型“ Hello”不能分配给类型“ Component <{enthusiasmLevel：number; 名称：字符串； }＆ {onIncrement：（）=> IncrementEnthusiasm; onDecrement：（）=> DecrementEnthusiasm; } ，ComponentState>。

1. onIncrement和onDecrement道具不能是可选的，并且
2. onIncrement和onDecrement道具不会返回void而是分别返回IncrementEnthusiam和DecrementEnthusiam 。

您的Props界面应如下所示：

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