Spread operator in JSX causes loss of type information for inline functions defined outside the spread operator

Bug Report

When defining conditional types on a JSX component, using a spread operator causes loss of type information on inline functions while removing the spread operator resolves the issue.

🔎 Search Terms

• "jsx spread"
• "TS7006"

⏯ Playground Link

Playground link with relevant code

💻 Code

Given the following types and JSX:

/**
 * Either all properties are included, or none of them should be
 * @example
 * type Ex = AllOrNone<{ search: string; onSearchChange: (value: string) => void}>
 *
 * // Ok
 * const t1: Ex = {
 *   search: "hello",
 *   onSearchChange: (value) => console.log(value)
 * }
 *
 * // Error, needs onSearchChange
 * const t2: Ex = {
 *   search: "hello",
 * }
 *
 * // Error, needs search
 * const t3: Ex = {
 *   onSearchChange: (value) => console.log(value)
 * }
 */
export type AllOrNone<T> = T | { [K in keyof T]?: never };


export type OrderHistoryTableProps = {
  data: OrderRow[];
  noDataText?: string;
} & SortParams &
  FilterParams &
  SearchParams;

type SortParams = AllOrNone<{
  sorting: SortingState;
  onSortChange: (state: SortingState) => void;
}>;

type FilterParams = AllOrNone<{
  filter: ColumnFiltersState;
  onFilterChange: (state: ColumnFiltersState) => void;
}>;

type SearchParams = AllOrNone<{
  search: string;
  onSearchChange: (value: string) => void;
}>;

function OrderHistoryTable({
  data,
  noDataText = "No orders to display!",
  onFilterChange,
  onSortChange,
  sorting,
  filter,
  search,
  onSearchChange,
}: OrderHistoryTableProps): JSX.Element {
  ...
}

/* sorting, filter, and search are correct types */
<OrderHistoryTable
  data={rowData}
  {...{ sorting, filter, search }}
  onSortChange={onSortChange}
  onFilterChange={setFilter}
  onSearchChange={(value) => setSearch(value)} // TS7006: Parameter 'value' implicitly has an 'any' type.
/>

However, removing the spread operator resolves the issue:

<OrderHistoryTable
  data={rowData}
  sorting={sorting}
  filter={filter}
  search={search}
  onSortChange={onSortChange}
  onFilterChange={setFilter}
  onSearchChange={(value) => setSearch(value)}
/>

🙁 Actual behavior

While using the spread operator for other props, the inline function loses type information.

🙂 Expected behavior

Given that the values provided in the spread operator are the correct type, the arguments in the inline function should retain type information.

Inizia dalla riproduzione collegata in CodeSandbox e dall’esempio JSX, concentrandoti sulla tipizzazione contestuale della funzione onSearchChange inline quando altre props utilizzano uno spread operator. Confronta il controllo dei tipi con e senza lo spread, quindi aggiungi un test di regressione che mostri che il parametro del callback mantiene il tipo previsto.