microsoft / microsoft/TypeScript
Support multiple properties for JSX.ElementAttributesProperty
- Dominant language
- Go
- Stars
- 111k
- Forks
- 14.3k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 132
Description
### 🔍 Search Terms
"multiple properties", "JSX", "ElementAttributesProperty"
### ✅ Viability Checklist
- [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
- [x] This wouldn't change the runtime behavior of existing JavaScript code
- [x] This could be implemented without emitting different JS based on the types of the expressions
- [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
- [x] This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
- [x] 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.
```ts
const VaporComp = defineVaporComponent(() => {
props: { foo: Number },
setup: () => {
return
}
})
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.
```ts
const VirtualComp = defineComponent({
props: { foo: Number },
setup: () => {
return () =>
}
})
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.
```ts
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
Contributor guide
Research direction
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.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- compilers
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100