TypeScript中如何检查函数签名，实现按钮创建函数的正确类型返回？

在TypeScript中重载了createButton函数，用于创建点击触发特定回调action的按钮：

• 创建Button1时，需传入无参数的action；
• 创建Button2时，需传入带MyParam类型参数的action。

但存在类型安全问题：可以将实际返回的Button1强制转为Button2，示例如下：

const btn: Button2 = createButton({ label: "x", action: (/* 无参数 */) => void 0 }); // 实际返回Button1，但类型被强制转换

为此添加了hasActionParam属性来区分两种按钮类型，现在需要在函数实现中判断传入的action是否带有MyParam参数，以此设置hasActionParam的值。

相关类型与函数定义：

interface Button1 {
  label: string;
  action: () => void;
  hasActionParam: false;
}
interface Button2 {
  label: string;
  action: (param: MyParam) => void;
  hasActionParam: true;
}

function createButton({ label, action }: { label: string; action: () => void }): Button1;
function createButton({ label, action }: { label: string; action: (param: MyParam) => void }): Button2;
function createButton({
  label = "",
  action
}: { label: string; action: () => void | (param: MyParam) => void }): Button1 | Button2 {
  return {
    label,
    action,
    hasActionParam: /* 需要实现判断逻辑 */ ? true : false
  };
}

可以利用JavaScript函数的length属性来判断形参数量——该属性会返回函数定义时的形参个数（不包含剩余参数和带默认值的参数，刚好匹配当前场景）。

具体实现如下：

function createButton({
  label = "",
  action
}: { label: string; action: () => void | (param: MyParam) => void }): Button1 | Button2 {
  return {
    label,
    action,
    hasActionParam: action.length === 1 ? true : false
  };
}

说明 #

• action.length会返回函数声明时的形参数量：无参的action返回0，带一个MyParam参数的action返回1，以此区分两种按钮类型。
• 该方案适用于当前场景，因为你明确限定了两种action的参数形式，不存在带默认值的参数或剩余参数的情况。如果后续扩展参数形式，可根据实际需求调整判断逻辑。

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