Vue3+TypeScript：为函数参数的组件及Props指定类型

1. 组件实例的类型指定 #

如果接收的是组件选项对象（比如单文件组件导出的对象），可以用Vue内置的Component类型，它兼容所有Vue组件，适合不同但用途相近的组件：

import type { Component } from 'vue';

const example = (component: Component, props: unknown) => {
  // 函数逻辑
};

如果接收的是组件实例对象（比如通过ref获取的组件实例），则使用ComponentPublicInstance类型，这是所有组件实例的公共类型：

import type { ComponentPublicInstance } from 'vue';

const example = (component: ComponentPublicInstance, props: unknown) => {
  // 函数逻辑
};

若需要更严格的约束（比如要求组件都具备某些共同方法或属性），可以自定义接口并继承公共类型：

import type { ComponentPublicInstance } from 'vue';

// 定义所有目标组件共有的属性/方法
interface BaseComponent extends ComponentPublicInstance {
  commonAction: () => void;
  sharedProp: string;
}

const example = (component: BaseComponent, props: unknown) => {
  // 函数逻辑
};

2. 限定Props为对应组件的Props类型 #

通过TypeScript泛型结合Vue内置的类型工具，可以让Props类型自动匹配传入的组件，实现强类型约束：

针对组件选项对象的场景 #

使用ComponentProps工具类型提取组件的Props类型：

import type { Component, ComponentProps } from 'vue';

const example = <C extends Component>(component: C, props: ComponentProps<C>) => {
  // props类型会自动匹配传入的component的Props
};

针对组件实例对象的场景 #

先通过typeof component.$options获取实例对应的组件类型，再用ComponentProps提取Props：

import type { ComponentPublicInstance, ComponentProps } from 'vue';

const example = <C extends ComponentPublicInstance>(component: C, props: ComponentProps<typeof component.$options>) => {
  // props类型与传入的组件实例的Props完全匹配
};

附加自定义Props约束 #

如果需要限定组件必须包含某些特定Props字段，可以在泛型中添加约束：

import type { Component, ComponentProps } from 'vue';

// 定义所有组件必须具备的基础Props
interface RequiredBaseProps {
  uniqueId: string;
}

const example = <C extends Component<RequiredBaseProps>>(component: C, props: ComponentProps<C>) => {
  // 此时props必然包含uniqueId字段，类型检查会生效
  console.log(props.uniqueId);
};

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