带有 Typescript 和 react-redux 的有状态组件：“typeof MyClass”类型的参数不可分配给 Component 类型的参数答案

【问题标题】：Stateful Component with Typescript and react-redux: Argument of type 'typeof MyClass' is not assignable to parameter of type Component带有 Typescript 和 react-redux 的有状态组件：“typeof MyClass”类型的参数不可分配给 Component 类型的参数
【发布时间】：2019-06-06 12:19:59
【问题描述】：

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

但我现在很挣扎。

我收到了这个错误：

./src/containers/Hello.tsx [tsl] /home/marc/Development/TypeScript-React-Starter-master/src/containers/Hello.tsx(20,61) 中的错误 TS2345：“typeof Hello”类型的参数不可分配给“组件 IncrementEnthusiasm; onDecrement: () => 递减热情； }>'。类型 'typeof Hello' 不可分配给类型 'ComponentClass IncrementEnthusiasm; onDecrement: () => 递减热情； }>'。类型“你好”不能分配给类型“组件 IncrementEnthusiasm; onDecrement: () => 递减热情； }，组件状态>'。属性“setState”的类型不兼容。输入 '{ (f: (prevState: {}, props: Props) => Pick, callback?: (() => any) | undefined): void; （状态：Pick，回调？：（（）=>任何）|未定义）：无效； }' 不能分配给类型 '{ (f: (prevState: ComponentState, props: { moodLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }) = > Pick, callback?: (() => any) | undefined): void; （状态：Pick<...>，回调？：（（）=>任何）...'。参数“f”和“f”的类型不兼容。参数 'props' 和 'props' 的类型不兼容。类型“道具”不可分配给类型“{热情级别：数字；名称：字符串； } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => 递减热情； }'。类型“道具”不可分配给类型“{ onIncrement: () => IncrementEnthusiasm; onDecrement: () => 递减热情； }'。属性“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);

在我看来这是一个丑陋的解决方案。

【问题讨论】：

你能发布你的 StoreState 界面吗？
@Frank 我添加了它。
我为我工作。看起来问题不在组件中。（P.S. 还要将 Component 更改为 Component）

标签： javascript reactjs typescript redux react-redux

【解决方案1】：

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

类型 'Hello' 不能分配给类型 'Component{ onIncrement: () => IncrementEnthusiasm; onDecrement: () => 递减热情； }，组件状态>'。

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

您的Props 界面应如下所示：

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

【讨论】：