Detect unknown/undefined prop usage

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.

[henribru]

This isn’t just about fallthrough either, as shown in https://github.com/johnsoncodehk/volar/issues/1383 this is causing errors for many completely standard HTML attributes directly on the elements. It seems unreasonable requiring people to add custom declaration files to avoid that

[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 { }