vue3中的[Vue warn]: defineProps() is a compiler-hint helper that is only usable inside script setup警告

前提条件

这是一个使用vite + vue3 + ts的项目，包依赖环境如下所示：其中package.josn如下所示

{
  "name": "vue3-ts-vite-wen-zhang-ji-lu-xiang-mu",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.4.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "sass": "^1.69.5",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}

Uncaught ReferenceError: defineProps is not defined

XXX.vue如下所示

<template>
  <div style="width: 100%; height: 100%;">
    这是内容
  </div>
</template>

<script lang="ts">
// 这是一个宏，是不需要额外引入的，如果报错，说明这vue文件有问题，缺少了点什么
defineProps<{
  name?: string;
}>()
</script>


<style scoped lang="scss">
.el-container {
  width: 100%;
  height: 100%;
}
</style>

出现了如下所示的报错

Uncaught ReferenceError: defineProps is not defined

即使导入也不行

<template>
  <div style="width: 100%; height: 100%;">
    这是内容
  </div>
</template>

<script lang="ts">
import { defineProps } from 'vue'
// 这是一个宏，是不需要额外引入的，如果报错，说明这vue文件有问题，缺少了点什么
defineProps<{
  name?: string;
}>()
</script>


<style scoped lang="scss">
.el-container {
  width: 100%;
  height: 100%;
}
</style>

会报警告的，一样不能拿到vue3组件中的props中的数据，警告如下所示：

“[Vue warn]: defineProps() is a compiler-hint helper that is only usable inside script setup of a single file component. Its arguments should be compiled away and passing it at runtime has no effect.”

报错原因

defineProps() 是一个编译提示辅助函数，专为在 Vue 3 单文件组件（SFC）的 <script setup> 中使用而设计。它允许你在一种更简洁的方式下声明和可选地为组件的 props 指定类型，而无需在 props 选项中单独定义它们。

在 <script setup> 中使用 defineProps() 时，编译器会推断 prop 的类型，并生成必要的代码以确保组件能够正确接收其 props。这意味着在运行时传递给 defineProps() 的参数实际上不会产生任何效果，因为所有相关逻辑都在编译阶段完成了。

换句话说，defineProps() 的主要作用是在编译阶段帮助生成类型安全的 prop 接口，从而在开发过程中提供更好的类型检查和代码补全支持。一旦编译完成，运行时的代码中将不再保留 defineProps() 的调用，因此它不会对最终的运行时行为造成影响。

对于那些关心性能或最小化运行时包大小的开发者来说，这是一个重要的细节，因为它意味着 defineProps() 不会在运行时增加额外的开销。同时，这也强调了 <script setup> 和 defineProps() 等语法糖的主要价值在于提高开发效率和代码质量，而不是在运行时执行特定的任务。

解决办法

<template>
  <div style="width: 100%; height: 100%;">
    这是内容
  </div>
</template>

<script setup lang="ts">
// 这是一个宏，是不需要额外引入的，如果报错，说明这vue文件有问题，缺少了点什么
defineProps<{
  name?: string;
}>()
</script>


<style scoped lang="scss">
.el-container {
  width: 100%;
  height: 100%;
}
</style>