Vue3组件props用interface定义类型时TS2693报错是什么原因？

报错原因 #

Vue Options API 中 props 配置项的 type 字段是运行时校验参数，需要传入 JavaScript 真实存在的构造函数（如 String/Number/Array/Object 等）。而你定义的 CorveesI 是 TypeScript 静态类型，仅在编译阶段存在，编译为 JavaScript 后会被完全擦除，直接写 type: CorveesI[] 相当于把仅存在于编译阶段的类型当作运行时的值使用，因此触发 TS2693 报错。

解决方案 #

方案1：Options API 搭配 PropType 标注类型 #

从 Vue 中导入 PropType 工具类型，将运行时的构造函数 Array 强转为对应类型的包装类型即可：

<script lang="ts">
import { defineComponent, type PropType } from 'vue'

interface CorveesI {
  What: string,
  Who: string,
  Debit: number
}

export default defineComponent({
  name: 'Corvees',
  props: {
    corvees: {
      // 运行时校验用Array构造函数，用PropType标注TS类型
      type: Array as PropType<CorveesI[]>,
      required: true,
      // 可选：添加运行时结构校验，保证传入的数组元素符合格式要求
      validator: (val: unknown): val is CorveesI[] => {
        if (!Array.isArray(val)) return false
        return val.every(item => 
          typeof item.What === 'string' 
          && typeof item.Who === 'string' 
          && typeof item.Debit === 'number'
        )
      }
    }
  },
  // ...其余逻辑
})
</script>

方案2：