How should strictTempaltes compiler option be used?

[nayakunin]

Hi. I've just recently starting working with Vue coming from the React world. I've gotten used to full type safety, that can be achieved there and I've been quite surprised when I saw that the strictTemplates tsconfig compiler options is not enabled by default. Using the strict: true option in React never caused any issues for me. I've tried enabling it on a real project, and I immediately saw a bunch of errors. Here is an example of such error:

<SomeComponent id="something" />
// Object literal may only specify known properties, and 'id' does not exist on ...

The id used in this component is not defined in the props and relies on the fallthrough attributes feature. The issue is that Vue doesn't automatically infer the type of the fallthrough attributes, though there is a compiler option that enables that. I've tried using it, but quickly found out that it only actually infers the types of the variable attributes, like an id, but it doesn't infer the types of callbacks. An example with enabled fallthroughAttributes:

// component.vue
<script setup lang="ts">
type Props = {
  something?: string;
};

defineProps<Props>();

type MyData = {
  id: number;
  name: string;
};

const emit = defineEmits<{
  (e: "click", data: MyData): void;
}>();
</script>

<template>
  <div class="A" @click="emit('click', { id: 1, name: 'name' })">text</div>
</template>

// app.vue
<script setup lang="ts">
import Component from "./component.vue";
</script>

<template>
  <Component @click="console.log" @mouseenter="console.log" /> // Object literal may only specify known properties, and 'onMouseenter' does not exist in type ...
</template>

I've looked for a solution, how the fallthrough attributes can be properly typed an encountered these discussions:

• https://github.com/orgs/vuejs/discussions/10262
• Infer attrs for implementing HOCs rfcs#479

There is a solution in the first discussion that would solve my problem https://github.com/orgs/vuejs/discussions/10262#discussioncomment-8354644, but it seems quite cumbersome and it seems like I'm fighting the compiler. Here is the code for that:

interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {
	foo: string
}
const _props = defineProps<Props>() // this makes sure consumers see the button attributes in autocomplete
const props = _props as Omit<typeof _props, keyof ButtonHTMLAttributes> // this cleans up the props type
const attrs = useAttrs() as ButtonHTMLAttributes // and this casts the attrs object to something matching the allowed fallthrough attributes

So the question is, is it ever a good idea to enable the strictTemplates feature? If you are relying on a component library that doesn't properly type its fallthrough attributes, you seemingly would never be able to use that. I've looked around how other component libraries deal with this issue and found out that some of them don't add types for the attributes, while some others, like prime-vue, have a separate .d.ts file with the extends ButtonHTMLAttributes declaration, where they are not required to use the @vue-ignore statement. Is the approach the prime-vue uses the only viable approach to be taken? A small example:

<script setup lang="ts">
import Button from "primevue/button";
import { CheckboxRoot } from "radix-vue";
</script>

<template>
  <Button
    label="Get Started"
    class="p-button-raised p-button-rounded"
    id="sss"
    @mouseenter="(e) => {}" // (parameter) e: MouseEvent 👍 
  />
  <CheckboxRoot @mouseenter="(e) => {}" /> // Object literal may only specify known properties, and 'onMouseenter' does not exist in type 'NonNullable<Partial<{ value: string; as: Component<any, any, any, ComputedOptions, MethodOptions, {}, any> | AsTag; checked: boolean | "indeterminate"; }> & Omit<...>>'.
</template>

Are there any real world projects that actually use this feature successfully, and if they do, then how do they deal with the un-typed attributes issue?

Just for a reference, this is an example, of what I'm trying to achieve in React code:

interface Props extends React.ComponentProps<"div"> {
  something: string;
}

export const Component = ({ something, ...props }: Props) => {
  return <div {...props}>{something}</div>;
};