TypeScript带可空参数的add函数条件类型返回值报错原因咨询

问题背景 #

需要实现一个add函数，规则如下：

• 两个参数均为null时返回null
• 一个参数为null时返回另一个参数
• 两个参数均为数字时返回它们的和

当前实现代码及报错情况如下：

function add<A extends number | null, B extends number | null>(a: A, b: B): 
  A extends null
    ? B extends null
      ? null
      : B
    : B extends null
      ? A 
      : number {
    if (a == null) {
        if (b == null) { 
            return null // Type 'null' is not assignable to type 'A extends null ? B extends null ? null : B : B extends null ? A : number'.
        } else {
            return b
        }
    } else {
        if (b == null) { 
            return a
        } else {
            return a + b
        }
    }
}

const a = add(1 , 333) // number
const b = add(1 , null) // 1
const c = add(null , 2) // 2
const d = add(null , null) // null

函数逻辑与返回类型声明逻辑完全一致，但编译器在return null处抛出类型不匹配的报错。

报错原因 #

TypeScript的泛型条件类型在函数内部无法被自动窄化到具体分支。虽然代码里通过if判断明确了当前分支应该返回null，但编译器没办法将泛型参数A和B的类型约束同步映射到条件类型的对应分支上——它仍会要求返回值匹配整个条件类型的完整结构，而非当前分支对应的具体类型。

本质上，编译器无法在运行时逻辑分支中反向推导泛型条件类型的具体结果，导致类型校验失败。

修复方案 #

方案1：使用类型断言 #

在每个返回语句处，通过类型断言明确返回值的类型：

function add<A extends number | null, B extends number | null>(a: A, b: B): 
  A extends null
    ? B extends null
      ? null
      : B
    : B extends null
      ? A 
      : number {
    if (a == null) {
        if (b == null) { 
            return null as const;
        } else {
            return b as B;
        }
    } else {
        if (b == null) { 
            return a as A;
        } else {
            return (a + b) as number;
        }
    }
}

方案2：使用函数重载 #

通过函数重载明确每个参数组合对应的返回类型，让编译器能精准匹配分支类型：

function add(a: null, b: null): null;
function add(a: number, b: null): number;
function add(a: null, b: number): number;
function add(a: number, b: number): number;
function add(a: number | null, b: number | null): number | null {
    if (a == null && b == null) return null;
    if (a == null) return b!;
    if (b == null) return a;
    return a + b;
}

这种方式更贴合TypeScript的类型系统设计，可读性和类型安全性更佳。

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