Vue.js 3.5 中 TypeScript 非严格模式下的 Props 类型检查问题分析

问题背景

在 Vue.js 3.5 版本中，当开发者使用 TypeScript 的非严格模式（即 strict: false 配置）时，遇到了一个关于组件 Props 类型检查的特殊问题。具体表现为：在模板中使用通过 defineProps 定义的 Props 时，TypeScript 会报错提示属性不存在，尽管这些 Props 已经正确定义。

问题现象

考虑以下简单的 Vue 单文件组件示例：

<script setup lang="ts">
defineProps<{
  links?: string[];
}>();
</script>

<template>
  <div :data-test="!!links" />
</template>

在 TypeScript 配置中设置 strict: false 时，模板中对 links 属性的访问会导致 TypeScript 错误：

Property 'links' does not exist on type 'CreateComponentPublicInstanceWithMixins<...>'

技术分析

这个问题实际上源于 Vue 3.5 核心库的类型系统实现，而非 Volar 插件或 vue-tsc 的问题。在非严格模式下，TypeScript 的类型检查行为会有所不同，而 Vue 3.5 的类型系统在处理组件实例类型时，未能完全适应非严格模式下的类型推断规则。

解决方案

Vue 核心团队已经确认了这个问题，并在核心库中进行了修复。对于遇到此问题的开发者，可以采取以下解决方案：

1. 升级 Vue 版本：等待包含修复的 Vue 3.5.x 版本发布后升级
2. 临时解决方案：在等待修复版本发布期间，可以暂时启用 TypeScript 的严格模式

最佳实践建议

虽然这个问题会在未来的 Vue 版本中得到修复，但从长远来看，我们建议开发者：

1. 尽量使用 TypeScript 严格模式：严格模式能提供更全面的类型检查，有助于捕获更多潜在问题
2. 保持依赖更新：定期更新 Vue 和相关工具链，以获取最新的类型修复和改进
3. 关注官方发布说明：了解每个版本中的类型系统变更，以便及时调整代码

总结

这个 TypeScript 非严格模式下的 Props 类型检查问题展示了框架类型系统与 TypeScript 配置之间的微妙交互。理解这类问题的根源有助于开发者更好地诊断和解决类似问题，同时也提醒我们在项目配置选择上需要权衡利弊。