Confuse about Typescript overload

问题

All:

I am pretty new to TypeScript, when I read the tutorial about function overloading, it gives an example like:

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));

My confuse is:

one purpose of overloading is using different function body, but this example seems that all overloading function have to share a same function body, I wonder how to use different function body like in Java?

Thanks

回答1:

In Java, when you invoke a function with multiple overloads, the compiler figures out which body you meant to call and invokes that specific function. A better way to think of it is that there are multiple functions with the same name and the compiler is automatically disambiguating for you.

In TypeScript (and in JavaScript), there is only function.Types are erased at compilation and don't exist at runtime. This means the only kind of overloading that is possible is the kind where you can figure out the types of the objects, yourself, at runtime. This might be based on the number of arguments, using typeof or instanceof, or some other data. The compiler doesn't know how you intend to distinguish the different signatures.

The intended pattern is for the function body to perform this selection process -- you'll have something like this:

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;
  }
}

回答2:

I wanted to comment on Ryan's answer, but there's a fair amount to it, so I'll try to list the reasons. It's true that you can only get one function body, but there's still method to it.

When calling the function, if you have only one function with param:any then it won't catch errors if you try to call it with a type that does not actually work inside the method.
You can declare multiple overloads with different return types. TypeScript will recognize these and assign the type appropriately, even though JavaScript is just doing the same thing either way.
One thing Java can't really do is overload a function with a specific string parameter. This became useful when TypeScript was typing-out functions like document.createElement, which returns about 50 different types depending on what the first argument to it is. ('div', 'span', 'video')

example of 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

example of 3:

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

来源：https://stackoverflow.com/questions/34361346/confuse-about-typescript-overload

标签

typescript

overloading