Vue组件引用触发模板TypeScript错误ts2749求助

问题根源 #

你在LegList.vue的模板中存在未闭合的HTML属性引号，这破坏了模板的语法结构，导致TypeScript解析时出现逻辑混乱，误将导入的VoyageLeg组件当作类型来处理，从而抛出ts(2749)错误。

错误代码片段：

<!-- 缺失闭合引号的key属性 -->
<div :key="voyageStore.currentVoyage.id>

修复步骤 #

1. 补全LegList.vue中未闭合的引号：

<!-- 修正后的代码 -->
<div :key="voyageStore.currentVoyage.id">
  <VoyageLeg v-for="item in voyageStore.currentVoyage.legs" :key="item.id" :leg="item"></VoyageLeg>
</div>

2. 可选优化：
   • 移除多余的外层div，直接在VoyageLeg上使用v-for，简化模板结构：

     <VoyageLeg 
       v-for="item in voyageStore.currentVoyage.legs" 
       :key="item.id" 
       :leg="item"
     ></VoyageLeg>
     

   • 启用代码格式化工具（如Prettier），自动检测并修复这类语法问题。

效果验证 #

修正引号后，TypeScript将正确识别VoyageLeg为组件实例，错误提示会消失，组件可正常渲染并接收leg属性。

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