Let's say I have a mapProps function that takes some props object and mapper and returns another function that accepts a component and returns a new component that has already mapped props included. It is typed like this, which is good:
export declare const mapProps: <
Props extends object,
MappedProps extends object
>(
props: Props,
// Infers props from passed props
mapper: (props: Props) => MappedProps
// Infers mapped props from return type of passed mapper function
) => <ComponentProps extends object>(
Component: ComponentType<ComponentProps>
// Infers component props from component,
) => ComponentType<Omit<ComponentProps, keyof MappedProps>>
// Return component, which will now accept same props as previous, except the props that were mapped
Here is how it is used, let's say I want to map the prop name
to the component:
type Props = {
name: string // Here I have to declare every prop it will get manually
count: number
item: string
}
const App: FC<Props> = () => {
return <div></div>
}
// Use mapProps function
const mapper = mapProps({ fullname: 'Name Surname' }, ({ fullname }) => ({
name: fullname.split(' ')[0],
}))
const MappedApp = mapper(App)
// Will now take same props as App, except "name" which was mapped
const ParentApp = () => {
return <MappedApp count={10} item="Something.." />
// Good, it does not ask for name, because it was mapped
}
I am trying to find a way, to get the type of MappedProps
from mapper
. So instead of declaring every mapped prop in type Props
I want to:
Declare mapper:
const mapper = mapProps({ fullname: 'Name Surname' }, ({ fullname })
=> ({
name: fullname.split(' ')[0],
}))
And somehow get the type of MappedProps
from it:
type Props = {
count: number,
item: string,
} & GetMappedProps<typeof mapper>
// Should be equal to {count: number, item: string, name: string}
So basically I want to implement similar behaviour to ConnectedProps
from react-redux
library.