Question

我最近开始在我的React项目中使用Typescript，我正在努力理解函数声明和Redux connect函数中的泛型。

例如，如果我有以下代码

interface WidgetStateProps extends BasicConfiguration {
  filters: Filter[]
}

class Widget extends React.Component<WidgetComponentProps, {}> {
 // my component
}

现在我的理解是，通过在这里声明通用<WidgetComponentProps, {}>，我们告诉打字稿我们希望我们的Widget组件将接收的道具将具有WidgetStateProps中定义的属性和BasicConfiguration。正确的吗？

现在转到一个输入连接功能的例子很好，这个连接功能不一定与上面的组件相同。

export default connect<ModalStateProps, ModalDispatchProps, ModalOwnProps>(mapStateToProps, mapDispatchToProps)(Modal);

在这个连接函数中，我们声明了3个泛型。当两者都返回一个函数时，我对这些键入mapStateToProps和mapDispatchTopProps的方式感到困惑。此外，什么是ModalOwnProps打字？

我遇到的最后一件事就是围绕使用高阶函数连接。假设我有以下连接功能

export default function composeWidget<T extends WidgetStateProps, P extends WidgetDispatchProps, Q extends WidgetOwnProps>(Component, mapStateToProps, mapDispatchToProps = undefined, mergeProps = undefined) { 

// some more code

  return connect<T, P, Q>(wrappedMapStateToProps, wrappedMapDispatchToProps, mergeProps)(getComposedWidgetComponent(Component));
}

这就是一切都变得非常模糊的地方。从这看来，我的第一点似乎是错误的。当T extends WidgetStateProps清楚地定义第二个参数时，Component如何定义函数中第一个参数的形状WidgetStateProps。另一个困惑是我们通过扩展这些不同的接口，例如import pygsheets gc = pygsheets.authorize(outh_file='client_secret.json') sh = gc.open('shname') wks = sh.add_worksheet("wksname_b", src_worksheet=sh.worksheet_by_title("wksname_a"))？

，可以获得什么好处

使用泛型连接和在React / Redux中声明函数时

0 个答案: