angular - Typescript: Get Exclusive Members from Union Interface Type

Question

How do I get the Exclusive Member from a Union Typescript?

selectedQueueItems: Array< TestA | TestB > = [];

TestA has an interface member called Food, that TestB interface does not have. However most of the other interface members are similar between each.

Receiving Error:

Property 'Food' does not exist on type 'TestA | TestB'.

Property 'Food' does not exist on type 'TestB'

Currently working with existing design in our code base.

Reference question:

Typescript: Get Exclusive Members from Union Class Type

Answer 1

The easiest way to do this is to have each interface have a common property that has a unique value for each type in the union. This is a discriminated union.

That might look something like:

interface TestA {
  type: 'A'
  Food: string
}

interface TestB {
  type: 'B'
}

With that setup, you can test for item.type === 'A' and then typescript knows that you have object of type TestA.

That might look like this:

for (const item of selectedQueueItems) {
  if (item.type === 'A') {
    // item is known to be a TestA in this scope, since only TestA has: .type === 'A'
    console.log(item.Food) // Works
  }
}

If there is no property like that, you can still check for the properties presence before you access it with a 'key' in object check.

for (const item of selectedQueueItems) {
  if ('Food' in item) {
    // item is known to be a TestA in this scope, since only TestA has .Food
    console.log(item.Food) // Works
  }
}