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

Bắt đầu với hành vi của JSX.ElementAttributesProperty trong TypeScript và commit triển khai được liên kết, sau đó theo dõi cách việc tra cứu một thuộc tính duy nhất hiện tại được kiểm tra. Xác định cách cả props và $props đều được chấp nhận mà vẫn giữ nguyên hành vi JSX hiện có, đồng thời xác minh rằng các ví dụ component Vapor và Virtual DOM được đề xuất đều vượt qua kiểm tra kiểu mà không gặp lỗi hiện tại.