将子组件props扩展到包装器组件

Question

我想创建一个包装器组件，该组件选择内部组件的某些道具的一部分并添加一些客户定义的道具。问题在于，pick将创建类型而不是接口。因此我无法添加其他键。我该如何执行呢？

type innerProps = Partial<Pick<InnerComponentProps<T>, |"id"|"otherProps">>
interface outerComponentProps {
    // extend inner props and add more custom props
}

有没有办法将innerProps分解为outerComponentProps？

Answer 1

您可以通过几种方法来执行此操作，但是要坚持使用接口，可以扩展Partial<Pick<InnerComponentProps, 'id'|'otherProps'>>类型：

interface InnerComponentProps {
    id: number;
    otherProps: object[];
    skippedProp: boolean;
}

interface OuterComponentProps extends 
  Partial<Pick<InnerComponentProps, 'id' | 'otherProps'>> 
{
    newProp: string;
}

Typescript-playground demo