面试题：TypeScript 函数重载与泛型结合的深度应用

Question

要求实现一个函数，该函数接受一个泛型类型参数T，根据T的不同，函数具有不同的重载行为。如果T是字符串类型，函数返回T的长度；如果T是数字类型数组，函数返回数组中所有数字的和；如果T是对象类型，函数返回对象的属性名数组。请使用TypeScript函数重载与泛型结合的方式实现，并详细说明设计思路。

Answer 1

实现代码

function processValue<T>(value: T): number | string[];
function processValue(value: string): number;
function processValue(value: number[]): number;
function processValue(value: object): string[];
function processValue<T>(value: T): number | string[] {
    if (typeof value ==='string') {
        return value.length;
    } else if (Array.isArray(value) && value.every((element) => typeof element === 'number')) {
        return value.reduce((acc, num) => acc + num, 0);
    } else if (typeof value === 'object' && value!== null) {
        return Object.keys(value);
    }
    throw new Error('Unsupported type');
}

设计思路

1. 函数重载声明：
   • 首先定义了一个泛型函数processValue的重载声明function processValue<T>(value: T): number | string[];，这是一个通用的声明，它表明函数接受一个泛型参数T，返回值可能是number或者string[]类型。
   • 然后针对具体类型进行了重载声明：
     • function processValue(value: string): number;，当参数是字符串时，返回字符串的长度，类型为number。
     • function processValue(value: number[]): number;，当参数是数字类型数组时，返回数组元素的和，类型为number。
     • function processValue(value: object): string[];，当参数是对象时，返回对象属性名数组，类型为string[]。
2. 函数实现：
   • 在实际的函数实现function processValue<T>(value: T): number | string[] {... }中，通过typeof和Array.isArray等类型判断来确定参数的具体类型。
   • 如果value是字符串类型（typeof value ==='string'），返回其长度（value.length）。
   • 如果value是数字类型数组（Array.isArray(value) && value.every((element) => typeof element === 'number')），使用reduce方法计算数组元素的和。
   • 如果value是对象类型（typeof value === 'object' && value!== null），使用Object.keys方法获取对象的属性名数组。
   • 如果传入的参数类型不满足以上任何一种情况，抛出一个Unsupported type的错误。这样通过函数重载和泛型结合，实现了根据不同类型参数执行不同逻辑的功能。