TypeScript：此表达式不可调用。联合类型的每个成员都有签名，但这些签名彼此不兼容

在本文中，我们将介绍TypeScript中遇到的一种常见类型错误：此表达式不可调用。当我们在联合类型中使用函数时，可能会遇到这个问题。我们将讨论此错误的原因，并提供解决方案和示例代码。

阅读更多：TypeScript 教程

联合类型和函数调用

在TypeScript中，我们经常使用联合类型来表示一个值可以是多种类型之一。例如，一个变量可以是数字或字符串类型。在这种情况下，我们可以将变量的类型声明为number | string。

然而，当我们在联合类型中使用函数时，可能会遇到一些问题。尤其是当我们尝试调用这个函数时，可能会收到一个错误消息，提示此表达式不可调用。

function add(a: number | string, b: number | string): number | string {
    return a + b;
}

let result = add(1, 2);

在上面的示例中，我们定义了一个接受两个参数并返回一个数字或字符串的函数add。然后我们尝试调用这个函数，并传递两个数字类型的参数1和2。

然而，当我们编译上述代码时，我们会得到一个错误消息：”此表达式不可调用。有2个重载具有这个调用目标。”，并且无法成功编译。

造成错误的原因

此错误的原因在于，联合类型的每个成员都可以有自己的函数签名。在上面的示例中，我们传递给add函数的参数是数字类型，而函数本身的签名却是接受一个数字或字符串类型的参数。这导致了类型的不匹配，从而导致了此错误的发生。

解决方案

要解决此问题，我们可以使用类型保护来确保函数的参数类型与我们期望的类型相匹配。TypeScript提供了几种类型保护的机制，包括类型断言、类型守卫和类型推论。

类型断言

使用类型断言，我们可以显式地告诉编译器函数的参数所期望的类型。在我们的示例中，我们可以使用类型断言将传递给函数add的参数类型断言为数字类型。

function add(a: number | string, b: number | string): number | string {
    return (a as number) + (b as number);
}

let result = add(1, 2);

通过在参数前加上(a as number)和(b as number)，我们告诉编译器我们期望这两个参数是数字类型，并且可以成功编译。

类型守卫

另一种解决此问题的方法是使用类型守卫。类型守卫使我们能够根据一些条件来缩小联合类型的范围，并在特定条件下执行相应的操作。

在我们的示例中，我们可以使用类型守卫来检查参数的类型，并根据类型的不同执行相应的操作。

function add(a: number | string, b: number | string): number | string {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    }
    return a.toString() + b.toString();
}

let result = add(1, 2);

在上面的代码中，我们使用typeof运算符检查参数a和b的类型是否为数字。如果是数字类型，我们将执行数字相加的操作。否则，我们将转换参数为字符串，并执行字符串拼接的操作。

通过使用类型守卫，我们可以在联合类型中使用函数，并根据参数的类型来执行相应的操作。

总结

在本文中，我们介绍了TypeScript中的一个常见类型错误：此表达式不可调用。我们讨论了造成此错误的原因，即联合类型的成员具有不兼容的函数签名。我们提供了两种解决此问题的方法：类型断言和类型守卫。通过使用这些方法，我们可以在联合类型中使用函数，并确保函数的参数类型与我们期望的类型相匹配。