React+TypeScript中如何为onClick属性定义联合类型函数重载

方案1：直接使用函数类型联合（和color属性写法逻辑一致） #

你可以直接把onClick的类型定义为你需要支持的所有函数类型的联合，写法和color的联合类型完全一致：

import React from "react";

export interface IButtonText {
    children: React.ReactNode;
    leadingIcon: React.ReactNode;
    className: string;
    color: 'primary' | 'secondary';
    // 直接定义函数类型联合，按需添加需要支持的签名即可
    onClick: (() => void) | ((num: number) => void);
}

这种写法适合需要支持的函数签名数量不多的场景，直观易维护。

方案2：接口内定义函数重载 #

如果后续需要扩展更多签名、或者需要更清晰的类型声明，可以在接口内给onClick定义多个调用签名实现重载：

import React from "react";

export interface IButtonText {
    children: React.ReactNode;
    leadingIcon: React.ReactNode;
    className: string;
    color: 'primary' | 'secondary';
    // 函数重载：依次声明所有支持的调用签名
    onClick(): void;
    onClick(num: number): void;
    // 后续需要新增其他参数的函数直接往下加签名即可
    // onClick(str: string, flag: boolean): void;
}

注意事项 #

• 组件内部调用onClick时，传入的参数需要和你定义的签名匹配，TS会自动完成类型校验
• 如果需要接收任意参数的函数，可以直接写为onClick: (...args: any[]) => void，但会丢失类型校验能力，不推荐

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