Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Vue emit types #679

Closed
wants to merge 1 commit into from
Closed

Conversation

henribru
Copy link
Contributor

This PR changes emits in the Vue components to use the object syntax, which allows specifying the type(s) of the thing(s) you are emitting. This accomplishes two things. The less interesting one is that the types are checked within the components itself, so you don't accidentally emit the wrong type. The other and more significant is that if you use a tool which typechecks Vue templates such as vue-tsc, it will check that the callback you use as an event listener in the parent conforms to what's being emitted. E.g. if you do @update:modelValue=functionThatTakesAString on a Switch, you'll get a type error because we've declared that Switch emits a boolean.

I went a bit back and forth on whether I should use any or unknown for ListBox and Radio Group. I landed on any because I think unknown is likely to be unergonomic. In almost all cases you'll probably use these components in a way where the same type is always being emitted and with unknown you'll have to always cast it to that type. You can't cast inside Vue templates because Typescript syntax isn't allowed, so you're forced to create a function in the script section just to do the cast. any is a bit less safe but it avoids these issues. It's still an improvement on the current situation because we declare that only one value is emitted, so a callback with multiple arguments would be flagged.

The reason all of them are arrow functions that just return true is that this syntax allows for runtime validation of emits. Returning true just says that the emit is valid.

@vercel
Copy link

vercel bot commented Jul 10, 2021

@henribru is attempting to deploy a commit to the Tailwind Labs Team on Vercel.

A member of the Team first needs to authorize it.

@RobinMalfait
Copy link
Collaborator

Hey! Thank you for your PR!
Much appreciated! 🙏

I added some tweaks and opened a new PR here: #712
Your code (and name) is still in there so you are still marked as a contributor.

Thank you very much!

@henribru henribru deleted the vue-emit-types branch August 21, 2021 08:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants