Typing issues with react-redux connect and class components

Not sure if this is related to #51 or #32, but I have issues with typescript-fsa in connection to react-redux’ connect and class components.

In the following example, the class component version does not compile, but the functional component version does:

import * as React from 'react';
import actionCreatorFactory, { ActionCreator } from 'typescript-fsa';
import { connect } from 'react-redux';

interface Props {
  doSomething: (thing: string) => void;
}
class MyComponent extends React.Component<Props> {
  render() {
    return <button onClick={() => this.props.doSomething('test')}/>;
  }
}
const MyFunctionalComponent = (props: Props) => <button onClick={() => props.doSomething('test')}/>;

const createActionCreator = actionCreatorFactory();
const doSomething = createActionCreator<string>('DO_SOMETHING');

const mapDispatchToProps = {
  doSomething,
};
connect(null, mapDispatchToProps)(MyComponent); // error: Argument not assignable
connect(null, mapDispatchToProps)(MyFunctionalComponent); // works

Both work if I declare Props as

interface Props {
  doSomething: ActionCreator<string>;
}

But I obviously do not want to couple the component to redux-specific stuff. Using typescript 2.8 and the most up-to-date version of all packages. Any ideas?

[aikoven]

@supermihi I’m sorry for not answering for so long.

I took a closer look and it still seems that this has to do with react-redux typings. They do a lot of work to give you better type inference, but sometimes it confuses the compiler.

I managed to fix the error you get by specifying type arguments explicitly:

connect<{}, Props>(null, mapDispatchToProps)(MyComponent); // no error

@bschlenk Could you please check if the above trick fixes your case?

[lucas1677]

@supermihi it works fine, the only thing you should do, is just define the type of component props clearly. you can refer to this:

import * as React from 'react';
import {connect} from 'react-redux';

import {TodoAppState, TodoItemState} from '@src/types/todoApp';

const TodoItem = ({id, isComplete, name}) => (
  <li>
    <input type="checkbox" defaultChecked={isComplete}/>
    {name}
  </li>
);

type PropsType = {
  todos: TodoItemState[];
};

class TodoList extends React.Component<PropsType> {
  render() {
    return (
      <div className="Todo-list">
        <ul>
          {this.props.todos.map(todo => <TodoItem key={todo.id} {...todo}/>)}
        </ul>
      </div>
    );
  }
}

export default connect(
  (state: TodoAppState) => ({
    todos: state.todos,
  })
)(TodoList);