如何在TypeScript中结合联合类型正确使用重载函数？

问题场景 #

我在集成重载函数时遇到了TypeScript类型识别问题，简化后的核心场景：

• 函数g返回number | string联合类型；
• 函数f为重载函数，入参为number时返回bigint，入参为string时返回boolean；
• 在main函数中，先调用g获取联合类型的p，希望在switch类型检查前调用f(p)得到对应返回值，但TypeScript无法正确识别该返回类型，仅在switch分支内调用f(p)才能正常收窄类型。

示例代码：

function g(): number | string {
    return 0;
}

function f(p: number): bigint;
function f(p: string): boolean;
function f(p: number | string): bigint | boolean {
    return (typeof p === 'number') ? BigInt(0) : false;
}

function main(): void {
    const p: number | string = g();

    const notWorking = f(p);
    let working;
    switch (typeof p) {
        case 'number':
            working = f(p);
            const workingNumber: bigint = f(p);

            console.log(working.toLocaleString());
            console.log(workingNumber.toLocaleString());
            console.log(notWorking.toLocaleString()); // TypeScript无法识别具体类型
            break;

        case 'string':
            working = f(p);
            const workingString: boolean = f(p);

            console.log(working.valueOf());
            console.log(workingString.valueOf());
            console.log(notWorking.valueOf()); // 同样无法识别类型
            break;
    }
}

解决方案 #

方法1：用泛型+条件类型关联输入输出类型 #

修改f的定义，通过条件类型明确输入参数与返回值的映射关系，让TypeScript能自动追踪类型关联：

type FReturn<T> = T extends number ? bigint : T extends string ? boolean : never;

function f<T extends number | string>(p: T): FReturn<T> {
    return (typeof p === 'number' ? BigInt(0) : false) as FReturn<T>;
}

function main(): void {
    const p = g();
    const result = f(p); // 此时result的类型为bigint | boolean

    switch (typeof p) {
        case 'number':
            // 自动收窄为bigint
            console.log(result.toLocaleString());
            break;
        case 'string':
            // 自动收窄为boolean
            console.log(result.valueOf());
            break;
    }
}

这种方式让TypeScript理解f的输入和输出是严格关联的，当p的类型被收窄时，result的类型会同步更新。

方法2：绑定参数与结果为关联对象 #

如果不想修改f的原始定义，可以将p和f(p)的结果封装到同一个对象中，利用TypeScript的控制流分析同时收窄两者的类型：

function main(): void {
    const p = g();
    const wrapped = { p, fResult: f(p) } as const;

    switch (typeof wrapped.p) {
        case 'number':
            // wrapped.fResult自动收窄为bigint
            console.log(wrapped.fResult.toLocaleString());
            break;
        case 'string':
            // wrapped.fResult自动收窄为boolean
            console.log(wrapped.fResult.valueOf());
            break;
    }
}

通过as const让TypeScript保留对象的字面量类型关联，在类型检查时自动推导结果类型。

方法3：手动类型断言（不推荐） #

如果以上两种方式都不适用，可以在类型收窄后对结果进行手动断言：

function main(): void {
    const p = g();
    const notWorking = f(p);

    switch (typeof p) {
        case 'number':
            const numResult = notWorking as bigint;
            console.log(numResult.toLocaleString());
            break;
        case 'string':
            const strResult = notWorking as boolean;
            console.log(strResult.valueOf());
            break;
    }
}

这种方式需要手动介入类型断言，容易引入类型错误，仅作为临时解决方案。

内容的提问来源于stack exchange，提问作者Vito De Tullio