Description
Hi there 👋!
I'm really interested in the future of TSX and Vue, but couldn't find specific information about it. I'm currently using the composition API with TSX (based on this example repo). There's a few pain points:
Spreading props doesn't play well with Typescript's type checks.
Look at this example:
import { createComponent } from "@vue/composition-api";
const Rectangle = createComponent({
props: {
width: {
type: Number,
required: true,
},
height: {
type: Number,
required: true,
},
},
setup(props) {
return () => <div>{props.width}, {props.height}</div>;
},
});
const App = createComponent({
setup() {
return () => (
<div>
{/* Passes props correctly: YES. Type checks correctly: YES. */}
<Rectangle width={640} height={480} />
{/* Passes props correctly: NO. Type checks correctly: YES. */}
<Rectangle {...{ width: 640, height: 480 }} />
{/* Passes props correctly: YES. Type checks correctly: NO. */}
<Rectangle {...{ props: { width: 640, height: 480 } }} />
</div>
);
},
});When there's no spreading, it works and passes the type checks <Rectangle width={640} height={480} />. But when it comes to spreading, we are required to do it as follows: <Rectangle {...{ props: { width: 640, height: 480 } }} />. This way doesn't work with Typescript's checks, because the Rectangle component doesn't expect a props prop.
Is this going to change? We can live without typed spreading but certainly it would help a lot.
Events interfere with props, and can't be typed
We can't use props that are named like onWidthChange because this plugin will intercept it and convert it to an event listener :<Rectangle onWidthChange={width => console.log(width)} /> will become something like <Rectangle @widthChange="..." />.
Also, if Typescript users were to use Vue's events, there's no way to use type checks... forcing us to use props instead.
Possible solutions?
It could be possible to have a Babel plugin that ignores the current spreading and event naming behavior and just uses props for everything? In that case, would like to know if someone thought about this already. I'm really interested into fully typecheck my code.