javascript - 带有 Typescript 和 react-redux 的有状态组件 : Argument of type 'typeof MyClass' is not assignable to parameter of type Component

Question

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

但我现在很挣扎。

我遇到了这个错误:

./src/containers/Hello.tsx [tsl] ERROR in /home/marc/Development/TypeScript-React-Starter-master/src/containers/Hello.tsx(20,61) TS2345: Argument of type 'typeof Hello' is not assignable to parameter of type 'Component<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }>'. Type 'typeof Hello' is not assignable to type 'ComponentClass<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }>'. Type 'Hello' is not assignable to type 'Component<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }, ComponentState>'. Types of property 'setState' are incompatible. Type '{ (f: (prevState: {}, props: Props) => Pick<{}, K>, callback?: (() => any) | undefined): void; (state: Pick<{}, K>, callback?: (() => any) | undefined): void; }' is not assignable to type '{ (f: (prevState: ComponentState, props: { enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }) => Pick, callback?: (() => any) | undefined): void; (state: Pick<...>, callback?: (() => any)...'. Types of parameters 'f' and 'f' are incompatible. Types of parameters 'props' and 'props' are incompatible. Type 'Props' is not assignable to type '{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }'. Type 'Props' is not assignable to type '{ onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }'. Types of property 'onIncrement' are incompatible. Type '(() => void) | undefined' is not assignable to type '() => IncrementEnthusiasm'. Type 'undefined' is not assignable to type '() => 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 接口(interface):

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

我不确定那有什么问题。 唯一可行的解​​决方法是:

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

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

Answer 1

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

Type 'Hello' is not assignable to type 'Component<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }, ComponentState>'.

1. onIncrement 和 onDecrement Prop 不能是可选的，并且
2. onIncrement 和 onDecrement Prop 不返回 void 但返回 IncrementEnthusiam 和 DecrementEnthusiam 分别。

你的 Props 界面应该是这样的:

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