问题
在Webstorm或者VSCode中开发Vue3+Typescript的项目时,在单文件组件中同时使用withDefaults和defineProps时,编辑器提示类型不匹配的错误。
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), 然后点击 Apply和Ok
可能原因三:Volar插件和VueOfficial插件冲突引起
如果使用的是VSCode进行开发,可以去检查下已启用的插件列表,看下列表里是否同时启用了插件:Volar和Vue official,参考Vue官方的文档说明,在VSCode中开发Vue3时,应使用Vue official插件并禁用掉Volar插件
解决方案:
选中VsCode左侧的Extensions页签,找到插件Volar,在其右侧的管理小菜单中选择Disable,然后重启VSCode 即可。
--- end ---