Repository: TypeScript
Issue: Allow JSX intrinsics to have generic call signatures
Labels: Suggestion,In Discussion

<!-- 🚨 STOP 🚨 𝗦𝗧𝗢𝗣 🚨 𝑺𝑻𝑶𝑷 🚨

Half of all issues filed here are duplicates, answered in the FAQ, or not appropriate for the bug tracker.

Please help us by doing the following steps before logging an issue:
  * Search: https://github.com/Microsoft/TypeScript/search?type=Issues
  * Read the FAQ, especially the "Common Feature Requests" section: https://github.com/Microsoft/TypeScript/wiki/FAQ

-->

## Search Terms

type checking, jsx intrinsics, generic type, signature

## Suggestion

Allow JSX intrinsics defined in IntrinsicElements to support generic call signatures, as is supported for user-defined SFCs.

## Use Cases

Suppose you want to create a small DSL using JSX. You would need to model the primitive statements of the DSL. Your options are intrinsics and user-level components.

Intrinsics are clearly the more natural fit for this use case. Some reasons are:
* they are immediately available without separate import statements,
* the use of lower case makes them visually distinct from user-defined components,

However, intrinsics are not as capable as user-level components (pre-defined or user-defined). Currently they cannot be assigned generic type signatures. This makes them less expressive, and so, less useful.

The proposed change will bring parity between intrinsics and user-level components. In short, it will be possible to create a pre-defined set of intrinsics that are just as expressive as user-level SFCs.

## Examples

Consider the following hypothetical DSL in JSX:

```jsx
<for items={books} with={book => book.genre === 'scifi'}>
{book => (
    <b>{book.title}</b>
)}
</for>
```

Currently, the `for` intrinsic cannot be generic over the type of the items, unlike user-defined SFCs which may be generic. To bring this capability to intrinsics, we would need to allow JSX.IntrinsicElements to support generic signatures. Here is what it might look like for this example DSL:

```typescript
declare namespace JSX {
    interface IntrinsicElements {
        for: <T>(props: {
            items: T[],
            with?: (item: T) => boolean,
            children?: (item: T) => Element | Element[]
        }) => Element;

        b: { children: string }
    }
}
```

The implementation of this change will require a small number of changes to `src/compiler/checker.ts`. A good starting point is the function `resolveJsxOpeningLikeElement`.

## Checklist

My suggestion meets these guidelines:

* [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
* [x] This wouldn't change the runtime behavior of existing JavaScript code
* [x] This could be implemented without emitting different JS based on the types of the expressions
* [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
* [x] This feature would agree with the rest of [TypeScript's Design Goals](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals).

## Request to work on this feature

I would like to work on this feature improvement.