Closed
Description
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:
Playground Link:
Related Issues: