对打字稿重载感到困惑

Question

全部：

我对 TypeScript 很陌生，当我阅读有关函数重载的教程时，它给出了一个示例：

function add(arg1: string, arg2: string): string;
function add(arg1: number, arg2: number): number;
function add(arg1: boolean, arg2: boolean): boolean;
function add(arg1: any, arg2: any): any {
    return arg1 + arg2;
}
console.log("add(1,1)=" + add(1, 1));
console.log("add(''1'',''1'')=" + add("1", "1"));
console.log("add(true,false)=" + add(true, false));

我的困惑是：

重载的一个目的是使用不同的函数体，但是这个例子似乎所有的重载函数都必须共享同一个函数体，我想知道如何像在Java中那样使用不同的函数体？

谢谢

Answer 1

在 Java 中，当您调用具有多个重载的函数时，编译器会确定您要调用的主体并调用该特定函数。一个更好的想法是有多个函数同名，编译器会自动为你消除歧义。

在 TypeScript（和 JavaScript）中，只有函数。类型在编译时被删除，在运行时不存在。这意味着唯一可能的重载是您可以在运行时自己确定对象类型的重载。这可能基于参数的数量，使用typeof 或instanceof，或其他一些数据。编译器不知道您打算如何区分不同的签名。

预期的模式是让函数体执行这个选择过程——你会得到这样的东西：

function numberStringSwitch(x: string): number;
function numberStringSwitch(x: number): string;
function numberStringSwitch(x: any): any {
  if (typeof x === 'string') {
    return +x;
  } else if(typeof x === 'number') {
    return x.toString();
  } else {
    // null/undefined
    return x;
  }
}

Answer 2

我想对 Ryan 的回答发表评论，但数量相当多，所以我会尝试列出原因。确实只能得到一个函数体，但还是有方法的。

1. 在调用函数时，如果您只有一个带有 param:any 的函数，那么如果您尝试使用在该方法中实际上不起作用的类型来调用它，它将不会捕获错误。
2. 您可以声明具有不同返回类型的多个重载。 TypeScript 会识别这些并适当地分配类型，即使 JavaScript 只是在做同样的事情。
3. Java 不能真正做到的一件事是使用特定字符串参数重载函数。当 TypeScript 输入像 document.createElement 这样的函数时，这变得很有用，它根据第一个参数返回大约 50 种不同的类型。 ('div', 'span', 'video')

2的例子：

var num = 3;
var num2 = 2;
callMethodThatTakesStringParam(add(num, num2)); <-- argument error - can't
// assign a num to a string; it remembers the types, even though add has an overload
// that takes a string

3示例：

var x = document.createElement('video');
var y = document.createElement('div');
x.play();
y.play(); <-- type error, no such method