Vue 3 SFC中为textarea设置v-model时出现类型错误

错误原因 #

这个错误是因为TypeScript未正确识别Vue3响应式变量（ref创建）在模板v-model中的自动解包特性，误将Ref类型判定为不符合textarea的value属性所需的原始值类型。

解决方案 #

• 使用<script setup>语法
  Vue3的<script setup>会自动对ref变量进行解包，模板里直接写v-model="message"完全合法，这是最推荐的写法。

• 修正tsconfig.json配置
  确保配置文件中包含Vue类型识别的关键项，让TypeScript正确解析Vue代码：

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "moduleResolution": "Node",
      "strict": true,
      "jsx": "preserve",
      "types": ["vue"]
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
  }
  

• 重启TypeScript服务
  VSCode的TS服务可能出现缓存异常，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入并选择TypeScript: Restart TS Server，多数情况下错误会自动消失。

• 确认依赖正确性
  确保项目已正确安装Vue3，Vue3自带类型定义，无需额外安装@types/vue；通过Vue CLI或Vite创建的项目默认配置已满足要求，无需额外操作。

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