Vue-TSC 2.0.18/19版本中experimentalModelPropName配置问题解析

问题背景

在Volar项目（Vue语言工具）的vue-tsc组件中，2.0.18和2.0.19版本引入了一个关于experimentalModelPropName配置的兼容性问题。这个问题主要影响使用Vuetify 2.x框架的开发者，特别是那些按照推荐配置设置了v-model属性映射关系的项目。

问题现象

开发者在使用vuetify2-component-types开发依赖时，按照推荐配置设置了experimentalModelPropName后，在vue-tsc 2.0.18/19版本中会出现以下问题：

1. 类型检查报错"找不到名称'xyz'属性"
2. 工具提示描述和智能感知信息丢失
3. 组件属性提示仅在移除v-model后才显示

技术分析

这个问题源于vue-tsc对experimentalModelPropName配置中连字符(-)命名的属性处理方式发生了变化。在2.0.18版本之前，配置中使用"input-value"这样的命名方式是有效的，但在新版本中这种命名方式会导致类型系统无法正确识别属性。

解决方案

经过项目维护者的确认，目前有效的解决方案是：

将配置中的连字符命名改为驼峰式命名。具体来说，就是将：

"input-value": {
    "v-checkbox": true,
    "v-switch": true
}

修改为：

"inputValue": {
    "v-checkbox": true,
    "v-switch": true
}

影响范围

这个问题主要影响以下场景：

• 使用Vuetify 2.x的项目
• 配置了experimentalModelPropName的项目
• 在配置中使用了连字符命名的属性

最佳实践建议

1. 对于新项目，建议直接使用驼峰式命名配置experimentalModelPropName
2. 对于现有项目升级vue-tsc到2.0.18+版本时，需要检查并修改相关配置
3. 如果暂时无法修改配置，可以考虑将v-model放在模板的最后位置作为临时解决方案

总结

这个问题展示了类型系统在处理不同命名约定时的敏感性。作为开发者，在遇到类似类型检查问题时，可以优先考虑命名规范的统一性。Volar项目团队已经确认了这个问题，并提供了明确的解决方案，开发者可以按照建议进行调整以确保项目的正常构建和类型检查。