TS 函数重载

Posted 2023-04-14

参考技术A

这个概念是在一些强类型语言中才有的，在JS中依据不同参数类型或参数个数执行一些不同函数体的实现很常见，依托于TypeScript，就会有需要用到这种声明的地方。

关于函数重载，必须要把精确的定义放在前面，最后函数实现时，需要使用 | 操作符或者 ? 操作符，把所有可能的输入类型全部包含进去，以具体实现。如下例子1 和 例子3

例子1
例如我们有一个add函数，它可以接收string类型的参数进行拼接，也可以接收number类型的参数进行相加。

TypeScript 中的函数重载也只是多个函数的声明，具体的逻辑还需要自己去写，他并不会真的将你的多个重名 function 的函数体进行合并

考虑如下 例子2 ：

在这个 test 函数里，我们的本意可能是当传入参数 para 是 User 时，不传 flag，当传入 para 是 number 时，传入 flag。TypeScript 并不知道这些，当你传入 para 为 User 时，flag 同样允许你传入：

使用函数重载能帮助我们实现：

实际项目中，你可能要多写几步，如在 class 中：

函数重载的意义在于能够让你知道传入不同的参数得到不同的结果，如果传入的参数不同，但是得到的结果（类型）却相同，那么这里就不要使用函数重载（没有意义）。
如果函数的返回值类型相同，那么就不需要使用函数重载

如何编写 Typescript 声明文件
巧用 TypeScript （一）

打字稿，样式组件错误：TS2769：没有重载匹配此调用。重载 1 of 2

【中文标题】打字稿，样式组件错误：TS2769：没有重载匹配此调用。重载 1 of 2

【英文标题】：Typescript, styled-component error: TS2769: No overload matches this call. Overload 1 of 2

【发布时间】：2021-01-26 05:36:55

【问题描述】：

这是我的 styledComponent：

const stopPropagation = (event: Event): void => 
  event.stopPropagation();
;

<StyledComp onClick=stopPropagation> //error occurs here
    hi StyledComp
</StyledComp>

这就是我的定义：

export type Prop = 
  onClick: (event: Event) => void;
;

export const StyledComp = styled.div<Prop>`
  display: flex;
`;

但它会返回如下错误：

TS2769：没有重载匹配此调用。重载 1 of 2, '(props: Pick, "title" | "slot" | ... 252 更多 ... | "is"> & ...; & StyledComp, "title" | ... 254 更多 ... | "is"> & Partial<...>, "title" | ... 254 更多 ... | "is"> & ... ; & ...; ): ReactElement<...>'，给出以下错误。类型 '(event: Event) => void' 不可分配给类型 '((event: MouseEvent) => void) & ((event: Event) => void)'。类型 '(event: Event) => void' 不可分配给类型 '(event: MouseEvent) => void'。参数 'event' 和 'event' 的类型不兼容。类型“MouseEvent”不可分配给类型“事件”。属性“目标”的类型不兼容。类型“EventTarget”中缺少属性“值”，但类型“ value: string; '。重载 2 of 2, '(props: StyledComponentPropsWithAs): ReactElement, string | ... 1 更多 ... | (new (props: any) => Component<...>)>'，给出了以下错误。类型 '(event: Event) => void' 不可分配给类型 '((event: MouseEvent) => void) & ((event: Event) => void)'。类型 '(event: Event) => void' 不可分配给类型 '(event: MouseEvent) => void'。

注意：您可以找到 styled-component&Typescript 文档here!

编辑：

这是事件类型：

export type Event = 
  target: 
    value: string;
  ;
  stopPropagation: () => void;
  preventDefault: () => void;
;

【问题讨论】：

我不确定 Event 到底是什么，但 AFAIK 没有这样的内置静态类型。因此，如果您没有手动定义，则必须改用React.MouseEvent。

我手动定义的，和 React.MouseEvent 一样。

哦，也许我对事件类型有误。让我调查一下，也许是问题所在

【参考方案1】：

错误信息的重要部分是

类型 '(event: Event) => void' 不可分配给类型 '(event: MouseEvent) => void'

所以样式化 div 的 onClick 属性具有 (event: MouseEvent<HTMLDivElement, MouseEvent>) => void 类型，并且您想为其分配 (event: Event) => void 类型的函数，但这不起作用，因为类型不兼容。

你应该改写：

const stopPropagation = (event: MouseEvent<HTMLDivElement, MouseEvent>): void => 
  event.stopPropagation();
;

【讨论】：

谢谢，我添加了这个类型：React.MouseEvent 并且成功了。

只是想为这个正确答案添加一点注释。只要您像这样从反应中导入 MouseEvent，这个答案就是正确的：import MouseEvent from 'react'。用于限制性事件处理的 MouseEvent 是不必要且毫无意义的，因此如果您想使用限制性方法，您可以这样做：MouseEvent<HTMLElement> 或者对于一般用途，您可以简单地单独使用 MouseEvent。