Type-checking errors on fallthrough attributes and AllowedComponentProps

[cexbrayat]

Consider a simple component using a Field from the vee-validate library:

<script setup lang="ts">
import { Field } from 'vee-validate';
</script>

<template>
  <Field id="name" name="name" value="Cedric" />
</template>

Note that Field has an id, which is not a prop but a fallthrough attribute, so the resulting HTML is:

<input id="name" name="name">

The problem is vue-tsc (v1.6.5) does not compile, as id is not recognized:

npm run type-check
src/App.vue:6:10 - error TS2345: Argument of type '{ id: string; name: string; value: string; }' is not assignable to parameter of type '{ label?: string | undefined; as?: string | Record<string, any> | undefined; bails?: boolean | undefined; uncheckedValue?: any; validateOnInput?: boolean | undefined; validateOnChange?: boolean | undefined; ... 21 more ...; onVnodeUnmounted?: ((vnode: VNode<...>) => void) | ... 1 more ... | undefined; }'.
  Object literal may only specify known properties, and 'id' does not exist in type '{ label?: string | undefined; as?: string | Record<string, any> | undefined; bails?: boolean | undefined; uncheckedValue?: any; validateOnInput?: boolean | undefined; validateOnChange?: boolean | undefined; ... 21 more ...; onVnodeUnmounted?: ((vnode: VNode<...>) => void) | ... 1 more ... | undefined; }'.

6   <Field id="name" name="name" value="Cedric" />

This only happens with strictTemplates: true in vueCompilerOptions.

I used to get around this by using AllowedComponentProps:

declare module '@vue/runtime-core' {
  interface AllowedComponentProps {
    id?: string;
  }
}

but this does not do the trick here, as now Field is not found at all:

src/App.vue:6:4 - error TS2339: Property 'Field' does not exist on type '{}'.

You can find a small repro here: https://stackblitz.com/edit/github-ekza7z?file=src/App.vue

npm i && npm run type-check

So my questions are:

• is AllowedComponentProps the correct way to handle the case of attributes here?
• if so, as it does break the compilation by not finding Field anymore, is there an issue with vue-tsc?
• or is it something that the vee-validate author could do something about so it would work out of the box?

[cexbrayat]

Updated repro using Vue playground

https://play.vuejs.org/#eNp9UctOwzAQ/BXLl15Kc+itBCSoigQHQNCjL1G8DS5+yV6HSFH+nXVCU5BQT/bOzI5n1z2/837VJuAbXsY6KI8sAibPdGWbG8ExCn4rrDLeBWQ9e1CgJRvYITjDFi3AVVtpJSuExbWwZTF5UAcVCMZrYqhirJw6lSRTWxkQnOXjXJFPyuUWZFA1AQX1lcVswpcUpnb2oJrVMTpLiftsLHjtjFcawotH5SwF3rCRyVyltft6GjEMCZYnvP6A+vMf/Bi7jAn+GiBCaCnZzGEVGsCJ3r0/Q0f3mTROJk3qC+QbRKdTzjjJ7pOVFPuXbkz7OO5a2WYfdx2CjaehctCsHEa94PRt2wujn+OuV+v5iYi0Xdz/bPWvr7ADH74B/JCvXQ==

[so1ve]

Not sure i this is the intended behavior :(

[jpoep]

I've had this exact issue - it was complaining about fallthrough props only on generic components; Field seems to be one too.

Updating vue-tsc to its current version seems to fix it. Your Stackblitz repro no longer fails its type-check after using vue-tsc 1.8.8.

[cexbrayat]

@jpoep Thanks for checking this. It still fails with v1.8.8 if the project has global components declared

I updated the Stackblitz https://stackblitz.com/edit/github-ekza7z?file=env.d.ts,package.json

/// <reference types="vite/client" />
import type App from './src/App.vue';

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    App: typeof App;
  }
  interface AllowedComponentProps {
    id?: string;
  }
}

[so1ve]

This issue will be fixed by #3487, which makes strictTemplates: false work with generic components. If you enable that option, #3443 will occur - but they are different issues.