Typescript Functional Interface Overload
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 get an error
Type '(value: string) => { type: string; }' is not assignable to type 'MyInterface'.
How do I create an interface to support both method signatures?
Basically, an interface for a function that takes either 2 arguments or no arguments. How can i do this?
source to share
How about using type
instead 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"
};
}
source to share
I'm not really sure why TypeScript is okay with the interface declaration, because the two signatures have nothing in common. It might have something to do with the way TypeScript handles function signatures (see below).
In your case, I would suggest
- make it
value
optional or - create one function and use overloading like
interface Result {
type: string;
}
function myFn();
function myFn(val?: string):Result {
if (!val) { return { type: 'foo' }; }
return { type: val };
}
Sidenote: TypeScript is a little weird when it comes to signing a call. I guess it has something to do with the fact that he wants to be a superset of JavaScript. The following snippets illustrate 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
source to share
Focus on your mistake
Type '(value: string) => { type: string; }' is not assignable to type 'MyInterface'.
MyInterface
instances must be able to accept arguments 0
. So the following errors:
const myInterfaceFn: MyInterface = (value1: string, value2:string) => {
return {
type: value1 + value2
};
}
But if you mark as optional (for example using default parameters), the error goes away:
const myInterfaceFn: MyInterface = (value1 = '', value2 = '') => {
return {
type: value1 + value2
};
}
source to share
Yours myInterfaceFn
must satisfy both definitions of functions in MyInterface
.
The following code works great!
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"
};
}
source to share