Typescript Function Interface overloading

Question

I have the following code.

interface MySecondInterface<A>{
    type: A;
}

interface MyInterface {
    (val1:string, val2:string): MySecondInterface<string>;
    (): MySecondInterface<string>;
}

const myInterfaceFn: MyInterface = (value1: string, value2:string) => {
    return {
        type: value1 + value2
    };
}



const myInterfaceFn2: MyInterface = () => {
    return {
        type: "Text"
    };
}

You can find the code here. I am getting error

Type '(value: string) => { type: string; }' is not assignable to type 'MyInterface'.

How will I create the interface to support both method signatures?

Basically, an interface for a function that takes either 2 arguments or no arguments. How can I do that?

If you are trying to create a function that will accept both no parameters and a string parameter, you can define a single function with an optional val parameter. — Saravana, May 15 '17 at 09:00
I am trying to create a single interface which can be passed as a method argument, such a way that the argument can be invoked with three parameters or no parameter at all, in the example I used only one. I am updating example. — Neo, May 19 '17 at 01:39

score 6 · Answer 1 · answered May 25 '17 at 14:12

6

What about using type instead of interface?

interface MySecondInterface<A>{
  type: A;
}

type MyInterface = ((val1: string, val2: string) => MySecondInterface<string>) | (() => MySecondInterface<string>);

const myInterfaceFn: MyInterface = (value1: string, value2:string) => {
  return {
    type: value1 + value2
  };
}

const myInterfaceFn2: MyInterface = () => {
  return {
    type: "Text"
  };
}

answered May 25 '17 at 14:12

kimamula

11,427
8
35
29

I've changed type MyInterface to be: type MyInterface = ((val1: string, val2: string) => MySecondInterface) | (() => MySecondInterface); // second part is now (() => MySecondInterface) ( not ) - all the other lines remain unchanged - but TypeScript does not complain (I would expect it to complain though). I'm wondering why ? Thanks ! – Catalin Enache Oct 02 '20 at 06:39
it seems that: type MyInterface = ((val1: string, val2: string) => MySecondInterface); is enough. The second part seems to be redundant for TypeScript. – Catalin Enache Oct 02 '20 at 06:54

score 4 · Answer 2 · answered May 29 '17 at 18:29

Your myInterfaceFn has to satisfy both function definitions in MyInterface.

The following code works fine!

interface MySecondInterface<A>{
    type: A;
}

interface MyInterface {
    (val1:string, val2:string): MySecondInterface<string>;
    (): MySecondInterface<string>;
}

const myInterfaceFn: MyInterface = (value1: string = undefined, value2:string = undefined) => {
    return {
        type: value1 !== undefined && value2 !== undefined
            ? value1 + value2
            : "Text"
    };
}



const myInterfaceFn3: MyInterface = () => {
    return {
        type: "Text"
    };
}

score 3 · Answer 3 · answered May 23 '17 at 04:35

3

Focus in on your error

Type '(value: string) => { type: string; }' is not assignable to type 'MyInterface'.

MyInterface instances must be allowed to take 0 arguments. So the following errors:

const myInterfaceFn: MyInterface = (value1: string, value2:string) => {
    return {
        type: value1 + value2
    };
}

But if you mark both as optional (e.g. using default parameters) the error goes away:

const myInterfaceFn: MyInterface = (value1 = '', value2 = '') => {
    return {
        type: value1 + value2
    };
}

answered May 23 '17 at 04:35

basarat

261,912
58
460
511

Ah ... So to clarify, if you define an interface of function types (i.e., more than one), then any function assigned to a variable typed to that interface must satisfy >all< types? I can fix OP's error by changing the type to `(val1?:string, val2?:string): MySecondInterface;` so I think that's correct. – Tom Jul 04 '22 at 09:41

score 1 · Answer 4 · answered May 15 '17 at 09:04

I am not quite sure why TypeScript is ok with your interface declaration, because the two signatures have nothing in common. Maybe this is due to the fact how TypeScript handles function signatures (see sidenote below).

In your case, I would suggest

make the value optional or
create one function and use overloading, e.g.

interface Result {
    type: string;
}

function myFn();
function myFn(val?: string):Result {
    if (!val) { return { type: 'foo' }; }
    return { type: val };
}

Sidenote: TypeScript is a little bit weird when it comes to call signatures. I guess this is due to the fact that it wants to be a superset of JavaScript. The following snippets illustrates this:

interface Fn {
    (a: string): string;
}

const f1: Fn = () => 'hi';
const f2: Fn = (a: string) => a;

f1();       // Supplied parameters do not match any signature of call target.
f1('a');    // OK, even though `f1` has no explicit argument...
f2('asd');  // OK

Typescript Function Interface overloading

4 Answers4

Linked