MST
星途 面试题库

面试题:TypeScript函数重载在工程化场景下的优化

在一个大型工程中,有一个频繁调用的 `processData` 函数,存在多种重载形式以处理不同类型的数据。随着业务发展,重载情况变得复杂且维护困难。请阐述你会如何优化这个函数的重载设计,同时保证原有功能不受影响,并结合TypeScript类型系统特性给出具体的优化思路和示例代码片段。
26.5万 热度难度
前端开发TypeScript

知识考点

AI 面试

面试题答案

一键面试

优化思路

  1. 使用联合类型与类型守卫:通过联合类型将所有可能的数据类型合并,然后在函数内部使用类型守卫来区分不同类型的数据并进行相应处理。这样可以减少函数重载的数量,使代码结构更清晰。
  2. 泛型:如果处理逻辑在一定程度上是通用的,可以使用泛型来提高代码的复用性,减少重复代码。

示例代码

假设 processData 原本有针对 stringnumber 类型的重载:

// 原始重载形式
function processData(data: string): string;
function processData(data: number): number;
function processData(data: string | number) {
    if (typeof data ==='string') {
        // 处理string类型数据
        return data.toUpperCase();
    } else {
        // 处理number类型数据
        return data * 2;
    }
}

// 使用泛型的情况(假设处理逻辑类似)
function processData<T extends string | number>(data: T): T extends string? string : number {
    if (typeof data ==='string') {
        return data.toUpperCase() as T extends string? string : number;
    } else {
        return (data * 2) as T extends string? string : number;
    }
}

通过上述方式,在保证原有功能不受影响的情况下,利用TypeScript类型系统特性优化了 processData 函数的重载设计,使其更易于维护和扩展。