microsoft / microsoft/TypeScript
Support multiple properties for JSX.ElementAttributesProperty
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- Go
- Sterne
- 111k
- Forks
- 14.3k
- Ø Merge
- 2 T. 4 Std.
- Gemergte PRs (30 T.)
- 132
Beschreibung
### 🔍 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
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit dem Verhalten von TypeScript's JSX.ElementAttributesProperty und dem verlinkten Implementierungs-Commit. Verfolge anschließend, wie die aktuelle Suche nach einer einzelnen Eigenschaft geprüft wird. Definiere, wie sowohl props als auch $props akzeptiert werden sollen, während das bestehende JSX-Verhalten erhalten bleibt, und überprüfe, dass die vorgeschlagenen Vapor- und Virtual-DOM-Komponentenbeispiele ohne den aktuellen Fehler die Typprüfung bestehen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- typescript
- Bereich
- compilers
- Issue-Typ
- Feature
- Schwierigkeit
- 5/5
- Geschätzter Aufwand
- Über eine Woche
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 25/100