函数参数，可以是字符串或数字，也可以是返回字符串或数字的函数

Posted 2023-03-13

【中文标题】函数参数，可以是字符串或数字，也可以是返回字符串或数字的函数

【英文标题】：Function paramater that is either a string or a number or a function that returns either a string or a number

【发布时间】：2019-04-29 17:35:54

【问题描述】：

我正在使用 TypeScript 构建一个 React 应用程序。

我正在尝试定义一个函数（对于 HOC），该函数接受一个名为 value 的参数，该参数可以是字符串或数字，也可以是返回字符串或数字的函数。

所以我尝试的是：

const myHOC = (
  value: string | number | () => string | () => number
) => WrappedComponent => // ...

但是 TSLint 抱怨第二个 | 之后的所有内容（所以基本上是关于这两个函数）。

上面写着：

[ts] Type expected. [1110]

对于()，

[ts] ',' expected. [1005]

对于=> 和

[ts] 'string' only refers to a type, but is being used as a value here. [2693]
[tslint] Forbidden bitwise operation [no-bitwise]

分别为string / number。

我如何告诉 TypeScript value 是什么？

【问题讨论】：

“TSLint 抱怨” - 它到底在说什么？

@kinduser 编辑了问题。

我猜它无法正确解析它。试试string | number | (() => string) | (() => number);

【参考方案1】：

TSLint（以及 TypeScript）无法正确解析它，你可以将你的函数类型包装到大括号中，让它理解你的目标。

const myHOC = (
  value: string | number | (() => string) | (() => number)
) => WrappedComponent;

编辑：如果您希望这两种函数类型接受可选参数，即 WrappedComponent 道具，则必须导入代表该组件道具的接口（如果它们不在范围内）并在它们内部使用问号?，让 TS 知道它是可选的。

import  WrappedComponentProps  from './WrappedComponent';

const myHOC = (
  value: string | 
         number | 
         ((props?: WrappedComponentProps ) => string) |
         ((props?: WrappedComponentProps ) => number)
) => WrappedComponent;

【讨论】：

谢谢你的作品！正如一个后续问题：我如何告诉打字稿这对于任何具有任何参数的函数都应该没问题（只要返回正确）？因为当 value 是一个接受参数的函数时，TypeScript 现在会抱怨，但我需要这样做。

@J.Hesters 你想让他们都接受一个可选参数吗？

您还可以创建类型别名以使其更具可读性：type StringOrNumber = string | number; type FnStringOrNumber = () => StringOrNumber; const myHOC = ( value: StringOrNumber | FnStringOrNumber ) => WrappedComponent => ...;

@kinduser 具体来说，如果我能以某种方式告诉 typescript 这些函数的输入参数是WrappedComponent 的道具，我会很高兴，因为在 HOC 中的某个时刻有这一行： const badgeValue = typeof value === "function" ? value(this.props) : value;.

@J.Hesters 我已经更新了我的答案，如果它对你有用，请告诉我。