MST

星途 面试题库

面试题:TypeScript默认参数与可选参数优先级在类型推断及重载中的深度探讨

编写一组TypeScript函数重载,这些重载函数包含默认参数和可选参数。阐述在进行函数调用时,TypeScript编译器如何根据参数的传入情况,结合默认参数与可选参数的优先级,正确推断出调用的是哪个重载函数,并分析这个过程中可能出现的类型错误及解决办法。
31.8万 热度难度
前端开发TypeScript

知识考点

AI 面试

面试题答案

一键面试

1. 编写包含默认参数和可选参数的TypeScript函数重载示例

// 函数重载声明
function combine(a: string, b: string, separator?: string): string;
function combine(a: number, b: number, separator?: string): number;
// 函数实现
function combine(a: string | number, b: string | number, separator = '-'): string | number {
    if (typeof a ==='string' && typeof b ==='string') {
        return a + (separator || '-') + b;
    } else if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    }
    throw new Error('Invalid argument types');
}

2. 编译器推断过程

  • 参数匹配:TypeScript编译器首先会根据传入参数的数量和类型,从重载列表中寻找匹配的声明。
  • 默认参数:如果传入的参数数量不足,编译器会优先使用默认参数来补充缺失的参数,再进行匹配。
  • 可选参数:可选参数意味着该参数可以不传,编译器在匹配时会考虑传入参数的数量是否满足重载声明的最少参数要求。

例如,对于上述combine函数:

  • combine('a', 'b'):编译器首先看参数数量和类型,发现与function combine(a: string, b: string, separator?: string): string;匹配,此时separator使用默认值'-'
  • combine(1, 2, '_'):参数数量和类型与function combine(a: number, b: number, separator?: string): number;匹配,separator使用传入值'_'

3. 可能出现的类型错误及解决办法

类型错误

  • 参数数量不匹配:如果传入的参数数量既不符合任何一个重载声明的最少参数要求,也无法通过默认参数补充到合适数量,会报错。例如combine('a'),因为至少需要两个参数,会提示错误。
  • 参数类型不匹配:如果传入参数的类型与任何一个重载声明都不匹配,会报错。例如combine('a', 1),因为没有符合此类型组合的重载声明。

解决办法

  • 检查参数数量:确保传入的参数数量符合某个重载声明的要求,可以通过默认参数来补充缺失参数。
  • 检查参数类型:仔细确认传入参数的类型与重载声明中的类型一致。在函数实现中,使用类型守卫(如上述typeof检查)来确保函数逻辑处理的正确性。如果有复杂类型,可使用类型断言或类型别名来明确类型。