434

Section 6.3 of the TypeScript language spec talks about function overloading and gives concrete examples on how to implement this. However if I try something like this:

export class LayerFactory { 
    constructor (public styleFactory: Symbology.StyleFactory) {
        // Init...
    }
    createFeatureLayer (userContext: Model.UserContext, mapWrapperObj: MapWrapperBase): any {           
        throw new Error('not implemented');
    }
    createFeatureLayer(layerName: string, style: any): any {
        throw new Error('not implemented');
    }
}

I get a compiler error indicating duplicate identifier even though function parameters are of different types. Even if I add an additional parameter to the second createFeatureLayer function, I still get a compiler error. Ideas, please.

2
  • 2
    Possible duplicate of Method overloading?
    – BuZZ-dEE
    May 2, 2018 at 22:15
  • 4
    Short answer: method overloading to dispatch to different implementations is not possible in TS, regardless of number of params or their type(s) (Duplicate function implementation.). It is possible to create overloaded signatures for a single implementation, but they will all invoke the same implementation which should handle dispatching to various logic based on what it can infer from the parameters it receives. Aug 22, 2022 at 5:06

6 Answers 6

390

When you overload in TypeScript, you only have one implementation with multiple signatures.

class Foo {
    myMethod(a: string);
    myMethod(a: number);
    myMethod(a: number, b: string);
    myMethod(a: string | number, b?: string) {
        alert(a.toString());
    }
}

Only the three overloads are recognized by TypeScript as possible signatures for a method call, not the actual implementation. The implementation signature must be compatible with all the overloads.

In your case, I would personally use two methods with different names as there isn't enough commonality in the parameters, which makes it likely the method body will need to have lots of "ifs" to decide what to do.

6
  • 1
    Great answer. I'd just like to highlight that, this might not be helpful when one is trying to overload for reasons such as: I would like to have an instance, where using the same constructor, I can pass an object defining all expected properties and in the one instance, pass individual params: class Foo { constructor(obj) { } constructor (a: number, b: string, c: boolean) {} } Jan 5, 2018 at 11:51
  • 2
    In general, I'd rather use a factory method to create me an object each way - there's no need to branch if you call Foo.fromObject(obj) and Foo.fromJson(str) and so on.
    – Fenton
    Jan 5, 2018 at 15:08
  • But that postulates that one will always pass their parameters as either an object or a single string, what if I want to have them passed separately, as highlighted from my previous comment? Foo.methos(1, 2, 3) Foo.method(1) Foo.method(Obj) I also noticed you have different methods in the Foo Class, fromObject and fromJson? Jan 6, 2018 at 12:13
  • 1
    If you follow that difference back to the source, you'll usually find there is no need for it. For example, you have to type myNum or myObj anyway, so why not have separate methods and make everything clear / avoid unnecessary branching logic.
    – Fenton
    Jan 7, 2018 at 15:29
  • 3
    Note that using a union type can be problematic if you want to have different return types based on the parameters. That can be solved with generics if the return type always matches one of the parameter types, but for other cases overloads are the best solution. Aug 7, 2018 at 17:37
275

This may be because, when both functions are compiled to JavaScript, their signature is totally identical. As JavaScript doesn't have types, the only option is to create a single functions with a dynamic number of arguments. So TypeScript will let you declare multiple function signatures, but it will not let you implement multiple versions of the same function.

TypeScript supports overloading based on number of parameters, but the steps to be followed are a bit different if we compare to OO languages. In answer to another SO question, someone explained it with a nice example: How to do method overloading in TypeScript?.

Basically, what we are doing is, we are creating just one function and a number of declarations so that TypeScript doesn't give compile errors. When this code is compiled to JavaScript, the concrete function alone will be visible. As a JavaScript function can be called by passing multiple arguments, it just works.

10
  • 94
    The language could be amended to support this. In theory, one could generate function implementations that are named apart and called by compiled TypeScript (e.g. createFeatureLayer_1 and createFeatureLayer_2) and createFeatureLayer could then determine which one to call based upon the contents of arguments for interoperation with vanilla JavaScript. May 19, 2014 at 18:27
  • 12
    You word it as if overloading in TypeScript is only possible based on the number of parameters, while overloading based on type is also possible as shown in Steve Fenton's answer. Sep 18, 2014 at 10:40
  • 24
    This is kind of lame; TypeScript should really be generating the "meta function" that chooses the uniquely named implementation appropriately based on what it was passed. How it is now there is a rift where you could pass the compiler but your implementation of the type sniffing could be incorrect. Feb 26, 2016 at 0:37
  • 8
    @EzekielVictor TypeScript would do it if there was a reliable way of checking types at run time.
    – thorn0
    Mar 14, 2016 at 23:04
  • 5
    That's even more complicated, it's doable with JavaScript's types, but TS-specific notions like interfaces, types, enums, generics, etc, are lost at runtime. That's also why you can't do someObject instanceof ISomeInterfaceDefinedInTypeScript. Feb 17, 2017 at 13:06
70

You can declare an overloaded function by declaring the function as having a type which has multiple invocation signatures:

interface IFoo
{
    bar: {
        (s: string): number;
        (n: number): string;
    }
}

Then the following:

var foo1: IFoo = ...;

var n: number = foo1.bar('baz');     // OK
var s: string = foo1.bar(123);       // OK
var a: number[] = foo1.bar([1,2,3]); // ERROR

The actual definition of the function must be singular and perform the appropriate dispatching internally on its arguments.

For example, using a class (which could implement IFoo, but doesn't have to):

class Foo
{
    public bar(s: string): number;
    public bar(n: number): string;
    public bar(arg: any): any 
    {
        if (typeof(arg) === 'number')
            return arg.toString();
        if (typeof(arg) === 'string')
            return arg.length;
    }
}

What's interesting here is that the any form is hidden by the more specifically typed overrides.

var foo2: new Foo();

var n: number = foo2.bar('baz');     // OK
var s: string = foo2.bar(123);       // OK
var a: number[] = foo2.bar([1,2,3]); // ERROR
27

Function overloading in typescript:

According to Wikipedia, (and many programming books) the definition of method/function overloading is the following:

In some programming languages, function overloading or method overloading is the ability to create multiple functions of the same name with different implementations. Calls to an overloaded function will run a specific implementation of that function appropriate to the context of the call, allowing one function call to perform different tasks depending on context.

In typescript we cannot have different implementations of the same function that are called according to the number and type of arguments. This is because when TS is compiled to JS, the functions in JS have the following characteristics:

  • JavaScript function definitions do not specify data types for their parameters
  • JavaScript functions do not check the number of arguments when called

Therefore, in a strict sense, one could argue that TS function overloading doesn't exists. However, there are things you can do within your TS code that can perfectly mimick function overloading.

Here is an example:

function add(a: number, b: number, c: number): number;
function add(a: number, b: number): any;
function add(a: string, b: string): any;

function add(a: any, b: any, c?: any): any {
  if (c) {
    return a + c;
  }
  if (typeof a === 'string') {
    return `a is ${a}, b is ${b}`;
  } else {
    return a + b;
  }
}

The TS docs call this method overloading, and what we basically did is supplying multiple method signatures (descriptions of possible parameters and types) to the TS compiler. Now TS can figure out if we called our function correctly during compile time and give us an error if we called the function incorrectly.

27

What is function overloading in general?

Function overloading or method overloading is the ability to create multiple functions of the same name with different implementations (Wikipedia)


What is function overloading in JS?

This feature is not possible in JS - the last defined function is taken in case of multiple declarations:

function foo(a1, a2) { return `${a1}, ${a2}` }
function foo(a1) { return `${a1}` } // replaces above `foo` declaration
foo(42, "foo") // "42"

... and in TS?

Overloads are a compile-time construct with no impact on the JS runtime:

function foo(s: string): string // overload #1 of foo
function foo(s: string, n: number): number // overload #2 of foo
function foo(s: string, n?: number): string | number {/* ... */} // foo implementation

A duplicate implementation error is triggered, if you use above code (safer than JS). TS chooses the first fitting overload in top-down order, so overloads are sorted from most specific to most broad.


Method overloading in TS: a more complex example

Overloaded class method types can be used in a similar way to function overloading:

class LayerFactory {
    createFeatureLayer(a1: string, a2: number): string
    createFeatureLayer(a1: number, a2: boolean, a3: string): number
    createFeatureLayer(a1: string | number, a2: number | boolean, a3?: string)
        : number | string { /*... your implementation*/ }
}

const fact = new LayerFactory()
fact.createFeatureLayer("foo", 42) // string
fact.createFeatureLayer(3, true, "bar") // number

The vastly different overloads are possible, as the function implementation is compatible to all overload signatures - enforced by the compiler.

More infos:

0
0

A quick note adding to the great answers above: even if you do everything perfectly, if using eslint, you might be getting an error "no-dupe-class-members", since it is a recommended default on. eslint does not know about method overloading, but if there is an actual error, TypeScript tsc will catch it.

for more on the issue, see: https://github.com/typescript-eslint/typescript-eslint/issues/291

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.