TypeScript 中的多重签名函数类型详解与实例化方法-js教程-PHP中文网

TypeScript 中的多重签名函数类型详解与实例化方法

本文介绍如何正确定义并实例化 typescript 中带有多个调用签名（overloads）和附加属性的函数类型，包括类型约束、实现要点及常见陷阱。

本文介绍如何正确定义并实例化 typescript 中带有多个调用签名（overloads）和附加属性的函数类型，包括类型约束、实现要点及常见陷阱。

在 TypeScript 中，你定义的 MyFunction 类型是一个可调用对象类型（callable object type），而非传统意义上的函数重载类型（function overload declaration）。它同时具备两个调用签名和一个字符串属性 desc，属于“函数 + 属性”的混合结构。这类类型完全合法且可实例化，但需注意：实现函数必须兼容所有声明的调用签名，且需手动挂载属性。

以下是一个完整、类型安全的实例化示例：

type MyFunction = {
  (x: any): boolean;
  (x: any, y: any): boolean;
  desc: string;
};

const myFunction: MyFunction = function (x: any, y?: any): boolean {
  // 兼容单参和双参调用：y 为可选参数，内部逻辑按需处理
  return y === undefined ? typeof x === 'string' : typeof x === 'number' && typeof y === 'number';
} as MyFunction; // 类型断言确保编译器认可其满足全部签名

// 手动添加必需属性
myFunction.desc = "Brian’s custom function";

// ✅ 正确调用（类型检查通过）
console.log(myFunction(42));           // true（单参）
console.log(myFunction(3.14, 100));  // true（双参）
console.log(myFunction.desc);        // "Brian’s custom function"

⚠️ 关键注意事项：

Scrapfly SDK TypeScript

使用 Scrapfly SDK（scrapfly-sdk）在 TypeScript 或 JavaScript 中进行网页抓取，用于用户请求抓取 URL、绕过反爬虫防护、渲染页面等场景。

下载

不可直接用箭头函数字面量赋值（如 (x, y?) => ...）并期望自动满足多签名——箭头函数本身无重载能力，必须通过 function 表达式或类型断言显式告知编译器其行为兼容性；
y? 参数写法是实现兼容性的核心：单参调用传入 x，双参调用传入 x 和 y，函数体内通过 y !== undefined 区分逻辑分支；
必须显式赋值 desc 属性，否则运行时会报 Property 'desc' does not exist 错误；
若需更严格的类型安全（避免 any），建议将 any 替换为具体类型或泛型，例如 (x: T, y?: U) => boolean（需同步更新类型定义）。