Skip to content

Mapped Types with Intersections in React Props Definition, results in type is not assignable error #27201

Closed
@IllusionElements

Description

@IllusionElements

Search Terms:
Mapped Types with React Props
incorrect assignable reference
Code
the intent is for this to be a decorator

type Mutate<T extends string | number | symbol> = Readonly<
  { [K in T]: MutationFn }
>
const withMutation = <
  Key extends string,
  V extends OperationVariables,
  TData extends object = any
>(
  mutationProps: Omit<MutationProps<TData, V>, 'children'>
) => {
  return <P extends object>(
    Component: ComponentType<
      P &
        Mutate<Key> &
        Pick<MutationResult<TData>, 'loading' | 'data' | 'error'>
    >
  ) =>
    class WithMutation extends React.Component<P> {
      render() {
        const key = (mutationProps.mutation
          .definitions[0] as OperationDefinitionNode).name!.value as K
        return (
          <Mutation {...mutationProps}>
            {(mutateFn: MutationFn, result: MutationResult<TData>) => {
              const error = result.error! 

              return (
                <Component
                  loading={result.loading!}
                  error={error}
                  {...result.data}
                  {...this.props}
                  {...{ [key]: mutateFn }}
                />
              )
            }}
          </Mutation>
        )
      }
    }
}

// A *self-contained* demonstration of the problem follows...
// Test this by running `tsc` on the command-line, rather than through another build tool such as Gulp, Webpack, etc.

Expected behavior:
the props should be correct, for reference the mapped type behavior produces this I think

type Mutate<T extends string | number | symbol> = Readonly<
  { [K in T]: MutationFn }
>

Mutate<'submitForm'> === Readonly<{ submitForm: MutationFn }>

not actually sure why it's saying the type is not assignable since
type '((IntrinsicAttributes & IntrinsicClassAttributes<Component<P & Readonly<{ [K in Key]: MutationFn<any, OperationVariables>; }> & Pick<MutationResult, "data" | "loading" | "error">, any, any>> & Readonly<...> & Readonly<...>) | (IntrinsicAttributes & ... 2 more ... & { ...; }))["loading"]'

should evaluate to boolean.
Actual behavior:
image

Playground Link:

Related Issues:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs More InfoThe issue still hasn't been fully clarified

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions