我们有一种编码模式，可以将react组件拆分为两个文件，比如smart.ts和dumb.ts
dumb.ts是一个接受某些道具的正常反应组件。smart.ts将导入选择器、操作和哑组件，并使用connect HOC导出，以便注入道具——比如export connect(mapStateToProps, mapDispatchToProps)(Dumb)。
这有助于dumb.ts中的组件可以在故事书中使用，但在应用中，它与redux和parent连接不需要提供所有道具。
问题
我们可以使用ConnectedProps来获取要连接的道具类型。这将在smart.ts中定义为存在连接。现在，要在dumb.ts中使用该类型的道具定义，我们需要从smart.ts导入它，这会导致循环依赖(因为smart已经导入dumb来包装连接(。
示例代码(尽管codesandbox没有抛出循环依赖性错误(https://codesandbox.io/s/react-redux-typescript-forked-gs00w
难道不能在ToggleDumb组件中定义ToggleDumbProps并在Dumb文件中导入接口和组件吗？
因此，在SmartComponent中，您可以将SmartProps与DumbProps合并。
不使用redux中的ConnectedProps，而是可以通过从dumb组件导入Data/Action道具并传递到连接函数来解决，如下所示。
const withConnect = connect<
DataPropsFromComponent,
ActionPropsFromComponent,
>(mapStateToProps, mapDispatchToProps);
通过这种方式，需要在哑组件中定义prop，但TS根据连接函数提供的内容对其进行验证——如果不匹配，则是类型错误。
更新的示例显示了这一点，同时处理了可以从Smart组件外部注入的外部道具。
https://codesandbox.io/s/react-redux-typescript-forked-qu5vy