javascript - 使用 Typescript 和 react-redux 的有状态组件：类型为 'typeof MyClass' 的参数不可分配给类型为 Component 的参数

我正在尝试学习结合 React 和 Redux 的 Typescript。

但我目前正处于困难之中。

我收到了这个错误：

..>, callback?: (() => any)...'。参数类型 'f' 和 'f' 不兼容。参数类型 'props' 和 'props' 不兼容。类型 'Props' 不能分配给类型 '{ enthusiasmLevel: number; name: string; } & { 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

你的 Props 接口的类型提示与 connect()() 预期的接口不完全匹配，如错误信息所示：

类型 'Hello' 不能赋值给类型 'Component<{ enthusiasmLevel: number; name: string; } & { onIncrement:() => IncrementEnthusiasm; onDecrement:() => DecrementEnthusiasm; }, ComponentState>'。

onIncrement 和 onDecrement 属性不能是可选的，并且
onIncrement 和 onDecrement 属性不返回 void，而分别返回 IncrementEnthusiam 和 DecrementEnthusiam。

你的 Props 接口应该是这样的：

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