Почему ругается Vscode на типы?

Question

[700Hp]

Всем привет, подскажите как побороть ошибку типизации
Есть данный участок кода в компоненте vue

<span v-if="item.append.componentOptions?.counter" class="counter">
                {{ item.append.componentOptions?.counter }}
              </span>

Ошибка гласит так:

Свойство "counter" не существует в типе "ISharedButtonProps | ITextProps | TOptionsSize | IOptionSTimer | TCounter".
Свойство "counter" не существует в типе "ISharedButtonProps".ts(2339)

Тип интерфейса:

type TCounter = {
  counter: number | string | null;
};

export interface INavigationGroupComponent extends IComponent {
  class?: string;
  componentOptions?: ITextProps | TOptionsSize | IOptionSTimer | TCounter | ISharedButtonProps;
}

При чём, если оставляю из списка возможных все, кроме TCounter, то ошибка пропадает.

Answer 1

[Aetae]

Ну потому что это union - он строгий, он позволяет получать свойство напрямую только в том случае, если оно есть у всех членов union'а. В ином случае надо руками делать проверку, которая сузит тип до нужного. if ('counter' in ...) и т.п.