<image class="logo" :src="''"></image>
莱特米西西
- 发布：2022-10-27 01:39
- 更新：2022-10-29 22:17
- 阅读：280
产品分类： HbuilderX
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： MacOS Monterey 12.2.1 (21D62)
HBuilderX版本号： 3.6.4
示例代码：
操作步骤：
- 安装uni-app(v3)等插件
- 在偏好设置->插件配置->内置语言功能勾选"启用Typescript语言校验"
- 安装uni-app(v3)等插件
- 在偏好设置->插件配置->内置语言功能勾选"启用Typescript语言校验"
预期结果：
src是image组件的属性之一，而且类型就是string，所以这个ts错误是不应该出现的。
src是image组件的属性之一，而且类型就是string，所以这个ts错误是不应该出现的。
实际结果：
[ts] type '{class: string; src: string}' is not assignable to type 'ElementAttrs'.
[ts] type '{class: string; src: string}' is not assignable to type 'ElementAttrs'.
bug描述：
开启ts校验之后绑定原生image组件的src组件会提示类型错误，
[ts] type '{class: string; src: string}' is not assignable to type 'ElementAttrs'.
如图所示
方便把项目的tsconfig.json发过来看一下吗？
-
莱特米西西 (作者)
嗯，我从官网复制过来的
{
"compilerOptions": {
// 与 Vue 的浏览器支持保持一致
"target": "es5",
// 这可以对 `this` 上的数据 property 进行更严格的推断
"strict": true,
// 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
"module": "es2015",
"moduleResolution": "node",
"types": ["@dcloudio/types"]
}
}2022-10-27 15:08
莱特米西西 (作者)
找到一个临时解决方案，在项目根目录新建一个type.d.ts，然后往里面写上
import { SVGAttributes } from "@vue/runtime-dom";
declare global {
namespace JSX {
interface IntrinsicElements {
image: SVGAttributes & { src?: string };
}
}
}写完之后src的类型提示就应该正常了，不过我又发现了一个新的bug，Hbuilder的vue3插件不太完善，模板里面对Ref类型的解包没有生效。正常来说script ts setup里面写一个const abc = ref("1");// 类型是Ref<string>，模板里面使用变量abc得到的类型应该是string，而Hbuilder里提示的还是Ref<string>;
