如何解决打字稿错误 TS2339：“IntrinsicAttributes & …”类型上不存在“XXX”属性？

Question

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?

Answer 1

这似乎是 ReactRedux connect 和 Typescript 的一个更大问题，在寻找可行的解决方案时出现了这样的问题，因此我们的团队正在认真考虑在我们的 React 应用程序中删除 Typescript。

Answer 2

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

Answer 3

确保组件名称以大写字母开头