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

Commencez par le comportement de JSX.ElementAttributesProperty de TypeScript et le commit d’implémentation lié, puis suivez la manière dont la recherche actuelle d’une propriété unique est vérifiée. Définissez comment props et $props doivent tous deux être acceptés tout en préservant le comportement JSX existant, et vérifiez que les exemples de composants Vapor et Virtual DOM proposés passent la vérification de types sans l’erreur actuelle.