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

在 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 增强函数类型表达力的重要工具,合理使用可以让代码既安全又灵活。

相关推荐
jingling5557 分钟前
Git 常用命令指南:从入门到高效开发
前端·javascript·git·前端框架
索西引擎9 分钟前
【前端】网站favicon图标制作
前端
程序员海军15 分钟前
告别低质量Prompt!:字节跳动PromptPilot深度测评
前端·后端·aigc
华洛17 分钟前
关于可以控制大模型提升任意产品的排名这件事📈
前端·github·产品经理
Yanc18 分钟前
翻了vue源码 终于解决了这个在SFC中使用tsx的bug
前端·vue.js
nujnewnehc22 分钟前
失业落伍前端, 尝试了一个月 ai 协助编程的真实感受
前端·ai编程·github copilot
大熊学员24 分钟前
HTML 媒体元素概述
前端·html·媒体
好好好明天会更好27 分钟前
那些关于$event在vue中不得不说的事
前端·vue.js
默默地离开35 分钟前
CSS定位全解析:从static到sticky的5种position属性详解(第五回)
前端·css
JosieBook38 分钟前
【web应用】前后端分离项目基本框架组成:Vue + Spring Boot 最佳实践指南
前端·vue.js·spring boot