Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using class/style attribute on Vue components throws type error with Vue 2.7 #1500

Closed
johannes-z opened this issue Jun 23, 2022 · 2 comments
Closed

Comments

@johannes-z
Copy link

johannes-z commented Jun 23, 2022

In my template I'm rendering a Vue component and specify the class and style attribute on the tag, like so:

<MyComponent class="my-class" style="font-weight: bold" data-value="test" />

I get a type error, saying:

Type '{ class: string; dataValue: any; "data-value": any; }' is not assignable to type 'IntrinsicAttributes & Readonly<Partial<{ selected: boolean; }> & Omit<{ selected: boolean; } & {}, "selected">>'.
  Property 'class' does not exist on type 'IntrinsicAttributes & Readonly<Partial<{ selected: boolean; }> & Omit<{ selected: boolean; } & {}, "selected">>'.ts(2322)

The component looks like this:

export default defineComponent({
  name: 'MyComponent',

  functional: true,

  props: {
    selected: { type: Boolean, default: false },
  },

  render () // omitted for brevity
})

The type checking should allow specifying class and style attributes.

I'm using Vue 2.7 ^2.7.0-beta.5

@LurkingExorcist
Copy link

Hi, I added jsx.d.ts in my project with following code:

declare namespace JSX {
  interface IntrinsicAttributes {
    class?: any;
  }
}

This solved my "class" attribute problem.

@johnsoncodehk
Copy link
Member

Fixed by #1533

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants