strictTemplates errors on class, id, @click

[Doeke]

In some situations type checking fails on basic attributes and events when strictTemplates: true

In this repro link I demonstrate 3 different issues (run npx vue-tsc):

https://stackblitz.com/edit/vitejs-vite-avohbf?file=src%2FApp.vue

• Adding id=".." to component tag sometimes causes Object literal may only specify known properties, and 'id' does not exist in type ...
• Adding class=".." is not allowed in some cases for example with Transition/TransitionGroup and causes Object literal may only specify known properties, but 'class' does not exist in type 'TransitionProps'
• Adding @click="onClick" is not allowed on component tags (but only if there are no props defined?) and causes Type '{ onClick: any; }' has no properties in common with type

The first two (id and class) can be worked around by adding dataAttributes: ["id", "class"] to tsconfig. For @click errors a workaround seems to be to define one or more props on the tag.

[davidmatter]

This one seems to be resolved in 2.x. Feel free to create a new issue if you're still having issues, thanks!

[cooper667]

I'm still seeing the 3rd case:

Adding @click="onClick" is not allowed on component tags (but only if there are no props defined?) and causes Type '{ onClick: any; }' has no properties in common with type

Adding a redundant prop still works as a workaround.

├─┬ [email protected]
│ ├─┬ @vue/[email protected]
│ │ └── [email protected]

[davidmatter]

Can you be more specific about the 3rd point? Can you reproduce on https://play.vuejs.org/?

[cooper667]

Line 19 is an error, 20 and 21 are not.

src/App.vue(19,4): error TS2559: Type '{ onClick: any; }' has no properties in common with type '{ readonly msg?: string | undefined; key?: string | number | symbol | undefined; ref?: VNodeRef | undefined; ref_for?: boolean | undefined; ref_key?: string | undefined; ... 7 more ...; style?: unknown; }'.

https://stackblitz.com/edit/vitejs-vite-bukhvb?file=src%2FApp.vue

[KazariEX]

It works on my machine with latest version of vue. Maybe you just need to update deps?

[davidmatter]

Same, @Doeke please share more information about your setup (open a new issue to get inspired by a good issue template).

[cooper667]

Yea, bumping vue fixes that stackblitz

Still have the local issue, but i'll make a new issue when I can replicate in a useful way

[Doeke]

@davidmatter

Same, @Doeke please share more information about your setup (open a new issue to get inspired by a good issue template).

Done:

#4699

Hope this is enough information, would really like to be able to use the strictTemplates feature for our project