Typescript Function Interface

Question

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.

Noneme · Accepted Answer · 2019-11-08 12:21:45Z

126

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.

edited Nov 8, 2019 at 12:21

Noneme

8327 silver badges23 bronze badges

answered Feb 11, 2013 at 16:41

Fenton

253k74 gold badges404 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AJP Over a year ago

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: stackoverflow.com/questions/23305020

Fenton Over a year ago

@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.

Angry Dan Over a year ago

@AJP In the case that you call upperCaseFormatter directly the interface is irrelevant.

user10706046 Over a year ago

Is there a better syntax for providing such a function interface to an object method? eg. { <IFormatter>myMethod() {return;} }

Mwthreex Over a year ago

This is totally wrong behavior of an interface IMO, Just look at other OOP languages

Collectives™ on Stack Overflow

Typescript Function Interface

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related