Typescript Property 'label' does not exist on type 'string

Question

I use the following code

    interface State {
        resourceGroup: QuickPickItem | string;

    }

setEvent(state.resourceGroup?.label).catch(err => console.error(err));

And for it I got the following error

any
Property 'label' does not exist on type 'string | QuickPickItem'.
  Property 'label' does not exist on type 'string'.

https://code.visualstudio.com/api/references/vscode-api#QuickPickItem

Any idea how to avoid this error? without suppressing it with ts-ignore As im not able to change the QuickPickItem ...

update

I try to do the suggestion in the answer and still got the same error

Answer 1

In this case you will need to differentiate between the two possible values in the union type you have.

For example you can make sure that the value is not a string. that way typescript will infer that the value is of type QuickPickItem

interface State {     
  resourceGroup: QuickPickItem | string;   
}

let state: State = getState();

if (typeof state.resourceGroup != 'string' && state.resourceGroup?.label){
  setEvent(...)
}

You can read more about it in the typescript handbook.
Type Guards and Differentiating Types

Answer 2

Easiest is to test for the existence of the label property in your variable:

if(state.resourceGroup.label) {
   setEvent(state.resourceGroup.label).catch(err => console.error(err));
}

Other (unsafe - so only if you are 100% sure what you are doing) way is to use the exclamation mark to assert the existence of the porperty manually:

setEvent(state.resourceGroup.label!).catch(err => console.error(err));