1

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.

  • Please: 1) provide `OtherType` 2) provide `Something`. Since `SomeType` expects one generic parameter, you are not allowed to use it without `A`. You might looking for [existential types](https://stackoverflow.com/questions/292274/what-is-an-existential-type) which are not supported by TypeScript – captain-yossarian from Ukraine Dec 30 '21 at 12:54
  • I added some more information. – Andrej Germič Dec 30 '21 at 14:57

0 Answers0