Vue如何开启template模板内的TypeScript类型校验支持

默认情况下Vue单文件组件的<script setup lang="ts">块由TS原生做类型检查，而<template>块的类型检查需要额外配置工具链支持，按以下步骤配置即可生效：

第一步：编辑器配置（实时提示） #

• VS Code用户先卸载旧的Vetur插件，Vetur不支持<script setup>语法下的模板类型校验，安装官方维护的Volar插件，同时安装配套的TypeScript Vue Plugin（新版Volar会提示自动安装配套插件）。
• 按快捷键Ctrl+Shift+P（Mac系统为Cmd+Shift+P），调出命令面板搜索TypeScript: Select TypeScript Version，选择项目本地node_modules目录下的TS版本，不要使用VS Code内置的TS版本。
• JetBrains系IDE（WebStorm/IDEA等）2022.1及以上版本内置了Vue3模板类型校验能力，无需额外装插件，只要保证项目TS配置正确即可。

第二步：项目构建层配置（命令行/构建时校验） #

这一步配置后，不光编辑器会提示错误，执行类型检查、打包构建时也会拦截模板里的类型错误。

1. 安装必要依赖
   如果是Vite创建的项目，执行命令安装：

npm i -D vue-tsc @vue/tsconfig

如果是Vue CLI创建的项目，安装对应TS插件：

npm i -D @vue/cli-plugin-typescript

2. 配置tsconfig.json
   根目录的tsconfig配置要开启严格模式，添加Vue文件扫描规则和模板严格校验配置，参考如下：

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "compilerOptions": {
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "bundler",
    "target": "ES2020"
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "vueCompilerOptions": {
    "strictTemplates": true
  }
}

3. 添加类型检查脚本
   在package.json的scripts块中添加type-check命令，建议直接把类型检查加到build流程里：

{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "type-check": "vue-tsc --noEmit"
  }
}

配置后执行npm run type-check就能扫描包括模板在内的所有TS类型错误，也可以把这个命令加到git提交钩子中，避免错误代码提交。

配置完成后的效果 #

你提供的示例代码中两个模板内的错误都会被准确标记：

• <input type="text" v-model="text"> 会提示类型不匹配：text类型输入框返回string值，不能双向绑定到number类型的ref
• @click="text = 'why'" 会提示类型错误：不能给初始值为number的ref赋值string类型

常见问题排查 #

• 如果配置完仍不生效，在VS Code命令面板搜索Volar: Restart Vue Server重启服务，或者直接重启编辑器
• 必须开启TS的strict: true配置，否则模板校验会降级，很多隐式类型问题无法识别
• 全局注册的组件需要补充对应的.d.ts类型声明，否则会导致Volar解析类型异常

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