TypeScript中如何将函数作为Props传递？代码场景答疑

问题1：子组件的函数参数类型定义 #

你需要把##something goes here##替换为对应的函数类型，有两种常用方式：

方式1：直接内联定义函数类型

export function childFunction(
    emailDetails: EmailVerification[],
    emailDeleteHandler: (emailAddress: string) => void
) {
    // 组件逻辑
}

方式2：抽离类型别名（推荐复用场景）

如果这个删除函数的类型会在多个组件里用到，抽成类型别名更便于维护：

// 定义可复用的类型
type EmailDeleteHandler = (emailAddress: string) => void;

export function childFunction(
    emailDetails: EmailVerification[],
    emailDeleteHandler: EmailDeleteHandler
) {
    // 组件逻辑
}

两种写法都完全符合TypeScript语法规范，按需选择即可。

问题2：父组件传递函数的正确姿势 #

你当前的写法childFunction(emailDetails || [], emailDeleteHandler)本身是对的，但有两个优化点：

1. 直接传递函数引用：别额外套一层函数（比如() => emailDeleteHandler(...)），除非你需要提前绑定固定参数，否则直接传原函数就行。
2. 改用React组件props模式（推荐）：如果这是React组件，更符合社区惯例的写法是让子组件接收props对象，而非直接传多个参数：

子组件调整为props模式：

// 定义props接口
export interface ChildProps {
    emailDetails: EmailVerification[];
    onDelete: (emailAddress: string) => void;
}

export function childFunction({ emailDetails, onDelete }: ChildProps) {
    const emailToBeDeleted = 'emailToBeDeleted';
    return (
        <div>
            <button onClick={() => onDelete(emailToBeDeleted)}>
                Delete from account
            </button>
        </div>
    )
}

父组件用JSX调用：

return (
    <div>
        <childFunction 
            emailDetails={emailDetails || []} 
            onDelete={emailDeleteHandler} 
        />
    </div>
)

这种模式更清晰，也方便后续扩展更多props。如果坚持用你原来的函数直接调用方式，当前代码没问题，不用改。

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