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?

Answer 1

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

Answer 2

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

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