Allow JSX intrinsics to have generic call signatures

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:

<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:

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:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

Request to work on this feature

I would like to work on this feature improvement.

Start in src/compiler/checker.ts at resolveJsxOpeningLikeElement and compare how JSX intrinsics and user-defined SFCs are resolved. Use the IntrinsicElements example in the issue as the target behavior. Done means generic call signatures on intrinsics are accepted and their type parameters flow through props and children.