Vue.js ESLint插件中require-typed-object-prop规则的TypeScript兼容性问题分析

问题背景

在Vue.js项目开发中，使用ESLint插件进行代码规范检查是保证代码质量的重要手段。其中require-typed-object-prop规则用于强制要求在使用Object类型定义组件属性时必须提供更具体的类型注解，这对于TypeScript项目特别有用，可以增强类型安全性。

然而，近期发现该规则存在一个明显的兼容性问题：它会错误地对非TypeScript的Vue单文件组件中的<script setup>块进行检查，即使这些组件明确使用了纯JavaScript语法。

问题表现

当开发者在Vue单文件组件中使用如下代码时：

<script setup>
defineProps({
  prop: Object,
})
</script>

即使没有使用TypeScript（即没有设置lang="ts"属性），require-typed-object-prop规则仍然会报错，要求为Object类型提供更详细的类型注解。这显然不符合预期，因为在纯JavaScript环境下，开发者无法（也不应该）提供TypeScript风格的类型注解。

技术分析

这个问题的本质在于规则实现时没有充分考虑Vue单文件组件中<script>块的lang属性。在Vue生态中：

1. 默认情况下<script>块使用JavaScript语法
2. 只有显式添加lang="ts"属性时才使用TypeScript语法
3. 规则应该只在TypeScript环境下生效

正确的实现逻辑应该是：

1. 首先检查当前<script>块是否使用TypeScript（通过lang属性判断）
2. 只有在TypeScript环境下才执行该规则的检查
3. 在纯JavaScript环境下应该跳过检查

解决方案

该问题已被项目维护者确认并修复。修复方案主要包括：

1. 在规则实现中添加对<script>块语言类型的检测
2. 仅当检测到TypeScript时才应用该规则
3. 保持对传统选项式API和组合式API的支持

对于使用者来说，升级到包含修复的版本后，规则将能够正确区分TypeScript和JavaScript代码，避免在纯JavaScript项目中产生误报。

最佳实践建议

对于混合使用TypeScript和JavaScript的Vue项目：

1. 确保使用最新版本的eslint-plugin-vue
2. 对于纯JavaScript组件，不需要配置此规则
3. 对于TypeScript组件，可以安全启用此规则以增强类型安全
4. 在项目过渡期间，可以考虑按文件或目录粒度控制规则的启用状态

这个修复体现了Vue生态工具对开发者实际使用场景的细致考虑，特别是在项目逐步从JavaScript迁移到TypeScript的过程中，这种细粒度的控制能力尤为重要。