microsoft / microsoft/TypeScript
Support multiple properties for JSX.ElementAttributesProperty
Nessuno ha ancora preso questa issue.
- Lingua principale
- Go
- Stelle
- 111k
- Fork
- 14.3k
- Merge medio
- 2g 4h
- PR unite (30g)
- 132
Descrizione
### 🔍 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
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia dal comportamento di JSX.ElementAttributesProperty di TypeScript e dal commit di implementazione collegato, quindi traccia come viene verificata l’attuale ricerca di una singola proprietà. Definisci come dovrebbero essere accettati sia props sia $props, preservando il comportamento JSX esistente, e verifica che gli esempi di componenti Vapor e Virtual DOM proposti superino il controllo dei tipi senza l’errore attuale.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- typescript
- Ambito
- compilers
- Tipo di issue
- Funzionalità
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 25/100