Narrowing object type from array of two types

[Uninen]

I have a Pinia store that has an array like:

breadcrumbs: [] as Array<CrumbNaviItem | DynamicCrumbNaviItem>,

When I iterate this in a Vue template (using SFC and script setup), I'm narrowing the type by checking if the list item has a renderer attribute that the other type doesn't have:

<DynamicNavItem v-if="item.render" :item="item" />

The code itself works fine but Volar gives me this TS error:

Property 'render' does not exist on type '{ path: string; render: CrumbRenderer; lookupParam: string; to?: string | undefined; } | { path: string; name: string; to?: string | undefined; }'.
  Property 'render' does not exist on type '{ path: string; name: string; to?: string | undefined; }'.

Is this a Volar issue or can I do something to help it to narrow the type here?

[johnsoncodehk]

Try this

<DynamicNavItem v-if="'item' in render" :item="item" />

[Uninen]

Cool! Thanks, this indeed works! (Other way around, tho.) 👍

<BreadcrumbsNavItem v-if="'render' in item" :item="item" />