Detect unknown/undefined prop usage

[IceBlizz6]

This is a proposal for enhancing vue-tsc

Example:

<MyComponent
    :propThatDoesNotExist="42"
/>

When running npx vue-tsc --noEmit i want it to detect that propThatDoesNotExist is not presently defined in myComponent.
This could produce a warning or error.

Feature like this currently exists in TS files.
When trying to edit fields that is not defined in some typescript class it will output:
Property 'xxx' does not exist on type 'MyClass'.

This would be very helpful for Vue developers when renaming props or performs refactoring or git rebases as looking through the code manually can be tedious.

[johnsoncodehk]

This is intentional behavior as this is often used in css selectors.

I'll explore add a option in vueCompilerOptions to change this behavior.

[IceBlizz6]

@johnsoncodehk thanks
would be great to have.
Having to opt in through some configuration is fine.

[sapphi-red]

I also think it is great to have this feature.
IMO data-* and aria-* can be ignored even if it is not used.

[xiaoxiangmoe]

https://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking
Note: If an attribute name is not a valid JS identifier (like a data-* attribute), it is not considered to be an error if it is not found in the element attributes type.

But it seems that vue always treat attribute data-foo as dataFoo

[IceBlizz6]

It may be more appropriate to handle this case by giving a warning rather than an error.
The proposed solution is to add option in vueCompilerOptions so maybe users can select option there for themselves of how severe they want to treat this issue, including the possiblity of disabling the check itself

[eladcandroid]

@johnsoncodehk Do you have any plan for adding that? Maybe we can check with
https://vuejs.org/api/options-misc.html#inheritattrs

[johnsoncodehk]

In 0.36, custom / unknown attrs types behavior handle responsibility will transfer to developer.

• Expand custom attrs example

<template>
    <div myprop="a">
</template>

// env.d.ts
declare module '@vue/runtime-dom' {
    interface HTMLAttributes {
        myprop: string
    }
}

export { }

• Allow any attrs

// env.d.ts

// for native html elements
declare module '@vue/runtime-dom' {
    interface HTMLAttributes {
        [key: string]: any
    }
    interface SVGAttributes {
        [key: string]: any
    }
}

// for vue components
declare module '@vue/runtime-core' {
    interface AllowedComponentProps {
        [key: string]: any
    }
}

export { }

[lohchab]

@johnsoncodehk Thankyou for mentioning that here. Suddenly today my Visual Studio Code started giving 'property does not exist on type' warnings for all the custom attributes starting with 'data-*' like this <h1 data-icon="check">Test</h1> after adding the code in env.d.ts for allow any attrs it solved the issue.

declare module '@vue/runtime-dom' {
interface HTMLAttributes {
[key: string]: any
}
}

export { }

[lohchab]

@johnsoncodehk Since this change regarding unknown properties. I am also getting this error on a V-Calendar Components v-model value before this it was fine. I am newbie and don't have any idea how I can omit this warning.

[ildan95]

I also think it is great to have this feature. IMO data-* and aria-* can be ignored even if it is not used.

Hello. How to enable ignoring this case?

[Fuzzyma]

This change is bonkers! How do volar check where this attribute that I passed on purpose ends up? Does it just "assumes" it is the root element of the template? But even that doesn't work properly. Vue has an attribute fallthrough on purpose and this change makes vue-tsc crash on basically every component where I use attribute fallthrough (which I use A LOT).

This feature should be opt-in and not opt-out.

How can I disable this?