Vue单文件组件template内已类型化数据无法触发IntelliSense问题咨询

结论 #

单文件组件template内支持类型定义数据的IntelliSense触发，你遇到的属于配置适配问题，并非功能无法实现。

问题根因 #

你当前使用的Vetur扩展对Vue2生态下的Composition API、TS类型推导支持能力有限，无法覆盖template场景的类型提示。

修复步骤 #

• 卸载Vetur扩展，安装VSCode官方的Vue Offical扩展（原Volar）
• 针对Nuxt2 + nuxt-composition-api场景做额外配置：
  1. 升级@nuxtjs/composition-api到最新稳定版，安装@vue/runtime-dom依赖
  2. 在tsconfig.json的compilerOptions.types数组中加入"@nuxtjs/composition-api"和"@vue/runtime-dom"
  3. 确保所有Vue组件都用defineComponent包裹定义，不要直接导出普通JS对象
• 开启TypeScript严格模式：在tsconfig.json的compilerOptions中设置strict: true，类型推导依赖该配置项
• 不要对已经定义好类型的数组做any类型强转，避免丢失类型信息

验证方式 #

配置完成后重启VSCode，在template内写v-for="item in 你的类型数组"时，引用item的属性即可触发对应的类型提示。

内容的提问来源于stack exchange，提问作者Craig