问题
在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 ---