6

I am starting to learn typescript and the is a behaviour that I don't understand.

I got this error:

Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void | RouteComponentProps<a...'.
  Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'.
    Type '{}' is not assignable to type 'void | RouteComponentProps<any>'.
      Type '{}' is not assignable to type 'RouteComponentProps<any>'.

enter image description here

Here is my App component :

interface AppProps extends React.Props<void> {
  todos: TodoItemData[];
  actions: typeof TodoActions;
};

interface AppState {
  /* empty */
}

class App extends React.Component<AppProps, AppState>{
  render() {return (<div></div>);
  }
}

function mapStateToProps(state: RootState) {
  return {
    todos: state.todos
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions as any, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

If I change in the declaration of my App component AppProps by void or React.Props I got no errors but I always have one with AppProps.

I don't understang why it's not working, AppProps is extending from React.Props. Did you see the mistake ?

Kornflexx
  • 1,461
  • 13
  • 19
  • React-router v4 typings are pretty new. I see that they use something like `RouteComponentProps` interface in props. To proper use them check their tests - https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/react-router/test – niba Mar 24 '17 at 17:20
  • It would help (and clarify) if you specified which version of react-router you're using. – nbkhope Mar 24 '17 at 19:06

3 Answers3

2

I ran into a similar problem with react-router@4.1.1.

I fixed it by extending my AppProps interface with RouteComponentProps interface, so in your case the AppProps interface would look like this:

import { RouteComponentProps } from 'react-router';
...

interface AppProps extends RouteComponentProps<any> {
  todos: TodoItemData[];
  actions: typeof TodoActions;
}
k2rks
  • 21
  • 4
0

Based on this answer on GitHub, this may work:

export default connect< AppProps, {}, {} >(
  mapStateToProps,
  mapDispatchToProps
)(App);
Izhaki
  • 21,638
  • 8
  • 62
  • 96
0

This has to do with react-router and redux you have to add types to your connect function:

interface AppProps {
  todos: TodoItemData[];
};

interface DispatchProps { 
  actions: typeof TodoActions;
}


interface AppState {
  /* empty */
}

class App extends React.Component<AppProps & DispatchProps & RouteComponentProps, AppState>{
  render() {return (<div></div>);
  }
}

function mapStateToProps(state: RootState) {
  return {
    todos: state.todos
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions as any, dispatch)
  };
}

export default connect<AppProps, DispatchProps, RouteComponentProps<any>(
  mapStateToProps,
  mapDispatchToProps
)(App);
JimT
  • 1