2

In my typescript/reactjs app I am trying to pass in a property called test like this, this is part of the index.tsx:

ReactDOM.render(
  <Provider store={getStore()}>
    <BrowserRouter>
      <App test={1} />
    </BrowserRouter>
  </Provider>,
  document.getElementById('content')
);

In my app.tsx I have:

export class App extends React.Component<any,{}>{
  constructor(props){
    super(props); 
  }

  render(){
    ..
  }
}

When I run the app I get this error:

ERROR in ./src/index.tsx
(24,12): error TS2339: Property 'test' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

How can I make sure this error is resolved or how can I pass in a property on my App component?

bier hier
  • 20,970
  • 42
  • 97
  • 166

3 Answers3

2

This appears to be a larger issue with ReactRedux connect, and Typescript, there has been such a problem finding a workable solution, that our team is seriously considering dropping Typescript in our react apps because of it.

1

You need to define an interface for your component's Props and pass that as a type argument to React.Component. This way, App will expect to receive a prop called test. For example:

interface Props {
    test: <whatever type test is>
}

class App extends React.Component<Props, {}> {

    // your component code
}

There is some notorious discussion around connect with TS. You may check out this SO post for help: Typescript + React/Redux: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

Parker Ziegler
  • 980
  • 6
  • 13
1

Make sure the component name starts with capital letter

Ofer Gal
  • 707
  • 1
  • 10
  • 32