Vue3(vite)+TS SFC中动态绑定class报ts(2322)错误如何解决

报错原因 #

当你在模板中写:class="{'button__active': checked === '1'}"这类对象语法的类绑定时，抛出Type '{ button__active: boolean; }' is not assignable to type 'string | boolean | undefined'.ts(2322)错误，本质是TypeScript未正确识别Vue模板中:class支持的对象语法类型，默认仅认为:class的合法值为string | boolean | undefined，通常由Vue TS类型配置缺失、插件版本冲突导致。

可落地解决方法 #

• 补全项目依赖
  安装Vue3+TS配套的类型校验依赖，执行命令：
  npm install vue-tsc @vue/tsconfig -D
  缺失这两个依赖时，TS无法加载Vue针对模板绑定的扩展类型声明，就会抛出类型不匹配错误。
• 修正tsconfig配置
  检查项目根目录的tsconfig.json，确保继承Vue官方TS配置、且正确纳入了所有vue文件，基础配置参考：

  {
    "extends": "@vue/tsconfig/tsconfig.dom.json",
    "compilerOptions": {
      "strict": true,
      "moduleResolution": "bundler"
    },
    "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx"]
  }
  

  注意include字段必须覆盖所有.vue后缀文件，否则TS不会处理SFC的类型规则。
• 排查编辑器插件冲突
  使用VSCode开发时，先完全禁用旧版Vetur插件，安装启用官方维护的Volar（Vue Language Features）插件；之后打开命令面板执行Volar: Switch TS Version，选择使用工作区本地安装的TS版本，避免全局TS版本和Vue依赖版本冲突导致类型推导异常。
• 临时跳过校验方案
  若需要临时忽略单条绑定的类型校验，可选择两种写法，不推荐全局关闭TS严格模式，会丢失全量类型防护能力：

  <!-- 注释忽略单条报错 -->
  <!-- @ts-expect-error 临时跳过class类型校验 -->
  <button :class="{'button__active': checked === '1'}">1</button>
  
  <!-- 类型断言强制绕过校验 -->
  <button :class="{'button__active': checked === '1'} as any">1</button>
  

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