TypeScript泛型函数类型报错：如何解决可调用类型冲突？

原始代码 #

type InputValue<Output> = Output | Promise<Output> | (() => Output | Promise<Output>);

async function test<Output>(data: InputValue<Output>): Promise<Output> {
    return typeof data === 'function' ? data() : data
}

报错信息 #

This expression is not callable.
Not all constituents of type '(() => Output | Promise

) | (Output & Function)' are callable.
Type 'Output & Function' has no call signatures.

问题原因 #

当Output允许为任意类型时，如果Output本身是函数类型，InputValue<Output>会出现类型重叠：Output（函数类型）和定义的无参函数类型(() => Output | Promise<Output>)会被TypeScript合并为Output & Function交叉类型，但这个类型没有明确的调用签名，导致TypeScript无法确定它是否可调用。

解决方案 #

方案1：精确类型守卫判断函数参数长度

如果确定输入的可调用函数是无参的，可以通过检查函数的length属性做更精准的类型区分：

type InputValue<Output> = Output | Promise<Output> | (() => Output | Promise<Output>);

async function test<Output>(data: InputValue<Output>): Promise<Output> {
    if (typeof data === 'function' && data.length === 0) {
        return data();
    }
    return data;
}

方案2：用Exclude排除Output中的函数类型

从根源避免类型重叠，通过Exclude工具类型排除Output中属于函数的部分：

type InputValue<Output> = 
    Exclude<Output, Function> | 
    Promise<Output> | 
    (() => Output | Promise<Output>);

async function test<Output>(data: InputValue<Output>): Promise<Output> {
    return typeof data === 'function' ? data() : data;
}

注意：此方案会限制Output不能是函数类型，如果业务需要Output包含函数，不建议使用。

方案3：类型断言绕过检查

如果能确保运行时逻辑的正确性，可以用类型断言强制告诉TypeScript当前函数是可调用的：

type InputValue<Output> = Output | Promise<Output> | (() => Output | Promise<Output>);

async function test<Output>(data: InputValue<Output>): Promise<Output> {
    return typeof data === 'function' ? (data as () => Output | Promise<Output>)() : data;
}

注意：此方法牺牲了部分类型安全性，需自行保证代码逻辑正确。

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