Repository: TypeScript
Issue: Spread operator in JSX causes loss of type information for inline functions defined outside the spread operator
Labels: Bug,Help Wanted

# 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.

<!--
  Please fill in each section completely. Thank you!
-->

### 🔎 Search Terms
- "jsx spread"
- "TS7006"
<!--
  What search terms did you use when trying to find an existing bug report?
  List them here so people in the future can find this one more easily.
-->

### ⏯ Playground Link

<!--
  A link to a TypeScript Playground "Share" link which shows this behavior.
  This should have the same code as the code snippet below, and use whichever settings are relevant to your report.

  As a last resort, you can link to a repo, but these will be slower for us to investigate.
-->
[Playground link with relevant code](https://codesandbox.io/p/sandbox/typescript-error-sandbox-zj4633?file=%2Fsrc%2FExample.tsx%3A73%2C32)

### 💻 Code

<!-- Please post the relevant code sample here as well. This code and the Playground code should be the same, do not use separate examples -->
Given the following types and JSX:

```tsx
/**
 * 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:

```tsx
<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.

<!-- What happened, and why it was wrong -->

### 🙂 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.
<!-- What you expected to happen instead, and why -->