在 onClick 道具中使用联合类型

Question

我正在使用 React 和打字稿我有一个接口，我在 that.in 这个文件中定义了我的类型我有一个 onClick prop.this 接受了一个函数 value.my 问题是如何我可以为我的 onclick prop.eg:onClick:()=>void | 定义函数重载吗？ (number)=>void ETC。这是我的界面 file.in 换句话说，我希望我的 onClick 道具像我的颜色道具一样可以接受联合类型。

import React from "react";

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

Answer 1

只是缺少括号：

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

但这可能是更好的选择：

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

Answer 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; 在这种情况下是完全有效的，但如果联合中有两个以上的元素，则很难编写带有可选参数的正确函数类型

在 onClick 道具中使用联合类型

use union type in onClick prop

javascript

interface

typescript

reactjs

typescript-typings