构建期间的反应、redux 和打字稿错误答案

【问题标题】：react, redux and typescript error during build构建期间的反应、redux 和打字稿错误
【发布时间】：2018-01-05 16:29:00
【问题描述】：

我对react和redux很陌生，我关注this tutorial，在关于Making a container 的部分，我收到一个错误（编译失败）：

./src/containers/Hello.tsx
(24,61): error TS2345: Argument of type 'typeof Hello' is not assignable to parameter of type 'ComponentType<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusia...'.
  Type 'typeof Hello' is not assignable to type 'StatelessComponent<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnt...'.
    Type 'typeof Hello' provides no match for the signature '(props: { enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

由于我在此阶段逐步按照教程进行操作，因此不确定如何修复此错误。

你好容器：

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);

Hello 组件：

import * as React from 'react';
import './Hello.css';

export interface Props {
  name: string;                   // required
  enthusiasmLevel?: number;       // optional (using ? after its name)
  onIncrement?: () => void;
  onDecrement?: () => void;
}

class Hello extends React.Component<Props, object> {
  render () {
    const { name, enthusiasmLevel = 1, onIncrement, onDecrement } = this.props;

    if (enthusiasmLevel <= 0) {
      throw new Error('You could be a little more enthusiastic.');
    }

    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;

function getExclamationMarks (n: number) {
   return Array(n + 1).join('!');
 }

【问题讨论】：

猜测，但看起来您的组件需要两个道具：热情度和名称。容器组件看起来像是在接收一个参数作为 typeof 查询。您是否检查过您是否按照教程进行操作？可能是您错误地实例化了 Hello 容器，并将参数或道具作为错误值传递给它...
@FrancisLeigh 几乎一样！
您将Hello 定义为类而不是函数的任何原因，like the tutorial does? 我并不是真正的 TypeScript 专家，但它似乎在抱怨类签名，这可能会受到影响由您选择的组件定义语法。

标签： javascript reactjs typescript redux react-redux

【解决方案1】：

错误表明 connect 函数在您提供 stateful 组件时需要一个无状态组件 - 因为 React.Component 的第二个参数是 object.

我建议去：

const Hello = ({
  name,
  enthusiasmLevel = 1,
  onIncrement,
  onDecrement
}: Props) => {
  if (enthusiasmLevel <= 0) {
    throw new Error('You could be a little more enthusiastic.');
  }
  return(
    <div className="hello">
      <div className="greeting">
        Hello {name + getExclamationMarks(enthusiasmLevel)}
      </div>
      <div>
        <button onClick={onDecrement}>-</button>
        <button onClick={onIncrement}>+</button>
      </div>
    </div>
  );
}

【讨论】：