[解決済み] Typescript + React/Redux: プロパティ "XXX" が型 'IntrinsicAttributes & IntrinsicClassAttributes' に存在しない。

質問

私はTypescript、React、Redux（すべてElectronで動作）を使ったプロジェクトに取り組んでいますが、あるクラスベースのコンポーネントを別のコンポーネントに含め、それらの間でパラメータを渡そうとしたときに問題に遭遇しました。大雑把に言うと、コンテナ・コンポーネントは以下のような構造になっています。

class ContainerComponent extends React.Component<any,any> {
  ..
  render() {
    const { propToPass } = this.props;
    ...
    <ChildComponent propToPass={propToPass} />
    ...
  }
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

そして子コンポーネント。

interface IChildComponentProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps, any> {
  ...
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

もちろん、私は基本的なことしか言っていませんし、これらのクラスにはもっと多くのものがあります。しかし、私には有効なコードのように見えるものを実行しようとすると、まだエラーが発生します。私が得ている正確なエラー。

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

最初にこのエラーに遭遇したとき、私はプロップを定義するインターフェイスを渡していなかったからだと思ったのですが、（上にあるように）それを作成しましたが、まだ動作しません。何か見逃しているものがあるのでしょうか？

ChildComponent プロップを ContainerComponent のコードから除外すると、（ChildComponent が重要なプロップを持っていないことは別として）うまくレンダリングされますが、JSX Typescript に含めるとコンパイルが拒否されます。私は、この問題は この記事 に基づく接続ラップと関係があるかもしれないと思いますが、その記事の問題は index.tsx ファイルで発生し、プロバイダの問題であり、私は別の場所で問題を得ています。

どのように解決するのですか？

というわけで、いくつかの関連する回答 (具体的には これ と これ と@basaratの回答を見て、私は私のために働く何かを見つけることに成功しました。私の比較的新しいReactの目には）Connectがコンテナコンポーネントに明示的なインターフェースを供給していなかったので、渡そうとしたpropによって混乱したように見えます。

そのため、コンテナコンポーネントは同じままでしたが、子コンポーネントは少し変わりました。

interface IChildComponentProps extends React.Props<any> {
  ... (other props needed by component)
}

interface PassedProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps & PassedProps, any> {
  ...
}

....
export default connect<{}, {}, PassedProps>(mapStateToProps, mapDispatchToProps)    (ChildComponent);

上記はなんとか動作しました。コンポーネントがコンテナから期待するプロップを明示的に渡すと、うまくいくようで、両方のコンポーネントが適切にレンダリングされました。

注意してください。 私はこれが非常に単純化された答えであり、これが動作する理由を正確に理解していないことを知っているので、より経験豊富なReactの忍者がこの答えにいくつかの知識を落としたいと思うなら、私はそれを修正することを嬉しく思います。