Attribute inheritance in TSX

[PurpleTape]

Hello! I encountered the following situation: for vue components that wrap native html elements, all properties not specified in props automatically fall into attrs and can be applied to a native html element. However, volar indicates a typescript error, since properties not specified in props are missing from the type.

The problem occurs in the following cases:

1. When using native html attributes on a component
2. When a component wraps another component (WrapperComponent -> RootComponent). In this case, attributes not specified in props of WrapperComponent are passed to the attrs of RootComponent

Thus, the attributes are passed as intended, but the IDE displays a type error

Example:

// example.tsx
import { defineComponent } from 'vue'

const VButton = defineComponent(
  () => {
    return () => <button type="button">My button</button>
  },
  {
    props: {
      something: String
    }
  }
)

const usage = () => <VButton something="ok value" onClick={alert()} />

Info:
TypeScript Vue Plugin (Volar) v1.8.8

How can I eliminate the display of such errors?

Thanks!

[so1ve]

Duplicate of #3301

[so1ve]

Ah, I think this issue is more descriptive.

[PurpleTape]

Is there any way to fix this problem?

[so1ve]

@PurpleTape Maybe we need to fix types in vue core

[laterdayi]

@so1ve @johnsoncodehk Is there any progress now, This is the duplicate link https://play.vuejs。org/#eNrtV1tv2zYU/iuE9pIANnWxLMuZU3Tx2iCDtw7N+jIYCDSJltlIpEBSsYci/32HpO3Ikh04zYq+9CHO4bl850qK/OL8UlX4oSbOhTORqaCVQpKoukJFwvLLuaPkeu68mbOUM6mQICwj4gYW 6BKdnaPLN+jLnCHgq1owdKZphCagr/8DJR/yLY3QuiyYBMylUtWF665WK7waYC5yN/A8z9W6Tkv7Yl1Qdn/Qxh+Px64RN60WtChAnXFGTNxb/iQjC9lYA6dK1BLRDLQ1defNHaREwuSCi1JnrukiUeTMQ 945ElxZOgzRwDsHZW35u9eLvFkcb369mWf+Iu9vUHD3/UFoogmC1n3VnDnD5qJmBKAEMLaZ/57iLmimVqCIAzbkiWh+VKByPc6Muv4E6NKt6WWRNxWSUo+sE8Sqrevm/KCiz5lYFBxKAvlrG/tta 38eH21V2+bMXlfcJ6hhf7tc8CmahM+jIysCx3XVZLe54LXLLspk5y8pzBwrdIZqKsChg+VPCOmv6JMClCkDFa3vBYpuRZJtaSpYQbHgHdu5TKpIMlDnq6TWkqasKuiFkiq7FfyQE3CYBYMmyBksSCP 8u9gZIh1pW26rXdtpV44D+DqtfPgxx3RbiC6s /JjHr7nPOhT6MA0mMPJb5f/xJMqDOGk2rc0x1bo9QI88GdjHI97/hhH4+kIh34v8LEfoKHmBgM8ijZkhKNgZsjIx4N4askQByEyZlGE4xgZsCjWuIAfDzVqGOAw7sUjDRsO8TDY0sDUCrNRjH 0A0FbT2MNDQDBgcWD4xseG1q5nljYRTTe0CdTa2vgtpklrBo50plPr3NPQNiZL2jrAad0s0gsP7rDTnZdv1OPb1I+iH/v01fsUvq3/xzaduK17xCRHT/WBOXhuYz7tTN/z0EhfIvb9nYY1ANsm2MhDUQfrBZGBcQNte71poX1tpkfhALBM5L3dSJrq6+naXN9WS6r2728NM5h3ZO59F0tBFqD90 +7+1h4K2zKN3k3HzdsF63JObMi4lXOEh/bk/doiBp0iHoZ7RVeOAX4TyG6zNe4JzX6u4RriUMOfafrhNh/jtnn76+Zqoh8vm9XExnT+85w9wt+cgdA8riANC0XKStcPVhN3t3B6Di0rLlS/TCr 8WXIGDzLztJpvBHLuXNjHlubBi02v7btIwsMozRiYZaSgDwIzolxWle5bUHNFzRQtST/j5dsBHuDQzahUTTYmsuz/I/gKPiQAMnd6DTcuMB+I6NunH3wGT3TbMmu6bok67rX3R6geFEVJegsuaN4qScrLi hZEfKj08b5fmqQo+Oo3w1OiJrtc0iVJ7w/wP+sXrs7pT/g+6Mga+ atE5ERZ8bvbP8ga6J0QPml1sWnDEeFHInlR6xit2hV8aiDshp6J9sZ0mLL8L/lurQiT26R0oKYaRt/0Y/pM6k/hQrV3VXz8D+cpfao=XKStcPVhN3t3B6Di0rLlS/TCr8WXIGDzLztJpvBHLuXNjHlubBi02v7btIwsMozRiYZaSgDwIzolxWle5bUHNFzRQtST/j5dsBHuDQzahUTTYmsuz/I/gKPiQAMnd6DTcuMB+I6NunH3wGT3TbMmu6bo k67rX3R6geFEVJeGsuaN4qScrLihZEfKj08b5fmqQo+Oo3w1OiJrtc0iVJ7w/wP+sXrs7pT/g+6Mga+atE5ERZ8bvbP8ga6J0QPml1sWnDEeFHInlR6xit2hV8aiDshp6J9sZ0MLL8L/lurQ iT26R0oKYaRt/0Y/pM6k/hQrV3VXz8D+cpfao=XKStcPVhN3t3B6Di0rLlS/TCr8WXIGDzLztJpvBHLuXNjHlubBi02v7btIwsMozRiYZaSgDwIzolxWle5bUHNFzRQtST/j5dsBHuDQzahUTTYmsuz/I/gKPiQAMnd6DTcuMB+I6NunH3wGT3TbMmu6bo k67rX3R6geFEVJeGsuaN4qScrLihZEfKj08b5fmqQo+Oo3w1OiJrtc0iVJ7w/wP+sXrs7pT/g+6Mga+atE5ERZ8bvbP8ga6J0QPml1sWnDEeFHInlR6xit2hV8aiDshp6J9sZ0MLL8L/lurQ iT26R0oKYaRt/0Y/pM6k/hQrV3VXz8D+cpfao=

[huangbh1024]

It’s 2024 and this problem hasn’t been fixed yet?

[so1ve]

Honestly you should add some types to props.

[rchl]

@so1ve who are you replying to?

This is part of the standard Vue functionality so it's not reasonable to expect someone to create a workaround just for the editor integration. And also it's not always possible when relying on third-party components.

And also there are PRs (including yours) that seem to try to address it:

• Basic attribute inheritance #4049
• feat(language-core): typed fallthrough attributes #4103

[so1ve]

Those PRs are trying to address the usage of SFC, not TSX. IMO TSX should report those issues since there is no onClick property on VButton. Additionally, defineComponent is a vue core function, so it would be better if we handle the types in vue core.

[rchl]

IMO TSX should report those issues since there is no onClick property on VButton.

Well, the Vue behavior is to treat unknown attributes as "fallthrough attributes". The VButton can't know up-front what one might want to pass as a fall-through attribute so it can't define them up-front.

Those PRs are trying to address the usage of SFC

Maybe you want to handle SFC and TSX separately (I have no opinion on that) but this is not a TSX-specific problem. It's equally valid for SFC:

---

That said, I don't like this feature of Vue very much as if the Vue language tools would follow that logic (fix this issue basically) then mistyped prop names would no longer be reported as invalid and then there would be another group of people who would complain about that...

[so1ve]

Well, the Vue behavior is to treat unknown attributes as "fallthrough attributes". The VButton can't know up-front what one might want to pass as a fall-through attribute so it can't define them up-front.

In my imagination defineComponent should add Record<string, any> to its props definition if inheritAttrs is not set or set to false.

I don't like this feature of Vue very much

+1 :)

[yinmingdi]

Here's a temporary workaround, guys. It might not be the most elegant solution, but it's effective.

import 'vue';

type EventHandler = (...args: any[]) => void;

declare module 'vue' {
  interface ComponentCustomProps {
    id?: string;
    role?: string;
    tabindex?: number;
    onClick?: EventHandler;
    onTouchend?: EventHandler;
    onTouchmove?: EventHandler;
    onTouchstart?: EventHandler;
    onTouchcancel?: EventHandler;
    onTouchmovePassive?: EventHandler;
    onTouchstartPassive?: EventHandler;
  }

  interface HTMLAttributes {
    onTouchmovePassive?: EventHandler;
    onTouchstartPassive?: EventHandler;
    onClickCapture?: EventHandler;
  }
}

You can find more context here at vant.
Thanks again to vant for being such an excellent component library.