Vue父子组件传Props是否需双向指定类型？如何解决类型报错？

你不用每次都手动导入SomeItem并做类型断言，有几种更简洁的方式来处理这个问题：

1. 从子组件导出Props类型，直接约束父组件数据 #

在子组件中，除了定义Props接口，把它导出：

<!-- MyComponent.vue -->
<script setup lang="ts">
import { SomeItem } from '~~/types';

export interface Props {
  someItems: SomeItem[];
}

const props = defineProps<Props>();
</script>

然后在父组件中，直接导入子组件的Props类型来约束myData，无需单独导入SomeItem：

<!-- ParentComponent.vue -->
<script setup lang="ts">
import MyComponent from './MyComponent.vue';
import type { Props } from './MyComponent.vue';

// 用子组件导出的类型约束数据
const myData: Props['someItems'] = [/* 你的数据内容 */];
</script>

<template>
  <MyComponent :some-items="myData" />
</template>

2. 用Vue内置ComponentProps提取子组件Prop类型 #

如果不想让子组件额外导出类型，可以用Vue的ComponentProps类型工具直接从组件本身推导Prop类型：

<!-- ParentComponent.vue -->
<script setup lang="ts">
import MyComponent from './MyComponent.vue';
import type { ComponentProps } from 'vue';

// 提取MyComponent的所有Prop类型，再拿到someItems的类型
type MyComponentProps = ComponentProps<typeof MyComponent>;
const myData: MyComponentProps['someItems'] = [/* 你的数据内容 */];
</script>

3. 给父组件数据做源头类型标注 #

如果myData是从接口请求或其他模块获取的，在源头就给它标注正确类型，避免后续传参时的断言操作：

// 比如在数据请求模块中
import { SomeItem } from '~~/types';

export async function fetchItems(): Promise<SomeItem[]> {
  const res = await fetch('/api/items');
  return res.json();
}

在父组件中使用时，myData会自动带上正确类型：

<script setup lang="ts">
import MyComponent from './MyComponent.vue';
import { fetchItems } from './api';

const myData = await fetchItems(); // 类型自动为SomeItem[]
</script>

<template>
  <MyComponent :some-items="myData" />
</template>

4. 可选：补充子组件Prop的运行时校验 #

结合TypeScript类型定义，在子组件中添加默认值和运行时校验，能让类型推导更顺畅：

<!-- MyComponent.vue -->
<script setup lang="ts">
import { SomeItem } from '~~/types';
import { defineProps, withDefaults } from 'vue';

interface Props {
  someItems: SomeItem[];
}

const props = withDefaults(defineProps<Props>(), {
  someItems: () => []
});
</script>

这不会直接减少导入操作，但能降低类型不匹配的概率。

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