Hide prototype completions for properties of a component in JSX context

🔍 Search Terms

prototype methods, hide suggestions, Function.prototype, callable type without prototype, compound components, JSX subcomponents

✅ Viability Checklist

• 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, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

Some UI components in libraries like React or Solid can expose "subcomponents" as properties. This pattern is commonly known as "compound components", which can be implemented in multiple ways. In this variant, there is a function ("root component") with properties that are functions ("subcomponents").

When typing JSX, TypeScript's autocomplete helpfully displays available subcomponents. However, Function.prototype properties and methods also show up.

This isn't a great experience, since those can never be used in this context - Function.prototype properties are never valid components in any UI framework/library.

For this reason, I'm suggesting that TypeScript never displays prototype methods when in this context (JSX opening element position).

---

More context:

In my way to finding a solution to this DX issue, my initial aim was trying to manually create some sort of "callable type" for the root component that somehow excludes prototype methods. I discussed with @Andarist on Twitter and my teammate @ciampo found this related issue ("Allow to add a call signature to the Mapped Type OR to remove all Function.prototype methods") that asks for a similar approach.

However, @Andarist suggested the solution above. I think this approach is superior for a variety of reasons:

• Zero changes required by users. Works out of the box.
• Very narrow scope.
• Has absolutely no potential downsides AFAIK (as state, Function.prototype properties are never valid components in any UI framework/library)
• I'm not very familiar with the TypeScript codebase - that said it feels like this would be a much simpler and straightforward change to implement.

📃 Motivating Example

Here's a compound component in React (19 for simplicity, since it doesn't require forwardRef) in what I call "overloaded" style (root function component with function properties as subcomponents):

function Component () {}
Component.Subcomponent = function Subcomponent () {}

When using it, the user will input something like this into their editor (playground link):

<Component>
  <Component.
            ^ TypeScript will display suggestions at this point

The suggestions will appear:

As you can see, prototype methods show up. Ideally, they wouldn't.

💻 Use Cases

Authoring components in the "overloaded" compound component API style, with better DX for consumers of the components.

動機となった JSX compound-component の例を再現し、JSX の開始タグ内の Component. の位置での補完動作を調べます。これらの候補にプロトタイプのメンバーがどのように含まれるかを確認し、有効なサブコンポーネントは引き続き利用できる一方で、Function.prototype のメンバーは利用できないことを示すカバレッジを追加します。