@click attributes in templates are not type-checked

[annyanich]

Hi there,

Thank you very much for publishing this plugin! I was very happy while planning my current project to find that there is a working implementation of template type checking for Vue 3 :)

I have observed that @click attributes and other event handlers do not seem to be type-checked by the current version of the plugin. It is possible to provide an @click="undefined" or @click="2", for example, without causing a compilation error.

I have reproduced this in the following branch of my own project's repository: https://github.com/annyanich/formGeneratorForStudIP/tree/bug-report-juit-vue-ts-checker

Instructions for building are found in README.md of that branch. The error is to be found in vue/src/components/Editor.vue, where I have the following line in my template:

<button @click="notCallable" :disabled="!canUndo">Undo</button>

where notCallable is a computed property that returns an object:

computed: {
    notCallable() {
      return {
        hello: 2,
      };
    },

As a possible improvement for the plugin, it would be nice if these event handlers would also be type checked.

Thanks a lot for your work. All the best, Ann

[pfumagalli]

That's actually the intended behaviour, as the content of the @onclick=... is actually wrapped into a function call itself.

For example, let's assume the following template:

<a @click="'foo'">bar</a>

This gets compiled (deep down in the render function) into:

createElementVNode('a', {
  onClick: ($event: any) => 'foo'
}, "bar")

Which is all fair and valid! For example, in the @click you can add things like myproperty = 'foo'

If on the other hand you have a template like:

<a @click="callMe(foo)">bar</a>

You'll get an error like Property 'foo' does not exist, as the only properties defined in that scope are $event and whatever your component exposes.

[annyanich]

Sorry for the late response... That is a very helpful explanation, thank you very much! :)