如何解決打字稿錯誤 TS2339：“IntrinsicAttributes & …”類型上不存在“XXX”屬性？

Question

在我的 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 組件上傳遞一個屬性？

Answer 1

這似乎是 ReactRedux connect 和 Typescript 的一個更大問題，在尋找可行的解決方案時出現了這樣的問題，因此我們的團隊正在認真考慮在我們的 React 應用程序中刪除 Typescript。

Answer 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

Answer 3

確保組件名稱以大寫字母開頭