TypeScript error when forwarding ctx.attrs to child component via h()

[prince-kunwar-xcelore]

I’m running into a TypeScript issue when trying to forward ctx.attrs from a wrapper component into a typed child component using h().

Reproduction

import { defineComponent, h } from 'vue';

// A typed child component with declared props
const Child = defineComponent({
  props: {
    name: { type: String, required: true as const },
    label: { type: String },
  },
  template: `<div>{{ name }}</div>`,
});

// A wrapper that tries to forward ctx.attrs into h()
export const Wrapper = defineComponent({
  inheritAttrs: false,
  setup(_, ctx) {
    return () => {
	// Actual: ❌  —
	//   Argument of type 'Data' is not assignable to parameter of type
	//   '... & { $: ComponentInternalInstance; $data: {}; $props: ... }'
      return h(Child, ctx.attrs);
    };
  },
});

I'm not sure how I would resolve this, any ideas?

[aniruddhaadak80]

@shubph The issue is that h() expects exact prop matches, and ctx.attrs is often typed loosely as Data or Record<string, unknown>.
To satisfy TS without suppressing everything:

return h(Child, ctx.attrs as any); 
// or simpler in setup:
return () => <Child {...(ctx.attrs as any)} />

Since you are disabling inheritAttrs, you are taking manual responsibility, so the cast is safe/expected here.