Vue3+TS使用defineProps传值类型错误编译未报错问题咨询

这个现象是配置和写法错误导致的，不属于正常预期，核心原因有两个：

1. defineProps的TS泛型写法不符合规范
   你当前写的FormProperties接口是Vue 运行时props声明 的结构格式（也就是defineProps({})传对象参数时的写法），但TS类型校验用的泛型写法，不需要套type/required这一层结构。你现在的写法等价于告诉TS：props.dataset本身是一个有type、required两个属性的对象，完全没有绑定FormType的约束，自然不会对传入的dataset内容做类型检查。
2. 默认构建流程没有开启模板级TS校验
   Vite、Webpack等构建工具默认的Vue构建流程只会转译代码，不会执行TS类型检查；同时默认配置下模板内表达式的多余字段检查是关闭的，所以哪怕类型不匹配、传了未定义字段，构建过程也不会拦截。

按以下步骤调整即可实现编译阶段拦截props类型错误：

• 修正defineProps的类型定义
  泛型参数直接写props的实际字段类型即可，不需要嵌套运行时声明的type/required结构，修正后的TestComponent代码如下：

<template>
  <h1 class="text-9x1 flex">Hello {{ props.dataset.strCustomerName }}</h1>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

type FormType = {
  strCustomerName: string;
};

// 直接定义props的结构类型
const props = defineProps<{
  dataset: FormType;
}>();

console.log("We are props: ", props.dataset);
</script>

如果需要给props设置默认值，搭配withDefaultsAPI使用即可。

• 开启构建阶段的类型检查
  安装vue-tsc作为类型检查工具，修改package.json中的构建命令，在构建前先执行全量类型检查，类型不通过直接阻断构建：

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

• 开启严格模板检查拦截多余字段
  在项目根目录的tsconfig.json中添加以下配置，开启严格模式和模板类型检查，即可拦截传入未定义字段的问题：

{
  "compilerOptions": {
    "strict": true
  },
  "vueCompilerOptions": {
    "strictTemplates": true
  }
}

注意：请确保编辑器使用最新版Volar插件，禁用旧版Vetur插件，否则IDE提示和类型检查结果可能不一致。

调整完成后，两类错误都会被拦截：

• 给strCustomerName传数字值时，会抛出类型number不能赋值给类型string的错误
• 传入未定义的strCustomerHasAName字段时，会抛出对象字面量只能指定已知属性，strCustomerHasAName不存在于FormType类型中的错误

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