面试题-函数类型的重载是啥意思

在 TypeScript 中,函数重载(Function Overload) 是指为同一个函数提供多个不同的调用签名(参数类型和返回值类型的组合),但函数体只有一个实现。这样可以让函数在不同的输入下表现出不同的行为,同时保持类型安全。

一、函数重载的基本概念

1. 重载签名(Overload Signatures)

声明函数可以接受的不同参数类型和返回值类型,但不包含函数体。

2. 实现签名(Implementation Signature)

实际的函数实现,参数类型必须兼容所有重载签名,返回值类型也需符合重载签名的约束。

二、示例:函数重载的使用

1. 基础重载示例

typescript

复制代码
// 重载签名 1:接受数字,返回数字的平方
function calculate(x: number): number;

// 重载签名 2:接受字符串,返回字符串的长度
function calculate(x: string): number;

// 实现签名:兼容所有重载签名
function calculate(x: number | string): number {
  if (typeof x === 'number') {
    return x * x; // 处理数字
  } else {
    return x.length; // 处理字符串
  }
}

// 使用示例
const result1 = calculate(5);     // 返回 25(数字)
const result2 = calculate("abc"); // 返回 3(字符串长度)
// const result3 = calculate(true); // 错误:不匹配任何重载签名
2. 多个参数的重载

typescript

复制代码
// 重载签名 1:合并两个字符串
function merge(a: string, b: string): string;

// 重载签名 2:合并两个数组
function merge(a: number[], b: number[]): number[];

// 实现签名
function merge(a: string | number[], b: string | number[]): string | number[] {
  if (typeof a === 'string' && typeof b === 'string') {
    return a + b; // 字符串拼接
  } else if (Array.isArray(a) && Array.isArray(b)) {
    return [...a, ...b]; // 数组合并
  }
  throw new Error("Invalid arguments");
}

// 使用示例
const mergedStr = merge("Hello", "World"); // 返回 "HelloWorld"
const mergedArr = merge([1, 2], [3, 4]);    // 返回 [1, 2, 3, 4]

三、函数重载的注意事项

  1. 重载签名与实现签名的关系

    • 实现签名的参数类型必须是所有重载签名参数类型的超集
    • 实现签名的返回值类型必须能赋值给所有重载签名的返回值类型。

    typescript

    复制代码
    // 错误示例:实现签名的参数类型不兼容重载签名
    function add(a: number, b: number): number;
    function add(a: string, b: string): string;
    function add(a: number | string, b: number): number | string { // 错误:第二个参数必须兼容 string
      return a + b;
    }
  2. 重载解析规则

    • TypeScript 会从上到下匹配第一个符合参数类型的重载签名。
    • 因此,重载签名的顺序很重要,通常应将更具体的签名放在前面。

    typescript

    复制代码
    function fn(x: string): string;
    function fn(x: any): any;
    function fn(x: any): any { return x; }
    
    fn("hello"); // 匹配第一个重载(更具体)
    fn(123);     // 匹配第二个重载

四、替代方案:联合类型与泛型

对于简单的函数重载场景,可以使用联合类型或泛型替代,使代码更简洁:

1. 联合类型

typescript

复制代码
function calculate(x: number | string): number {
  if (typeof x === 'number') {
    return x * x;
  } else {
    return x.length;
  }
}
2. 泛型

typescript

复制代码
function identity<T>(arg: T): T {
  return arg;
}

五、函数重载的应用场景

  1. 根据参数类型返回不同类型

    typescript

    复制代码
    function parseJSON(json: string): any;
    function parseJSON(json: null): null;
    function parseJSON(json: string | null): any | null {
      return json ? JSON.parse(json) : null;
    }
  2. 可选参数的不同组合

    typescript

    复制代码
    function createElement(tag: string): HTMLElement;
    function createElement(tag: string, className: string): HTMLElement;
    function createElement(tag: string, className?: string): HTMLElement {
      const el = document.createElement(tag);
      if (className) el.className = className;
      return el;
    }

总结

特性 说明
定义方式 先声明多个重载签名,再实现一个兼容所有签名的函数体。
类型检查 调用时必须匹配某个重载签名,实现签名内部需自行处理类型逻辑。
适用场景 函数需要根据不同参数类型返回不同类型,或处理多种参数组合。
替代方案 简单场景可使用联合类型或泛型,但函数重载能提供更精确的类型控制。

函数重载是 TypeScript 增强函数类型表达力的重要工具,合理使用可以让代码既安全又灵活。

相关推荐
m0_738120722 小时前
CTFshow系列——命令执行web53-56
前端·安全·web安全·网络安全·ctfshow
Liu.7744 小时前
uniappx鸿蒙适配
前端
山有木兮木有枝_6 小时前
从代码到创作:探索AI图片生成的神奇世界
前端·coze
言兴6 小时前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra7 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋7 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴8 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农9 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan9 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown9 小时前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js