4 ms·

My only wish now is for the TSX experience to be rounded out. From a reactivity standpoint, Vue has a much more ergonomic/easy to use API for handling componen

My only wish now is for the TSX experience to be rounded out. From a reactivity standpoint, Vue has a much more ergonomic/easy to use API for handling component state, effects, and computed values (in my opinion) than React. But in the last 6-8 months, I've leaned away from Single-File Components because when you want to do something like define a bunch of small components, it's a lot more difficult to do than with multiple TSX functions you can chuck in one file. So I've been using Vue with TSX, and the experience (in the last few months only, before that was pretty bad) is okay, but not as solid as you'd get with React. I'm not the only one who must feel this way, because this exists and has a lot of stars: "Reactivue: Use Vue Composition API in React components" https://github.com/antfu/reactivue https://github.com/antfu/reactivue Unfortunately, this is a weird stance to take in the Vue community, almost nobody uses JSX/TSX. Because of this, the development efforts towards it aren't as much a priority. Overall, I'd rate the experience as "decent" and "totally usable", but I hope to see the DX for Vue's TSX community improve over the coming months. --- Edit 2: Disregard the below, this already exists apparently Edit 1: Having to write two type definitions for Component Props: one TS interface/type, and one as the JS object sucks. That's my one big complaint. I know it's impossible because props need a runtime value but someone should make a plugin/babel transform to decorate the "props" key from the generic argument here: const MyComponent = defineComponent<MyComponentProps> Use reflection on "MyComponentProps" to set "props" key. There's another comment below discussing this drawback too.

lloydatkinson 6y ago
They have improved TSX support in Vue 3. Did you try it? What does or does not work? I'm planning on switching to TSX.
- gavinray 6y ago
  No it totally works, it's not bad. The one big broken thing in August was that the type for components (RenderContext) thought component props should be passed as "props={ myprop: 1 }" instead of "myprop={1}". See: https://cdn.discordapp.com/attachments/568037134968160256/730811100815163452/unknown.png https://cdn.discordapp.com/attachments/568037134968160256/73... Comment I made about this I dug up: "The issue seems to be that the definition for RenderContext<Props> puts the props under the key "props", so when trying to define them on your JSX/TSX element, it expects you to put them under <MyComponent props={ } />. If you do this though, it breaks in another way because it's missing the other properties of RenderContext and it's not a great API =/" This is fixed now though I am pretty sure.
EvanYou 6y ago
> Having to write two type definitions for Component Props: one TS interface/type, and one as the JS object sucks. Uh, you don't have to? TS inference works with the JS objects. There's no need to provide the generic argument here. Also check out this: https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md#with-typescript https://github.com/vuejs/rfcs/blob/sfc-improvements/active-r... (auto-generating runtime types from TS interface)
- gavinray 6y ago
  Holy shit, Evan You replied to my comment. Happy Vue user since 2016. > TS inference works with the JS objects. There's no need to provide the generic argument here. That's totally valid -- I am just being nitpicky and complaining because if possible I'd prefer to do it the other way: TS type -> JS object > auto-generating runtime types from TS interface Whoa. Well, that solves that then.
- nikeee 6y ago
  I just looked at the sample code you provided. Having no experience with Vue (only React and Angular), but heavy TS user, something came to my eye: Is it correct that `declare const props` will not only get used to type-check stuff but also emit code based on that? I think thats unintuitive. TS basically means "take away all the static types and you get what the compiler emits". A lot of developers won't be able to distinguish between TS and the magic that some framework does. I've made similar observations when working with Angular devs. Correct my if I've mistaken something. /2c
JMTQp8lwXL 6y ago
> Unfortunately, this is a weird stance to take in the Vue community, almost nobody uses JSX/TSX. Typed components is 200% of why I'm writing React these days. Angular has typed components too (they went in on TypeScript early), but the Angular Language Service / IDE integration didn't come to later-- so for a period, no intellisense. But having intellisense while writing TSX is so wonderful, especially when you're working with complex or deeply nested object structures.
- gavinray 6y ago
  Do you write Vue as well? I have to hop back and forth between Vue and React frequently and the experience of writing a TSX component is pretty nearly identical. For stateless components -- it's literally the same syntax as React. For stateful components, you just need to wrap your component in "defineComponent()" and your TSX elements get returned from a closure in "setup()".

lloydatkinson 6y ago

They have improved TSX support in Vue 3. Did you try it? What does or does not work? I'm planning on switching to TSX.

gavinray 6y ago
No it totally works, it's not bad. The one big broken thing in August was that the type for components (RenderContext) thought component props should be passed as "props={ myprop: 1 }" instead of "myprop={1}". See: https://cdn.discordapp.com/attachments/568037134968160256/730811100815163452/unknown.png https://cdn.discordapp.com/attachments/568037134968160256/73... Comment I made about this I dug up: "The issue seems to be that the definition for RenderContext<Props> puts the props under the key "props", so when trying to define them on your JSX/TSX element, it expects you to put them under <MyComponent props={ } />. If you do this though, it breaks in another way because it's missing the other properties of RenderContext and it's not a great API =/" This is fixed now though I am pretty sure.

EvanYou 6y ago

> Having to write two type definitions for Component Props: one TS interface/type, and one as the JS object sucks. Uh, you don't have to? TS inference works with the JS objects. There's no need to provide the generic argument here. Also check out this: https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md#with-typescript https://github.com/vuejs/rfcs/blob/sfc-improvements/active-r... (auto-generating runtime types from TS interface)

gavinray 6y ago
Holy shit, Evan You replied to my comment. Happy Vue user since 2016. > TS inference works with the JS objects. There's no need to provide the generic argument here. That's totally valid -- I am just being nitpicky and complaining because if possible I'd prefer to do it the other way: TS type -> JS object > auto-generating runtime types from TS interface Whoa. Well, that solves that then.
nikeee 6y ago
I just looked at the sample code you provided. Having no experience with Vue (only React and Angular), but heavy TS user, something came to my eye: Is it correct that `declare const props` will not only get used to type-check stuff but also emit code based on that? I think thats unintuitive. TS basically means "take away all the static types and you get what the compiler emits". A lot of developers won't be able to distinguish between TS and the magic that some framework does. I've made similar observations when working with Angular devs. Correct my if I've mistaken something. /2c

JMTQp8lwXL 6y ago

> Unfortunately, this is a weird stance to take in the Vue community, almost nobody uses JSX/TSX. Typed components is 200% of why I'm writing React these days. Angular has typed components too (they went in on TypeScript early), but the Angular Language Service / IDE integration didn't come to later-- so for a period, no intellisense. But having intellisense while writing TSX is so wonderful, especially when you're working with complex or deeply nested object structures.

gavinray 6y ago
Do you write Vue as well? I have to hop back and forth between Vue and React frequently and the experience of writing a TSX component is pretty nearly identical. For stateless components -- it's literally the same syntax as React. For stateful components, you just need to wrap your component in "defineComponent()" and your TSX elements get returned from a closure in "setup()".