记一个报错解决。
用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方法