typescript typing connect props for class component [duplicated]

Question

duplicating this question: Typescript + React/Redux: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes But with a better minimal snippet and reference.

question

When using react-redux+typescript, I found that the props mapped by connect is not recognized by tslint.

Error and example as below:

Property 'counter' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.ts(2339)

Property 'counterAdd' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.ts(2339)

Here's part of the example(same as (#what I did, first line):

import React from "react";
import { connect } from "react-redux";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h2>{this.props.counter}</h2>
        <button onClick={this.props.counterAdd}>+</button>
      </div>
    );
  }
}

export default connect(
  (state: any) => ({
    counter: state.counter
  }),
  {
    counterAdd: () => ({ type: "ADD" })
  }
)(App);

What I did

• Tried searching for a while and made a minimal snippet.
• Found a documentation on functional component

Answer 1

Assign the Generic Type Variables like this

- class App extends React.Component {

+ class App extends React.Component<{
+   counter: number;
+   counterAdd: () => object;
+ }> {

Check the effect