Typescript infer rest type of generic object type

Question

I am writing a partial function for react-alike functional components. It accepts a single parameter props, then fill a specific key of the props. For example, the partial function foo fills value of prop bar to the new component.

function foo<T extends {bar: number}>(functionalComponent: (props: T) => JSX.Element) {
  return (props: Omit<T, 'bar'>) => {
    return functionalComponent({...props, bar: 3});
  }
}

However, typescript compiler complains:

'Omit<T, "bar"> & { bar: number; }' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint '{ bar: number; }'

The problem is very similar to this one, which uses infer for a parameter list. However, I didn't find an object version, instead I found this github issue, which suggests using Omit. However, Omit does not work for the generic.

A tiny example to illustrate the problem:

function func<T extends {foo: number}>(param: Omit<T, 'foo'>): T {
  return {...param, foo: 3};
}

'Omit<T, "foo"> & { foo: number; }' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint '{ foo: number; }'

I also checked an answer that explains this error, but still can't get the point.

How can I make the partial function type signature work?

is it working if you forget about `Omit` and replace `return (props: T) => {` by `return (props: T) => {` — Daniel, Jan 06 '23 at 06:29
@Daniel Did you write a typo? It seems there is no difference :) — D-Y, Jan 06 '23 at 11:13
yes, typo. I meant replace line `return (props: Omit) => {` by `return (props: T) => {` — Daniel, Jan 06 '23 at 11:30
Sorry this is not a desired behavior, since the wrapped function should have a param signature `Omit` because it partially wraps component so that callers of the returned function doesn't have to provide value of `bar`. — D-Y, Jan 07 '23 at 10:47

score 1 · Answer 1 · answered Jan 06 '23 at 08:47

Typescript can't follow what will happen with the Omit as long as it still has an unresolved generic type parameter in it. What we could do to get this to type check is to add a union with Omit<T, 'bar'> & {bar: number} to props of functionalComponent. While this seems the same as T, it's inclusion will let typescript assign the wrapped component props to the functional component props. When T is resolved, T and Omit<T, 'bar'> & {bar: number} will resolve to the same effective type, so it should have no impact to the call site:


type BaseProps ={bar: number}
function foo<T extends BaseProps>(functionalComponent: (props: 
    | T 
    | Omit<T, 'bar'> & BaseProps ) => JSX.Element) {
  return (props: Omit<T, 'bar'>) => {
    return functionalComponent({...props, bar: 3});
  }
}

Playground Link

score 0 · Answer 2 · answered Jan 06 '23 at 11:16

0

I found a brute-force workaround: using the as keyword. Not sure if there exists a better solution, so I'll leave it unresolved.

function func<T extends {foo: number}>(param: Omit<T, 'foo'>): T {
  return {...param, foo: 3} as T;
}

answered Jan 06 '23 at 11:16

D-Y

88
1
4

Typescript infer rest type of generic object type

2 Answers2