Typescript conditional types in object destructuring

Question

I want to call a function with an object as only argument. This object can be two different interfaces which collides (1+ properties have the same key but different possible values).

In my main function, I want to call getFoo if the type value in the object if foo and getBar if the type value in the object if bar.

interface Foo {
  title: string
  number: 1 | 2
}
interface FooWithType extends Foo {
  type: 'foo'
}

interface Bar {
  title: string
  number: 3 | 4
}
interface BarWithType extends Bar {
  type: 'bar'
}

function getFoo(params: Foo): void
function getBar(params: Bar): void

function main({ type, ...rest }: FooWithType | BarWithType) {
  return type === 'foo' ? getFoo(rest) : getBar(rest)
}

I have a TypeScript issue when I'm doing a conditional type on a destructured object where Type '{ title: string; number: 3 | 4; }' is not assignable to type 'Foo' because my rest value is still an union type when I typecheck it:

var rest: {
    title: string;
    number: 1 | 2;
} | {
    title: string;
    number: 3 | 4;
}

Bastien Robert · Accepted Answer · 2021-04-26 12:27:19Z

3

Typescript do not understand the rest type because it's destructured so uncorrelated to the type value. There's two possible ways to fix it without edit anything but the main function.

The first is type assertion (not recommended):

function main({ type, ...rest }: FooWithType | BarWithType) {
  return type === 'foo' ? getFoo(rest as Foo) : getBar(rest as Bar)
}

playground link

The second is to not destructure your object (better way):

function main(params: FooWithType | BarWithType) {
  return params.type === 'foo' ? getFoo(params) : getBar(params)
}

playground link

answered Apr 26, 2021 at 12:27

Bastien Robert

9661 gold badge12 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript conditional types in object destructuring

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related