具有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;
}