如何在Vue3组件props中使用导入组件的类型作为prop类型避免重复代码

你可以通过Vue内置的类型工具直接提取TodoItem组件的props类型，无需重复定义接口，实现类型自动同步。

方案1：直接从组件实例提取类型（无需修改现有TodoItem代码） #

在TodoList组件中使用ExtractPropTypes工具提取TodoItem的props类型即可：

import { defineComponent, ExtractPropTypes, PropType } from 'vue'
import TodoItem from './TodoItem.vue'

// 直接提取TodoItem的props类型，TodoItem的props变动时这里会自动同步
type TodoItemProps = ExtractPropTypes<typeof TodoItem['props']>

export default defineComponent({
  name: 'todoList',
  props: {
    todos: {
      type: Array as PropType<TodoItemProps[]>,
      required: false,
      default: () => []
    },
  },
  components: {
    TodoItem,
  },
})

方案2：抽离公共props定义（更适合长期维护的项目） #

如果项目迭代频繁，建议将TodoItem的props定义单独抽离为公共文件，所有用到该类型的地方统一引用：

1. 新建todo-props.ts公共类型文件：

import type { ExtractPropTypes } from 'vue'

// 统一定义todoItem的props，加as const保证类型提取准确
export const todoItemProps = {
  name: {
    type: String,
    required: true,
  },
  isCompleted: {
    type: Boolean,
    required: false,
    default: false,
  },
} as const

// 导出对应的类型
export type TodoItemProps = ExtractPropTypes<typeof todoItemProps>

2. 修改TodoItem组件，引用公共props：

import { defineComponent } from 'vue'
import { todoItemProps } from './todo-props'

export default defineComponent({
  name: 'todoItem',
  props: todoItemProps,
})

3. 在TodoList组件中直接引用类型：

import { defineComponent, PropType } from 'vue'
import TodoItem from './TodoItem.vue'
import { TodoItemProps } from './todo-props'

export default defineComponent({
  name: 'todoList',
  props: {
    todos: {
      type: Array as PropType<TodoItemProps[]>,
      required: false,
      default: () => []
    },
  },
  components: {
    TodoItem,
  },
})

两种方案都可以完全避免类型定义重复的问题，只要修改props的源定义，所有引用的地方类型都会自动同步。

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