Question

我正在创建一个更高阶的函数，该函数打算在React中使用，但是为简单起见，它没有任何JSX。

基本上，我在这里想要实现的目标是，我有一个高阶函数，该函数将向函数调用中注入一些必需的值。

也就是说-HOF传递给的函数需要这些参数。从HOF返回的函数不会。

这是我的代码：

type CardProps = {
  title: string; 
  somethingFromHoc: string; 
}

const createCard = (props: CardProps) => props; 

type HocProps = {
  somethingFromHoc: string; 
}

type DerivedProps<T extends {}, U extends T> = Omit<U, keyof T>; 


const withSomething = <P extends HocProps>(fn: (props: P) => P) => {
  return (props2: DerivedProps<HocProps, P>) => {

    const newProps : P = { ...props2, somethingFromHoc: "hello" }; //Error!
    return fn(newProps)
  }
}

const HocCard = withSomething(createCard);


HocCard({
  title: "hello"
});

我怀疑问题出在DerivedProps上。

也就是说，DerivedProps的意思是“只是一个对象，它是原始props类型中的所有内容，但HOC创建的值除外”。

当我再次将它们合并在一起时，我期望HocProps + DerivedProps = OrignalProps总是正确的。

我对此有误吗？

我总是可以通过以下方式抑制此错误：

const newProps : P = { ...props2, somethingFromHoc: "hello" } as P;

但是有一种错误的情况吗？

这是问题的简化版本：

const anotherThing = <P extends HocProps>(input: DerivedProps<HocProps, P>): P =>{
  return {
    ...input,
    somethingFromHoc: "hello"
  };j 
}

使用Omit util类型时，“可以分配给类型'P'的约束，但是可以用约束的另一个子类型实例化'P'”

0 个答案: