在 onClick 道具中使用联合类型

Posted 2023-03-13

【中文标题】在 onClick 道具中使用联合类型

【英文标题】：use union type in onClick prop

【发布时间】：2021-09-27 01:11:02

【问题描述】：

我正在使用 react 和 typescript 我有一个接口，我在那个文件中定义了我的类型。在这个文件中我有一个 onClick 属性。这个接受了一个函数作为值。我的问题是如何为我的 onclick 定义函数重载prop.eg:onClick:()=>void | （数字）=> 无效 ETC。 这是我的界面文件。换句话说，我希望我的 onClick 道具像我的颜色道具一样可以接受联合类型。

import React from "react";

export interface IButtonText 
    children: React.ReactNode;
    leadingIcon: React.ReactNode;
    className: string;
    color: 'primary' | 'secondary';
    onClick: ()=>void;

【参考方案1】：

只是缺少括号：

export interface IButtonText 
    ...
    onClick: (() => void) | ((num: number) => void);

但这可能是更好的选择：

export interface IButtonText 
    ...
    onClick: (num?: number) => void;

【参考方案2】：

联合类型产生错误

interface IButtonText 
    onClick: (() => void) | ((num: number) => void);



const foo = (props: IButtonText) => 
    props.onClick() // error, but should be ok

您正在寻找交集而不是联合。

函数的交集产生函数重载。

考虑这个例子：

interface IButtonText 
    onClick: (() => void) & ((num: number) => void);



const foo = (props: IButtonText) => 
    props.onClick() // ok
    props.onClick(2) // ok

这种方法onClick: (num?: number) => void; 在这种情况下是完全有效的，但是如果联合中有两个以上的元素，则很难用可选参数编​​写正确的函数类型

【讨论】：

@Poldark 这篇文章可能对你有所帮助dev.to/captainyossarian/how-to-type-react-props-as-a-pro-2df2