Question

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

但是我现在正在挣扎。

我收到此错误：

./ src / containers / Hello.tsx [tsl] /home/marc/Development/TypeScript-React-Starter-master/src/containers/Hello.tsx(20,61）中的错误 TS2345：无法将类型'HelloType'的参数分配给类型'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; }'不能分配给类型'{ >选择，回调？：（（）=>任何）|未定义）：void; （状态：Pick <...>，回调？：（（）=> any）...'。参数“ f”和“ f”的类型不兼容。参数“ props”和“ props”的类型不兼容。类型'Props'不能分配给类型'{enthusiasmLevel：number;名称：字符串； }＆{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);

这是我眼中的丑陋解决方案。

Answer 1

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

'Hello'类型不能分配给'Component <{enthusiasmLevel：number;名称：字符串； }＆ {onIncrement：（）=> IncrementEnthusiasm; onDecrement：（）=> DecrementEnthusiasm; } ，ComponentState>”。

onIncrement和onDecrement道具不得为可选，并且
onIncrement和onDecrement道具不会返回void，而是分别返回IncrementEnthusiam和DecrementEnthusiam。

您的Props界面应如下所示：

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

具有Typescript和react-redux的状态组件：类型'typeof MyClass'的参数不能分配给类型Component的参数

1 个答案: