有风塘主
发布于 2024-12-05 / 158 阅读
0
0

Vue3中同时使用withDefaults和defineProps时报错的问题

问题

Webstorm或者VSCode中开发Vue3+Typescript的项目时,在单文件组件中同时使用withDefaultsdefineProps时,编辑器提示类型不匹配的错误。

Argument type DefineProps<LooseRequired<PropsType>, BooleanKey<PropsType>> is not assignable to parameter type...

可能原因一:Webstorm低版本的bug

webstorm低于2023.2.3版本的,可能因为对于Vue+Typescript的支持不完整,导致识别类型有误。

解决方案:

在相应代码的上方添加注释即可,不影响代码编译和运行。

/*
 * WebStormIDE旧版本的bug:同时使用 defineProps和withDefaults时会报错
 * 使用下面的单行注释来屏蔽错误,不影响实际运行。
 */
// noinspection TypeScriptValidateTypes

可能原因二:Typescript+Vue的设置问题

参考vue3官方文档的说明:https://cn.vuejs.org/guide/typescript/overview.html#ide-support, 在Webstorm中开发 Vue+Typescript 项目,需要将 Vue 服务设置为在所有 TypeScript 版本上使用 Volar 集成。

解决方案:

打开Webstorm的设置项:Settings -> Languages & Frameworks -> Typescript -> Vue,在右侧的Vue Service配置中,选择第三项-Vue Language Server (Volar), 然后点击 ApplyOk

可能原因三:Volar插件和VueOfficial插件冲突引起

如果使用的是VSCode进行开发,可以去检查下已启用的插件列表,看下列表里是否同时启用了插件:VolarVue official,参考Vue官方的文档说明,在VSCode中开发Vue3时,应使用Vue official插件并禁用掉Volar插件

解决方案:

选中VsCode左侧的Extensions页签,找到插件Volar,在其右侧的管理小菜单中选择Disable,然后重启VSCode 即可。

--- end ---


评论