Typescript + React / Redux：プロパティ「XXX」はタイプ 'IntrinsicAttributes＆IntrinsicClassAttributesに存在しません

Question 1

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...'.

私が最初にエラーに遭遇したとき、それは自分の小道具を定義するインターフェースを渡していないためだと思いましたが、それを作成しました（上記のように）、それでも機能しません。何か足りないものはありますか？

ContainerComponentのコードからChildComponentpropを除外すると、（重要なpropがないChildComponentを除いて）問題なくレンダリングされますが、JSXTypescriptでそれを使用するとコンパイルが拒否されます。この記事に基づく接続ラッピングと関係があると思いますが、その記事の問題はindex.tsxファイルで発生し、プロバイダーの問題であり、他の場所で問題が発生しています。

Question 2

したがって、いくつかの関連する回答（具体的にはこれとこれと@basaratの質問に対する回答を見て）を読んだ後、私は自分に合ったものを見つけることができました。（比較的新しいReactの目には）Connectが提供していないように見えます。コンテナコンポーネントへの明示的なインターフェイスであるため、渡そうとしている小道具によって混乱しました。

したがって、コンテナコンポーネントは同じままでしたが、子コンポーネントは少し変更されました。

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忍者がこの回答に関する知識を落としたい場合は、喜んで修正します。

Question 3

の代わりにexport default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);、connectデコレータhttps://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/app/fileTree.tsx#L136-L146を優先します

@connect((state: StoreState): Props => {
    return {
        filePaths: state.filePaths,
        filePathsCompleted: state.filePathsCompleted,
        rootDir: state.rootDir,
        activeProjectFilePathTruthTable: state.activeProjectFilePathTruthTable,
        fileTreeShown: state.fileTreeShown,
    };
})

接続がここで定義されている場所https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

どうして？

使用している定義がおそらく古くなっているか無効であるようです（おそらく作成が不十分です）。