Stateful Component with Typescript and react-redux: Argument of type 'typeof MyClass' is not assignable to parameter of type Component

Question

I am trying to get into Typescript combined with React and Redux.

But I am struggling at the moment.

I got this error:

./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'.

That's my React Component:

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('!');
}

That's the file where the error happens:

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

I am not sure whats wrong with that. The only workaround, which worked was:

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

which is an ugly solution in my eyes.

I works for me. It looks like problem not in the component. (P.S. Also change Component<Props, {}> to Component<Props>) — Valerii

Lukas Lukas · Accepted Answer · 2019-01-12T02:13:38

The type hints of your Props interface does not exactly match the interface expected by connect()(), as indicated in the error message:

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

The onIncrement and onDecrement props must not be optional and
The onIncrement and onDecrement props do not return void but IncrementEnthusiam and DecrementEnthusiam respectively.

Your Props interface should look like this:

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

Stateful Component with Typescript and react-redux: Argument of type 'typeof MyClass' is not assignable to parameter of type Component

1 Answers