Компонент Stateful с Typescript и реагировать-редуксом: Аргумент типа 'typeof MyClass' не может быть назначен параметру типа Component

Question

Я пытаюсь войти в Typescript в сочетании с React и Redux.

Но сейчас я борюсь.

Я получил эту ошибку:

. / SRC / контейнеры / Hello.tsx [tsl] ОШИБКА в /home/marc/Development/TypeScript-React-Starter-master/src/containers/Hello.tsx(20,61) TS2345: Аргумент типа 'typeof Hello' не может быть назначен параметру типа 'Component <{entiasmLevel: number; имя: строка; } & {onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }>». Тип 'typeof Hello' нельзя назначить типу 'ComponentClass <{энтузиазм: номер; номер; имя: строка; } & {onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }>». Тип «Hello» не может быть назначен типу «Component <{энтузиазм: уровень; число; имя: строка; } & {onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }, ComponentState> '. Типы свойства setState несовместимы. Тип '{(f: (prevState: {}, props: Props) => Pick <{}, K>, обратный вызов ?: (() => любой) | undefined): void; (состояние: Pick <{}, K>, обратный вызов ?: (() => любой) | undefined): void; } 'нельзя назначить для типа' {(f: (prevState: ComponentState, props: {энтузиазм: уровень: имя; строка;} & {onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm;}) = > Pick, callback ?: (() => любой) | undefined): void; (состояние: Pick <...>, обратный вызов ?: (() => любой) ... '. Типы параметров 'f' и 'f' несовместимы. Типы параметров «реквизит» и «реквизит» несовместимы. Тип 'Props' нельзя назначить типу {{iasias_Level: номер; имя: строка; } & {onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }». Тип "Props" нельзя назначить типу "{onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }». Типы свойств onIncrement несовместимы. Тип '(() => void) | undefined «нельзя назначить типу» () => IncrementEnthusiasm '. Тип 'undefined' нельзя назначить типу () => IncrementEnthusiasm '.

Это мой реактивный компонент:

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 <{энтузиазм: уровень; число; имя: строка; } & <em>{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;
}