Reactjs 省略类型的部分以将该类型拆分为两部分

我正在尝试创建一个

extendedprops

函数，该函数将：

• 取反应组分及其部分道具
• 返回一个新的React组件，该组件不需要已经提供的道具

实例

type Props={first:string；second:string；third:string}；
const ExampleComponent=（{first，second，third}:Props）=>(
{first}
{second}
{third}
);
//将“第一”道具设置为“第一”
const ExtendedComponent=extendedprops（例如component，{first:'first'}）；
;

使用泛型来完成这项工作相当棘手，我想知道我做错了什么

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

function extendProps<P extends object, E extends Partial<P>>(
  Component: React.ComponentType<P>,
  extendedProps: E,
) {
  return (remainingProps: Omit<P, keyof E>) =>
    <Component {...remainingProps} {...extendedProps} />;
}

类型省略=拾取；
函数extendedprops(
成分：反应。成分类型
，
扩展道具：E，
) {
return（remaingprops:省略）=>
;
}

我得到了一大堆错误：

App.tsx:35:35 - error TS2344: Type 'keyof E' does not satisfy the constraint 'keyof P'.
  Type 'string | number | symbol' is not assignable to type 'keyof P'.
    Type 'string' is not assignable to type 'keyof P'.
      Type 'string' is not assignable to type 'never'.
        Type 'keyof E' is not assignable to type 'never'.
          Type 'string | number | symbol' is not assignable to type 'never'.
            Type 'string' is not assignable to type 'never'.

35   return (remainingProps: Omit<P, keyof E>) => <Component {...remainingProps} {...extendedProps} />;
                                     ~~~~~~~

App.tsx:35:49 - error TS2322: Type 'E' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
  Type 'Partial<P>' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
    Type 'Partial<P>' is not assignable to type 'P'.
      Type 'E' is not assignable to type 'P'.
        Type 'Partial<P>' is not assignable to type 'P'.

35   return (remainingProps: Omit<P, keyof E>) => <Component {...remainingProps} {...extendedProps} />;
                                                   ~~~~~~~~~


Found 2 errors.

App.tsx:35:35-错误TS2344:类型“keyof E”不满足约束“keyof P”。
类型“string | number | symbol”不可分配给类型“keyof P”。
类型“string”不可分配给类型“keyof P”。
类型“string”不可分配给类型“never”。
类型“keyof E”不可分配给类型“never”。
类型“string | number | symbol”不可分配给类型“never”。
类型“string”不可分配给类型“never”。
35返回（剩余道具：省略）=>；
~~~~~~~
App.tsx:35:49-错误TS2322:类型“E”不可分配给类型“IntrinsicattAttributes&P&{children？:ReactNode；}”。
类型“Partial
”不可分配给类型“intrinsicationAttributes&P&{children？：ReactNode；}”。
类型“Partial
”不可分配给类型“P”。
类型“E”不可分配给类型“P”。
类型“Partial
”不可分配给类型“P”。
35返回（剩余道具：省略）=>；
~~~~~~~~~
发现2个错误。

。（必须制作一些模拟类型才能在那里工作）

类型ReactComponentType=（props:p）=>null；
类型组件
=（道具：P）=>null
类型省略=拾取；
函数extendProps(
组件：反应组件类型
，
扩展道具：E，
) {
return（remainingProps:Omit）=>Component（{…remainingProps，…extendedProps}作为P）；
}
类型Props={first:string；second:string；third:string}；
const ExampleComponent=（{first，second，third}:Props）=>null
//将“第一”道具设置为“第一”
const ExtendedComponent=extendedprops（例如component，{first:'first'}）；
ExtendedComponent（{second:'second'，third:'third'}）

App.tsx:35:35 - error TS2344: Type 'keyof E' does not satisfy the constraint 'keyof P'.
  Type 'string | number | symbol' is not assignable to type 'keyof P'.
    Type 'string' is not assignable to type 'keyof P'.
      Type 'string' is not assignable to type 'never'.
        Type 'keyof E' is not assignable to type 'never'.
          Type 'string | number | symbol' is not assignable to type 'never'.
            Type 'string' is not assignable to type 'never'.

35   return (remainingProps: Omit<P, keyof E>) => <Component {...remainingProps} {...extendedProps} />;
                                     ~~~~~~~

App.tsx:35:49 - error TS2322: Type 'E' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
  Type 'Partial<P>' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
    Type 'Partial<P>' is not assignable to type 'P'.
      Type 'E' is not assignable to type 'P'.
        Type 'Partial<P>' is not assignable to type 'P'.

35   return (remainingProps: Omit<P, keyof E>) => <Component {...remainingProps} {...extendedProps} />;
                                                   ~~~~~~~~~


Found 2 errors.

type ReactComponentType<P> = (props: P) => null;
type Component<P> = (props: P) => null
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

function extendProps<P extends Record<string | number | symbol, any>, E extends Partial<P>>(
  Component: ReactComponentType<P>,
  extendedProps: E,
) {
  return (remainingProps: Omit<P, keyof E>) => Component( {...remainingProps, ...extendedProps} as P);
}

type Props = { first: string; second: string; third: string };

const ExampleComponent = ({ first, second, third }: Props) => null

// Sets the "first" prop to "FIRST"
const ExtendedComponent = extendProps(ExampleComponent, {first: 'FIRST'});
ExtendedComponent({ second: 'SECOND', third: 'THIRD' })