Vue3中<script setup lang="ts">为何未校验TS非法属性赋值操作？

• 你遇到的差异本质是类型检查环节的执行逻辑不同，和语法转译无关：
  • TypeScript 本身的转译步骤只会剥离类型标记、输出可运行的JS代码，哪怕代码存在类型错误也能完成转译。我们通常看到的类型错误报错，是独立于转译的静态类型检查环节输出的。
  • 普通 <script lang="ts"> 块在大部分脚手架的默认配置下，会被ts-loader等工具在转译时同步执行类型检查，所以你会直接看到编译失败的提示，符合预期。
  • <script setup> 是 Vue3 新增的语法糖，默认情况下 Vite、Vue CLI 等工具的开发环境配置，不会对 <script setup> 内容做实时全量类型校验，仅做语法转译，所以你不会在编译阶段收到类型错误提示，误以为编译成功。

要让 <script setup lang="ts"> 正常触发这类类型校验，按以下步骤配置即可：

1. 安装依赖：将 vue-tsc 和 typescript 安装为项目开发依赖，这是 Vue 官方提供的单文件组件专属类型检查工具，可以完整识别 <script setup> 语法。
2. 构建阶段校验：修改项目 package.json 中的构建命令，以 Vite 项目为例，将 build 命令调整为：

   "scripts": {
     "build": "vue-tsc --noEmit && vite build"
   }
   

   配置完成后生产构建前会先执行全量类型检查，存在类型错误就会直接终止构建。
3. 开发阶段实时校验：开发时不要依赖构建工具的编译提示，在 VSCode 中安装 Volar 插件并启用类型检查功能，编写代码阶段就会实时标红提示 aa.bbb 这类非法赋值的错误。
4. 校验规则配置：确保 tsconfig.json 中开启了基础严格校验规则，示例最小配置如下：

   {
     "compilerOptions": {
       "strict": true,
       "noImplicitAny": true
     },
     "include": ["src/**/*.ts", "src/**/*.vue"]
   }
   

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