Generic type parameter inferred differently across two call-site positions with opposite variance (narrow type vs union) #4683

import * as React from 'react';

// --- Base type and its structural superset ---
type Metric = {
    metricKey: string;
};

type AdditionalMetricDetails = {
    initialized: boolean;
};

type CardinalityInfo = {
    cardinality: number;
};

type MetricWithCardinality = Metric & Required<CardinalityInfo>;
type EnrichedMetricWithCardinality = Metric & AdditionalMetricDetails & Required<CardinalityInfo>;
// ^ EnrichedMetricWithCardinality is a strict superset of MetricWithCardinality —
//   every Enriched instance already satisfies MetricWithCardinality.

// --- Table/Column machinery, mirroring a react-table-style generic component ---
type TableInstance<D extends object> = {
    defaultColumn?: Partial<Column<D>>;
};

type CellProps<D extends object, V = any> = TableInstance<D> & {
    value: V;
    row: { original: D };
};

type Column<D extends object, V = any> = {
    Header: string;
    accessor: keyof D;
    Cell?: (props: CellProps<D, V>) => React.ReactNode;
};

type TableColumn<D extends object> = Column<D>;

interface TableProps<D extends object> {
    data: D[] | undefined;
    columns: TableColumn<D>[];
}

function Table<D extends object>(props: TableProps<D>): React.ReactElement {
    return <div>{props.data?.length}</div>;
}

// --- The actual usage ---
const columns: TableColumn<MetricWithCardinality>[] = [
    {
        Header: 'Metric Key',
        accessor: 'metricKey',
        Cell: ({ value }: CellProps<MetricWithCardinality, string>) => value,
    },
];

function TopMetricsTable(props: {
    metrics: (MetricWithCardinality | EnrichedMetricWithCardinality)[];
}) {
    return <Table columns={columns} data={props.metrics} />;
}