Тип '{ class: string; }' не может быть присвоен типу 'DetailedHTMLProps<htmlAttributes, HTMLDivElement>'

#javascript #typescript #vue.js #visual-studio-code #vscode-settings

#javascript #машинописный текст #vue.js #visual-studio-code #vscode-настройки

Вопрос:

Я использую vue, ts, vite с расширением volar.

В Vs code я получаю сообщение об ошибке 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)

когда я делаю <div class=""></div> для class

Когда я навожу курсор div на то, что я вижу (property) div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

Я не знаю, что заставляет vs code предполагать, что я использую react. Тип файла следующий .vue

Я отключил eslint и все равно получаю сообщение об ошибке. Это работает, когда я запускаю приложение, но меня раздражает видеть эту ошибку в vscode.

Должен ли я добавить какой d.ts -то файл?

1. Какой тип файла? Вы пишете jsx?

2. @vatz88 нет, это .vue

3. @vatz88 я использую настройку скрипта ( v3.vuejs.org/api/sfc-script-setup.html )

4. Затем используйте внутренние типы ( DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> ) или измените типизацию, потому что DOM elements действительно не содержит class свойства, может быть, вы имеете в виду className / classList ?

5. Также вы можете расширить тип с помощью type extendedType = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> amp; { class: string }

Ответ №1:

Добавление этого исправило это. Смотрите здесь: https://github.com/johnsoncodehk/volar/discussions/592

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

Я думаю, что когда я добавил сборник рассказов, он добавил типы реакций