Support multiple properties for JSX.ElementAttributesProperty

🔍 Search Terms

"multiple properties", "JSX", "ElementAttributesProperty"

✅ 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

After Vue 3.6, introduce a new Vapor component (Non Virtual DOM) created by defineVaporComponent, it has a props property for JSX.ElementAttributesProperty to detect props.

const VaporComp = defineVaporComponent(() => {
  props: { foo: Number },
  setup: () => {
    return <div />
  }
})

const instance = new VaporComp({ foo: 1 })
instance.props
//       ^^^^^

And Vue also provide a interop mode, so that Vapor Component and Virtual DOM Component can be used together.

But the Virtual DOM Component created by defineComponent has a $props property for JSX.ElementAttributesProperty to detect props.

const VirtualComp = defineComponent({
  props: { foo: Number },
  setup: () => {
    return () => <div />
  }
})
const instance = new VirtualComp({ foo: 1 })
instance.$props
//       ^^^^^^

📃 Motivating Example

Support Vapor Component and Virtual DOM co-usage for Vue.
Or React Class Component and Vue Component co-usage.

💻 Use Cases

1. What do you want to use this for?

• Supports define multiple properties for JSX.ElementAttributesProperty, so that Vapor Component (props) and Virtual DOM Component ($props) can used together.

  declare global {
    namespace JSX {
      interface ElementAttributesProperty { 
        $props;
        props;
      }
    }
  }
  

2. What shortcomings exist with current approaches?

• JSX.ElementAttributesProperty now only support define one property, if defined two perpoties will be expose a error.

3. What workarounds are you using in the meantime?

• None

This is implementation details: https://github.com/zhiyuanzmj/TypeScript/commit/fcfbd3e1ea3c777b81ce6efbfb17808baafe29d5

Start with TypeScript's JSX.ElementAttributesProperty behavior and the linked implementation commit, then trace how the current single-property lookup is checked. Define how both props and $props should be accepted while preserving existing JSX behavior, and verify that the proposed Vapor and Virtual DOM component examples type-check without the current error.