92

Why doesn't Typescript warn me that the function I am defining does not match the interface declaration, but it does warn me if I try to invoke the function.

interface IFormatter {
    (data: string, toUpper : boolean): string;
};

//Compiler does not flag error here.
var upperCaseFormatter: IFormatter = function (data: string) {
    return data.toUpperCase();
}  

upperCaseFormatter("test"); //but does flag an error here.
Mel
  • 5,837
  • 10
  • 37
  • 42
MBeckius
  • 1,447
  • 2
  • 12
  • 14

1 Answers1

122

The interface ensures that all callers of functions that implement the interface supply the required arguments - data and toUpper.

Because TypeScript understands that JavaScript doesn't mind if you pass arguments that aren't used, it cleverly allows this in implementations.

Why is this okay? Because it means you can substitute any implementation of the interface without affecting calling code.

Example: You can substitute either IFormatter implementation and the code works.

interface IFormatter {
    (data: string, toUpper: boolean): string;
};

var upperCaseFormatter: IFormatter = function (data: string) {
    return data.toUpperCase();
}

var variableCaseFormatter: IFormatter = function (data: string, toUpper: boolean) {
    if (toUpper) {
        return data.toUpperCase();
    }

    return data.toLowerCase();
}

// Switch between these at will
//var formatter = upperCaseFormatter;
var formatter = variableCaseFormatter;

formatter("test", true);

If TypeScript didn't do this, your upperCaseFormatter would have to have to have a parameter called toUpper that wasn't used anywhere in the function - which makes the code less readable.

Noneme
  • 816
  • 6
  • 22
Fenton
  • 241,084
  • 71
  • 387
  • 401
  • 1
    But then using `upperCaseFormatter` has a redundant boolean value: `upperCaseFormatter("test", true); // excluding the 'true' will result in a compiler warning`. So instead the interface is wrong and should be: `interface IFormatter { (data: string, toUpper? : bool): string; }` But this then means that you can invoke `variableCaseFormatter` with just `variableCaseFormatter('test');` without specifying `toUpper` despite it being in the function signature. See my question here for a simpler example of my current confusion: http://stackoverflow.com/questions/23305020 – AJP Apr 26 '14 at 00:16
  • 10
    @AJP if you were writing clean code, you would never write a variable case formatter. You would write one class for upper and one for lower and avoid the nasty boolean argument altogether. – Fenton Apr 26 '14 at 11:55
  • @AJP In the case that you call `upperCaseFormatter` directly the interface is irrelevant. – Angry Dan Dec 20 '16 at 11:58
  • 1
    Is there a better syntax for providing such a function interface to an object method? eg. { myMethod() {return;} } –  Mar 31 '20 at 15:24
  • This is totally wrong behavior of an interface IMO, Just look at other OOP languages – Mwthreex Apr 13 '23 at 15:13