TSX support attribute object literal shorthand #31797
Description
Search Terms
tsx attribute shorthand, object shorthand
Suggestion
ES6 has this great syntax of passing key value pairs in objects e.g.
function swahili() {
const hello = 'jambo';
const great = 'sawa';
return {hello, great};
}
but in TSX land this doesn't transfer well e.g.
function render() {
const hello = 'jambo';
const great = 'sawa';
return <Greetings {hello, great} />
}
typescript throws an error that it needs a TS1005: '...' expected.
It instead needs to be written as
function render() {
const hello = 'jambo';
const great = 'sawa';
return <Greetings {...{hello, great}} />
}
which seems very boiler platey.
It would be awesome if we could make a small tweak to pass attributes like es6 shorthand.
so all of these would be equal
<Foo hello={hello} world={world} />
<Foo {hello} {world} />
<foo {hello, world} />
They would all be emitted as
h(Foo, {hello, world})
Use Cases
Examples
Checklist
My suggestion meets these guidelines:
- 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, etc.)
- This feature would agree with the rest of TypeScript's Design Goals.