CODEWITHSUNDEEP
javascripttypescriptvue.jsvisual-studio-code
Abhi
Abhi

Reputation: 1574

Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

I am using vue, ts, vite with volar extension.

In Vs code, I get the error Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Did you mean 'className'?ts(2322)

when I do <div class=""></div> for the class

When I hover over the div I see (property) div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

I don't know what's making vs code assume I am using react. The file type is .vue

I disabled eslint and still get the error. It works when I run the app but it's annoying to see that error in vscode.

Am I supposed to add some d.ts file?

Upvotes: 18

Views: 28102

Answers (4)

Konstantin
Konstantin

Reputation: 21

I had to to add <script> tags:

<script> //your code </script>

Upvotes: 2

herzorf
herzorf

Reputation: 129

i have the same problem,but i did not do anything,so i guess its the problem with vscode, i change the vscode plugin Vue languages Features to previous version，then its works

Upvotes: -1

leonheess
leonheess

Reputation: 21391

  1. As Abhi pointed out, explicitly set up the tsconfig types option, it can prevent TypeScript from including all types from node_modules/@types automatically.
// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "vite/client",
    ]
  }
}
  1. If the problem persists, @types/xxx may include by some import statement. You need to find out which and exclude it. For example if you are using storybook and it uses a import ... from '@storybook/vue3' statement, you need to exclude all files that have a '@storybook/vue3' import statement.
// tsconfig.json
{
  "exclude": ["**/*.stories.ts"]
}

Upvotes: 1

Abhi
Abhi

Reputation: 1574

Adding this fixed it. See here: https://github.com/johnsoncodehk/volar/discussions/592

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": [
      "vite/client", // if using vite
      // ...
    ]
  }
}

I think when I added storybook it added react types

Upvotes: 33

Related Questions