‘class‘ does not exist in type ‘DetailedHTMLProps

记一个报错解决。
用vite新建的vue3项目，class在ts校验时报错。这主要是因为jsx的问题，jsx中用的是classname（js中用className），所以class不存在HTMLDivElement元素上。

Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Object literal may only specify known properties, and 'class' does not exist in type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

在tsconfig.json中加入如下配置

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

这里再说一下class和classname的区别

• DOM 对象属性是通过className获取class属性的值, 而HTML 标签属性是通过class获取class属性的值

• IE8之前获取class属性值都是通过getAttribute(‘className’)，明显获取的是DOM对象的属性而不是HTML的属性，但是实际上想要获取的是HTML的属性

• 所以说混淆了，但是以后不兼容IE8的话直接使用getAttribute(‘class’)就行了，或者直接.className,不用getAttribute方法

引用github