search

vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.75k stars 388 forks source link

attribute inheritance when strictTemplates enabled #4699

Closed Doeke closed 2 weeks ago

Doeke commented 3 weeks ago

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

Enable strictTemplates: true and run type-check on vue templates that contain certain fallthrough attributes/events like id on a component:

<HelloWorld msg="You did it!" id="4" />

The other attributes that don't work are title and aria-* attributes.

Another problem is with the @click event listener on components that use defineModel (see repro link)

What is expected?

No typechecking errors are expected as attributes like id and aria-label should be treated as allowed fallthrough attributes.

What is actually happening?

Type check fails with errors (Object literal may only specify known properties):

src/App.vue:15:37 - error TS2353: Object literal may only specify known properties, and 'id' does not exist in type 'Partial<{}> & Omit<{ readonly msg?: string | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>'.

15       <HelloWorld msg="You did it!" id="4" />

Link to minimal reproduction

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

Any additional comments?

No response

KazariEX commented 3 weeks ago

Might be fixed by #4103

Doeke commented 3 weeks ago

@KazariEX What about @click + defineModel case? Is that also the same issue with fallthrough attributes?

KazariEX commented 3 weeks ago

@Doeke This is actually caused by the update event defined by defineModel. When there are no events on a component, its $emit will be inferred as any event function. Could you create a separate issue for this so that my PR can link it correctly?

Doeke commented 3 weeks ago

@KazariEX

New issue for event listener errors: https://github.com/vuejs/language-tools/issues/4701