Typescript 如何设置连接到redux的通用HOC？

TL；DR只要不使用通用药物，TS就会表示高兴。开始抱怨仿制药。也许有必要对泛型类型设置额外的约束。请看一看，也许你能指出我遗漏了什么。由于某些原因，该链接显示一个没有诊断的页面。但它在编辑模式下标记错误，如图所示

下面的部分是OK（定义如下）

函数specializeConnectPassThroughHOC(
配置：InnerConfProps和XFormConfig，
)：（c：内部类型）=>FC{
返回（组件）=>{
函数变换（p:outerrtrops）：InnerXformRtProps{
常量c:XFormConfig=config；
抛出新错误（`using${p}和${c}`）；
};
函数MapStateTops(
根州：任何，
ownProps:OuterRtGivenProps
)：OuterRtReduxProps{
抛出新错误（`using${rootState}和${ownProps}`）；
}
常量：FC=（p）=>{
常数i=xform（p）；
返回createElement(
组成部分，
{
…配置，
P
我
}
);
}
返回连接（mapStateToProps）（专用）；
}
}

这个不好

function specializeConnectPassThroughHOC2<T>(
  config: InnerConfProps & XFormConfig,
): (c: FC<T & InnerConfProps>) => FC<OuterRtGivenProps & T> {
  return (component) => {
    function xform(p: OuterRtProps): InnerXformRtProps {
      const c: XFormConfig = config;
      throw new Error(`using ${p} and ${c}`);
    };
    function mapStateToProps(
      rootState: any,
      ownProps: OuterRtGivenProps
    ): OuterRtReduxProps {
      throw new Error(`using ${rootState} and ${ownProps}`);
    }
    const specialized: FC<OuterRtProps & T> = (p) => {
      const i = xform(p);
      return createElement(
        component,
        {
          ...config,
          ...p,
          ...i,
        }
      );
    }

    return connect(mapStateToProps)(/*some thing is missing and TS cries out*/specialized);
  }
}

函数specializeConnectPassThroughHOC2(
配置：InnerConfProps和XFormConfig，
)：（c:FC）=>FC{
返回（组件）=>{
函数变换（p:outerrtrops）：InnerXformRtProps{
常量c:XFormConfig=config；
抛出新错误（`using${p}和${c}`）；
};
函数MapStateTops(
根州：任何，
ownProps:OuterRtGivenProps
)：OuterRtReduxProps{
抛出新错误（`using${rootState}和${ownProps}`）；
}
常量：FC=（p）=>{
常数i=xform（p）；
返回createElement(
组成部分，
{
…配置，
P
我
}
);
}
return connect（mapStateToProps）（/*缺少某些东西，TS呼喊着*/专门化）；
}
}

内部有一个反应组件。要正确工作，需要将shape InnerProps的某些属性传递给它。此InnerProps接口由两个子集InnerConfProps和InnerRtProps组成。它们的值可以分别在设计时和运行时获得。函数（specializeInner）在原始内部创建一个新组件，并帮助配置部件

interface InnerConfProps { inncfg: string; }
interface InnerDirectRtProps { dirrt: string; }
interface InnerXformRtProps { xrt: string; }
type InnerRtProps = InnerDirectRtProps & InnerXformRtProps;
interface OuterRtGivenProps { givrt: string; }
interface OuterRtReduxProps { rxrt: string; }
type OuterRtProps = OuterRtGivenProps & OuterRtReduxProps;
interface XFormConfig { xfcfg: string; }
type InnerProps = InnerRtProps & InnerConfProps;
const Inner: FC<InnerProps> = () => {
  return null;
}
function specializeInner(
  component: typeof Inner,
  config: InnerConfProps,
): FC<InnerRtProps> {
  return (p) => createElement(
    component,
    {
      ...config,
      ...p
    },
  );
}

接口InnerConfProps{inncfg:string；}
接口InnerDirectRtProps{dirrt:string；}
接口InnerXformRtProps{xrt:string；}
输入InnerRtProps=innerdirectprops&InnerXformRtProps；
接口OuterRtGivenProps{givrt:string；}
接口outerTredUxprops{rxrt:string；}
键入OuterRtProps=OuterRtGivenProps&OuterRtReduxProps；
接口XFormConfig{xfcfg:string；}
输入InnerProps=InnerRtProps&InnerConfProps；
常量内部：FC=（）=>{
返回null；
}
函数专门化(
组件：内部组件的类型，
配置：InnerConfProps，
)：FC{
返回值（p）=>createElement(
组成部分，
{
…配置，
P
},
);
}

现在我们更进一步。specializeFromOuter函数应该生成一个组件，该组件接收OuterRtProps的属性，并使用xform内部函数将它们转换为InnterTProps

function specializeFromOuter(
  component: typeof Inner,
  config: InnerConfProps,
): FC<OuterRtProps> {
  const xform: (
    p: OuterRtProps,
  ) => InnerRtProps = () => { throw new Error(); }
  return (p) => {
    const i = xform(p);
    return createElement(
      component,
      {
        ...config,
        ...i
      }
    )
  }
}

function specializeFromOuterWithConfig(
  component: typeof Inner,
  config: InnerConfProps & XFormConfig,
): FC<OuterRtProps> {
  const xformcfg: (p: OuterRtProps) => InnerRtProps = (p) => {
    const xc: XFormConfig = config;
    throw new Error(`using ${p} and ${xc}`);
  }

  return (p) => {
    const i = xformcfg(p);
    return createElement(
      component,
      {
        ...config,
        ...i
      },
    );
  }
}

函数specializeFromOuter(
组件：内部组件的类型，
配置：InnerConfProps，
)：FC{
常量变换：(
p:外套，
)=>InnerTrops=（）=>{抛出新错误（）；}
返回（p）=>{
常数i=xform（p）；
返回createElement(
组成部分，
{
…配置，
我
}
)
}
}

下一步是认识到xform函数也需要一些配置来完成其工作。假设xform配置的形状是XFormConfig。这样我们就得到了SpecializeFromoterWithConfig函数

function specializeFromOuter(
  component: typeof Inner,
  config: InnerConfProps,
): FC<OuterRtProps> {
  const xform: (
    p: OuterRtProps,
  ) => InnerRtProps = () => { throw new Error(); }
  return (p) => {
    const i = xform(p);
    return createElement(
      component,
      {
        ...config,
        ...i
      }
    )
  }
}

function specializeFromOuterWithConfig(
  component: typeof Inner,
  config: InnerConfProps & XFormConfig,
): FC<OuterRtProps> {
  const xformcfg: (p: OuterRtProps) => InnerRtProps = (p) => {
    const xc: XFormConfig = config;
    throw new Error(`using ${p} and ${xc}`);
  }

  return (p) => {
    const i = xformcfg(p);
    return createElement(
      component,
      {
        ...config,
        ...i
      },
    );
  }
}

函数SpecializeFromoterWithConfig(
组件：内部组件的类型，
配置：InnerConfProps和XFormConfig，
)：FC{
常量xformcfg：（p:OuterRtProps）=>InnerRtProps=（p）=>{
constxc:XFormConfig=config；
抛出新错误（`using${p}和${xc}`）；
}
返回（p）=>{
常数i=xformcfg（p）；
返回createElement(
组成部分，
{
…配置，
我
},
);
}
}

下一步是当我们发现OuterRtProps属性也被分为两部分时。一个部分直接来自上父级，并具有形状OuterRtGivenProps。另一个OuterTredUxprops部分应该从redux存储中提取。现在我们要将创建的外部组件连接到redux存储。specializeWithConnect会执行此操作

function specializeWithConnect(
  component: typeof Inner,
  config: InnerConfProps & XFormConfig
): FC<OuterRtGivenProps> {
  const xform: (
    p: OuterRtProps,
  ) => InnerRtProps = () => {
    throw new Error();
  };
  function mapStateToProps(
    rootState: any,
    ownProps: OuterRtGivenProps,
  ): OuterRtReduxProps {
    throw new Error(`using ${rootState} and ${ownProps}`);
  }
  const specialized: FC<OuterRtProps> = (p) => {
    const i = xform(p);
    return createElement(
      component,
      {
        ...config,
        ...i,
      }
    );
  }
  return connect(mapStateToProps)(specialized);
}

function specializeConnectPassThrough(
  component: typeof Inner,
  config: InnerConfProps & XFormConfig,
): FC<OuterRtGivenProps & InnerDirectRtProps> {
  function xform(p: OuterRtProps): InnerXformRtProps {
    const c: XFormConfig = config;
    throw new Error(`using ${p} and ${c}`);
  };
  function mapStateToProps(
    rootState: any,
    ownProps: OuterRtGivenProps
  ): OuterRtReduxProps {
    throw new Error(`using ${rootState} and ${ownProps}`);
  }
  const specialized: FC<OuterRtProps & InnerDirectRtProps> = (p) => {
    const i = xform(p);
    return createElement(
      component,
      {
        ...config,
        ...p,
        ...i,

      }
    );
  }

  return connect(mapStateToProps)(specialized);
}

函数专用于连接(
组件：内部组件的类型，
配置：InnerConfProps&XFormConfig
)：FC{
常量变换：(
p:外套，
)=>InnerRtProps=（）=>{
抛出新错误（）；
};
函数MapStateTops(
根州：任何，
ownProps:OuterRtGivenProps，
)：OuterRtReduxProps{
抛出新错误（`using${rootState}和${ownProps}`）；
}
常量：FC=（p）=>{
常数i=xform（p）；
返回createElement(
组成部分，
{
…配置，
我
}
);
}
返回连接（mapStateToProps）（专用）；
}

再进一步。假设InnerTrops形状还包含两个部分，一个需要变换，另一个不需要变换。specializeConnectPassThrough函数执行此操作

function specializeWithConnect(
  component: typeof Inner,
  config: InnerConfProps & XFormConfig
): FC<OuterRtGivenProps> {
  const xform: (
    p: OuterRtProps,
  ) => InnerRtProps = () => {
    throw new Error();
  };
  function mapStateToProps(
    rootState: any,
    ownProps: OuterRtGivenProps,
  ): OuterRtReduxProps {
    throw new Error(`using ${rootState} and ${ownProps}`);
  }
  const specialized: FC<OuterRtProps> = (p) => {
    const i = xform(p);
    return createElement(
      component,
      {
        ...config,
        ...i,
      }
    );
  }
  return connect(mapStateToProps)(specialized);
}

function specializeConnectPassThrough(
  component: typeof Inner,
  config: InnerConfProps & XFormConfig,
): FC<OuterRtGivenProps & InnerDirectRtProps> {
  function xform(p: OuterRtProps): InnerXformRtProps {
    const c: XFormConfig = config;
    throw new Error(`using ${p} and ${c}`);
  };
  function mapStateToProps(
    rootState: any,
    ownProps: OuterRtGivenProps
  ): OuterRtReduxProps {
    throw new Error(`using ${rootState} and ${ownProps}`);
  }
  const specialized: FC<OuterRtProps & InnerDirectRtProps> = (p) => {
    const i = xform(p);
    return createElement(
      component,
      {
        ...config,
        ...p,
        ...i,

      }
    );
  }

  return connect(mapStateToProps)(specialized);
}

函数specializeConnectPassThrough(
组件：内部组件的类型，
配置：InnerConfProps和XFormConfig，
)：FC{
函数变换（p:outerrtrops）：InnerXformRtProps{
常量c:XFormConfig=config；
抛出新错误（`using${p}和${c}`）；
};
函数MapStateTops(
根州：任何，
ownProps:OuterRtGivenProps
)：OuterRtReduxProps{
抛出新错误（`using${rootState}和${ownProps}`）；
}
常量：FC=（p）=>{
常数i=xform(