TypeScript函数重载参数异常行为原因及解决方案咨询

• TypeScript 的函数重载仅为类型层面的校验能力，编译为 JavaScript 后所有重载签名都会被抹除，仅保留唯一的函数实现，运行时参数严格按位置传递给实现函数的形参，不会自动做重载签名的参数映射。
• 你定义的第一个重载（静态路径3参数调用）中，第三个参数是body，但实现函数的第三个形参是params、第四个才是body。当你传3个参数调用时，你传入的body会被赋值给实现函数的params形参，实现函数的body形参自然就是undefined。
• 而4参数调用时，参数位置和实现函数形参顺序完全匹配，所以能正常拿到body值。

在实现函数内部做参数归一化即可，无需改动上层调用逻辑，修改后的完整代码如下：

/**
 * static
 */
function backendFetch(
    method: string,
    path:string, 
    body?: { [key: string]: string | undefined }
):number

/**
 * parametrized
 */
function backendFetch(
    method: string,
    path:string, 
    params: { [key: string]: string | undefined },
    body?: { [key: string]: string | undefined }
):number


function backendFetch(
    method: string,
    path:string, 
    paramsOrBody?: { [key: string]: string | undefined },
    body?: { [key: string]: string | undefined }
):number{
    let params: typeof paramsOrBody
    let actualBody: typeof body
    // 按传入参数数量做归一化处理
    if (arguments.length === 3) {
        // 3参数场景：第三个入参是body
        params = undefined
        actualBody = paramsOrBody
    } else {
        // 4参数场景：第三个入参是params，第四个是body
        params = paramsOrBody
        actualBody = body
    }
    // 后续逻辑直接使用归一化后的 params 和 actualBody 即可
    console.log('body:', actualBody);
    return 0;
}

const body = {'foo':'test'}
// static call
backendFetch('get','/create',body);
// parametrized
backendFetch('get','/{spaceId}',{'spaceId':'test'},body);

修改后两次调用都能正常输出body参数的值。

内容的提问来源于stack exchange，提问作者Tawfik Boujeh