'How can I make a component 'extend' the prop types of another?

I've made a wrapper component like this:

import WrappedComponent from 'some/external/typed/library'

interface ComponentProps { name: 'foo' | 'bar' }

function Component({ name, ...props}: ComponentProps) {
  return <WrappedComponent foobar={name} {...props} />
}

But now someone who wants to know what props Component accepts thinks it only accepts a 'name' prop when in reality it accepts all the props that WrappedComponent accepts PLUS the name prop.

How can I change ComponentProps to say "I accept everything WrappedComponent accepts and also 'name'"



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source