Vue3 TypeScript单文件组件（SFC）使用Props时出现类型错误

我来帮你捋清楚这个问题——你遇到的核心问题其实是几个容易忽略的小细节，尤其是TypeScript类型导入和Vue API的正确使用方式，咱们一个个拆解解决：

1. 选项式API写法的核心错误：缺少PropType导入 #

你最开始的代码里，用了String as PropType<string>来指定props的严格类型，但没有从Vue中导入PropType，这直接导致TS无法识别这个类型，进而报错Property 'label' does not exist...。

正确的选项式API示例： #

<script lang="ts">
// 必须导入PropType！
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: "Test",
  props: {
    label: {
      type: String as PropType<string>,
      required: true,
    },
  },
  methods: {
    onClick() {
      console.log(this.label); // 现在类型检查正常通过
    },
  },
});
</script>

如果你的类型要求没那么严格，也可以省略PropType，直接用原生类型构造函数，TS依然能正确推断：

props: {
  label: {
    type: String,
    required: true,
  },
}

2. <script setup>写法的正确姿势 #

你尝试的<script setup>写法本身是有效的，提示“props变量未使用”只是ESLint的警告，不是类型错误。如果要解决这个警告，要么实际使用props的属性，要么添加ESLint注释忽略。另外，推荐两种更贴合TS风格的写法：

方式1：对象式定义（带类型推断） #

<script setup lang="ts">
const props = defineProps({
  classes: String, // 可选字符串类型
  label: {
    type: String,
    required: true // 必填字符串类型
  }
})

// 实际使用props，消除未使用警告
const handleClick = () => {
  console.log(props.label)
}
</script>

方式2：纯类型注解定义（更TS友好） #

Vue 3.2+支持直接用TS接口/类型注解来定义props，这种方式更符合TypeScript的使用习惯：

<script setup lang="ts">
// 直接用TS类型定义props
const props = defineProps<{
  classes?: string // 可选属性
  label: string    // 必填属性
}>()

const handleClick = () => {
  console.log(props.label)
}
</script>

3. 选项式API中setup方法的正确用法 #

你之前尝试在setup方法内部调用defineProps是错误的——defineProps是编译时宏，只能在<script setup>的顶层作用域使用，或者在选项式API的props选项中定义。如果用选项式API的setup方法，应该通过参数接收props：

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

export default defineComponent({
  name: "Test",
  props: {
    label: {
      type: String as PropType<string>,
      required: true,
    },
  },
  // 通过参数接收props
  setup(props) {
    const onClick = () => {
      console.log(props.label) // 直接访问参数里的props
    }
    // 把方法暴露给模板
    return { onClick }
  }
});
</script>

关键注意点总结 #

• 选项式API中使用PropType必须从vue导入，否则TS无法识别类型
• <script setup>中的defineProps是编译时宏，无需导入，且只能在顶层作用域使用
• 选项式API的setup方法需要通过参数获取props，不能在内部调用defineProps
• 纯类型注解的defineProps需要Vue 3.2及以上版本支持，你的Vite项目默认满足这个条件

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