Narrowing for nested property in lost when parent object given as function parameter

[TruffeCendree]

Bug Report

🔎 Search Terms

Narrowing nested property given as function argument

🕗 Version & Regression Information

It seems the bug was present for a long time (all 4.x versions). Last checked version is 5.0.0 nightly. I checked the FAQ without finding it as a known issue.

⏯ Playground Link

Playground link with relevant code

💻 Code

import * as React from 'react'

interface Widget {
    data: { type: 'kpi' } | { type: 'text' }
}

function DashboardWidgetComponent ({ widget }: { widget: Widget }) {
    if (widget.data.type === 'text') return null

    // OK: return <DashboardWidgetKpiComponent widget={{ ...widget, data: widget.data }} />
    return <DashboardWidgetKpiComponent widget={ widget } />
}

function DashboardWidgetKpiComponent ({ widget }: { widget: Widget & { data: { type: 'kpi' } } }) {
    return <div>...</div>
}

🙁 Actual behavior

When calling DashboardWidgetKpiComponent, widget type Widget is concidered in place of Widget & { data: { type: 'kpi' }.

But on other side, directly referencing widget.data works fine, but lose memory identity (that matters in react).

🙂 Expected behavior

The code should compile without error.

[fatcerberus]

Similar to #18758, but Widget is not itself a discriminated union so I think this is actually a duplicate of #42384.

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.