vuejs
Conflicting documentation on how to define emits with typescript
This is a follow-up to https://github.com/vuejs/core/issues/5696, see it for reference
What I was googling: "vue 3 define emits typescript"
This is the first result: vuejs.org/guide/typescript/composition-api.html
This is second: vuejs.org/guide/typescript/overview.html
And they don't have an example of usage with TSX that I was looking for. Instead, they misled me into using defineEmits() where I didn't need it.
I checked the first 5 pages, and the desired link isn't on any of them...
Another major confusion: the "Typing Component Emits" section here: vuejs.org/guide/typescript/composition-api.html#typing-component-emits is completely different from the section with exactly the same name here: vuejs.org/guide/typescript/options-api.html#typing-component-emits
Would be great to at least link these two sections with each other so that someone having the same query as I did would have slightest chance of finding desired info :) Thank you!
Hmm, the two sections that you consider "conflicting" are under different pages:
- "TypeScript with Composition API > Typing Component Emits"
- "TypeScript with Options API > Typing Component Emits"
I can understand the confusion if you landed directly on the sub-headers, but I believe structurally they are not conflicting in any way.
On another note, the default usage of "Vue + TypeScript" assumes you are using Vue's SFC format with TypeScript. TSX/JSX is a relatively niche usage pattern among Vue's user base (which has its own section), and we assume those who opt to use TSX are quite familiar with the other concepts already, but yes we can probably improve the experience for those who are searching for it directly from Google.
Yeah, I get that technically there's nothing wrong, but when the living person (me) is trying to deal with this - I got pretty confused.
I think the first major problem was that I couldn't find docs for Options API via Google, it was only showing me Composition API for "vue 3 define emits typescript" query.
And then when I landed on Composition API - there's no way of knowing that defineEmits() isn't supposed to work with Options API, so I was banging my head into a wall.
Regarding Vue+TSX, I switched to TSX as soon as I discovered that regular HTML templates are not being linted, this was a major dealbreaker for me, I need to be sure that I'm using correct variable names, etc. So I got into TSX very early in my Vue learning path. It is challenging but totally worth it, I can't imagine how everyone else is using HTML templates... It's like going back to AngularJS... I need my static prop validation, not just runtime prop validation, because when it's runtime - it's already too late, I need to check props during the compilation step, not when a user is trying to run my app. Hope it makes sense :) Thank you!