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

strictTemplates + defineModel event listener type errors #4701

Open
Doeke opened this issue Aug 16, 2024 · 6 comments · May be fixed by #4700
Open

strictTemplates + defineModel event listener type errors #4701

Doeke opened this issue Aug 16, 2024 · 6 comments · May be fixed by #4700
Labels
bug Something isn't working

Comments

@Doeke
Copy link

Doeke commented Aug 16, 2024

Vue - Official extension or vue-tsc version

2.0.21

VSCode version

1.92.2

Vue version

3.4.29

TypeScript version

5.4.0

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04 LTS 24.04 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 7840U w/ Radeon  780M Graphics
    Memory: 13.28 GB / 30.66 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.15.1/bin/npm
  Browsers:
    Chrome: 127.0.6533.119

Steps to reproduce

  • Add an event listener like @click or @change on a component that uses defineModel and enable strictTemplates
  • Run type check

What is expected?

No errors, @click is a valid native event listener on components

What is actually happening?

Error (Object literal may only specify known properties...)

Link to minimal reproduction

https://github.com/Doeke/bug-stricttemplates

Any additional comments?

Was asked to make a separate issue for this

#4699 (comment)

@KazariEX
Copy link
Collaborator

KazariEX commented Aug 16, 2024

Oh I'm sorry, I thought you were referring to an error when adding defineModel, so I tried to remove it and found that the error disappeared, which led me to discover another issue...

When there are no events on a component, its $emit will be inferred as any event function.

As you said, this is the same issue with fallthrough attributes. Regardless of whether there is a defineModel, it should report an error.

@Doeke
Copy link
Author

Doeke commented Aug 16, 2024

Should it report an error? My understanding is that <MyComponent @click="onClick" /> is the correct way to add a native click event listener now that .native modifier has been removed

@KazariEX
Copy link
Collaborator

IMO in strictTemplates, just as unknown props should report errors, the listening for events is similar to assigning values to the 'onXxx' prop, and it should also apply the rules of the former.

@Doeke
Copy link
Author

Doeke commented Aug 16, 2024

My understanding is that <MyComponent @click="onClick" /> is the correct way to add a native click event listener now that .native modifier has been removed. Though I do also see the argument for not allowing this with strictTemplates and only allowing events that are defined with defineEmits. The main issue is that it is currently not consistent (only some cases it causes error)

@Doeke
Copy link
Author

Doeke commented Aug 16, 2024

Maybe it's possible to add an option to vue language options for globally allowed event listeners, kind of like htmlAttributes/dataAttributes settings?

@KazariEX
Copy link
Collaborator

What I'd fixed is exactly the inconsistency you mentioned.

The reason of <MyComponent @click="onClick" /> is the correct way to add a native click event listener, is because it passes click events to the root element of the component as a "fallthrough attribute", rather than the component itself containing the attribute; So when strictTemplates is enabled, it should report an error. This does not mean that this way of adding events is incorrect.

And what #4103 want to solve includes this issue.

@KermanX KermanX added bug Something isn't working and removed pending triage labels Aug 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
3 participants