使用defineProps<SomePropType>()时Props渲染失败问题排查

第一个编译错误的原因 #

Vue 3的<script setup>里，defineProps的类型参数必须是字面量类型、接口，或者对这两者的直接引用。你在types.ts里导出的是type类型别名，Vue的单文件组件编译器在编译阶段没法正确解析导入的type——因为TypeScript的类型别名会在编译时被擦除，Vue的宏拿不到具体的结构信息，所以抛出了编译错误。

第二个写法的运行时警告原因 #

当你用interface Item extends IItem {}时，虽然interface本身是支持的，但因为IItem是type类型别名，Vue编译器还是没法从这个继承关系里提取出props的具体结构，导致编译阶段没生成对应的运行时props定义。组件实例上自然就没有title和description属性，于是触发了运行时警告。

方案1：把类型别名改成接口（推荐） #

把types.ts里的type换成interface，Vue编译器就能正确识别导入的接口了：

/* types.ts */
export interface IItem {
  title: string;
  description: string;
}

然后在TestItem.vue里直接使用：

<script setup lang="ts">
import type { IItem } from "@/types";
const { title, description } = defineProps<IItem>();
</script>

<template>{{ title }} {{ description }}</template>

方案2：混合运行时props定义和类型注解 #

如果必须保留type类型别名，可以同时提供运行时的props定义和类型注解，让Vue同时拿到运行时信息和类型信息：

<script setup lang="ts">
import type { IItem } from "@/types";
const props = defineProps<IItem>({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  }
});
</script>

<template>{{ props.title }} {{ props.description }}</template>

方案3：组件内直接声明类型（已验证可行） #

就是你目前用的在组件内部直接定义接口的写法，编译器能直接解析类型结构，所以可以正常工作，但缺点是类型没法在多个组件间复用。

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