如何解决打字稿错误TS2339：类型'IntrinsicAttributes＆...上不存在属性'XXX'？答案

【问题标题】：How to resolve typescript error TS2339: Property 'XXX' does not exist on type 'IntrinsicAttributes & ...?如何解决打字稿错误TS2339：类型'IntrinsicAttributes＆...上不存在属性'XXX'？
【发布时间】：2018-03-15 15:13:33
【问题描述】：

在我的 typescript/reactjs 应用程序中，我试图像这样传递一个名为 test 的属性，这是 index.tsx 的一部分：

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

在我的 app.tsx 中有：

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

  render(){
    ..
  }
}

当我运行应用程序时出现此错误：

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

如何确保此错误已得到解决，或者如何在我的 App 组件上传递属性？

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

这似乎是 ReactRedux 连接和 Typescript 的一个更大问题，在寻找可行的解决方案时存在这样的问题，因此我们的团队正在认真考虑将 Typescript 放入我们的 React 应用程序中。

【讨论】：

【解决方案2】：

您需要为组件的Props 定义一个interface，并将其作为类型参数传递给React.Component。这样，App 将期望收到一个名为test 的prop。例如：

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

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

    // your component code
}

关于connect 与 TS 有一些臭名昭著的讨论。您可以查看此 SO 帖子寻求帮助：Typescript + React/Redux: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

【讨论】：

【解决方案3】：

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

【讨论】：