Functional Components not allowing inherited attributes

[mklein994]

When I run vue-tsc on a functional component that has e.g. a class="" attribute on it, I get an error¹:

src/App.vue:9:33 - error TS2345: Argument of type '{ stuffAndThings: number; class: string; }' is not assignable to parameter of type '{ stuffAndThings: number; }'.
  Object literal may only specify known properties, and 'class' does not exist in type '{ stuffAndThings: number; }'.

9   <FooBar :stuff-and-things="7" class="demo" />
                                  ~~~~~

I suspect something changed that makes it not account for attributes that are inherited normally, namely class, style, and onXXX event listeners (see docs). The demo has more details, but here's the gist of it:

Demo: CodeSandbox

// src/FooBar.ts

import { h } from "vue";

function FooBar(props: { stuffAndThings: number; }) {
  return h("div", `Made it: ${props.stuffAndThings}`);
}

FooBar.props = {
  stuffAndThings: {
    type: Number,
    required: true,
  },
};

export default FooBar;

<!-- src/App.vue -->

<script setup lang="ts">
import FooBar from "./FooBar.ts";
</script>

<template>
  <FooBar :stuff-and-things="7" class="foo-bar" />
</template>

<style scoped>
.foo-bar {
  color: blue;
}
</style>

Note The demo shows a few other ways of defining a functional component, but they all have roughly the same error message.

---

P.S.

@johnsoncodehk Thank you for all your hard work on this project! I understand that there's been a large increase in issues recently, so it's all good, don't bend over backwards on this one ☺️. I want to encourage you (and others working on this project), that it's tools like this that make Vue and its ecosystem so enjoyable to use. To me, this language server is a gold standard that other frameworks should try to emulate. Keep up the good work! 🚀

Footnotes

1. The line numbers may be a bit off, but the message is the same. ↩

[so1ve]

Similar: #3318, #3301

[Ctepan]

Here is an example with functional component and component with generic in <script setup>
(vite vue-ts template + FComponent from vue docs + generic component)
https://stackblitz.com/edit/vitejs-vite-hddkhg?file=src%2FFComponent.ts

[rchl]

Demo: CodeSandbox

Can't be opened

[sherif414]

i normally make my functional components using arrow functions so i can anotate them with FunctionalComponent interface imported from vue

import type { FunctionalComponent } from 'vue'

interface Props {
//
}

const MyComponent: FunctionalComponent<Props, Record<string, string>> = (props) => {
    // 
}

the second generic argument passed to FunctionalComponent Record<string, string> is what stops the type errors for me
and allows passing attributes like class, style or anything else

[johnsoncodehk]

Hi! first of all thank you for your encouragement, you really send me energy.

This can be solved by defining a functional component via defineComponent(), which add AllowedComponentProps, VNodeProps to props type.

import { h, defineComponent } from "vue";

const FooBar = defineComponent(
  (props: { stuffAndThings: number; }) => {
    return h("div", `Made it: ${props.stuffAndThings}`);
  }
)

[daydaystar]

Expect to solve

[so1ve]

@daydaystar #3340 (comment)

[johnsoncodehk]

Closed due to unable to reproduce in latest version.