How can I represent the return type in a Typescript interface file?

Question

What is the difference between the following code:

changeName(): ng.IPromise<any>; 

and

 changeName: () => ng.IPromise<any>; 

I understand that this is a return type, but I got confused in the first.

Here is the function body:

 changeName = (): ng.IPromise<any> => { var self = this; self.chnAction = "PREFERENCES.CHANGE_NAME.SUBMITTING_BUTTON_TEXT"; self.chnErrorMessage = null; return self.uss.changeName( self.chnNewFirstName, self.chnNewLastName) .then( (response: ng.IHttpPromiseCallbackArg<any>): any => { self.chnAction = "PREFERENCES.CHANGE_NAME.SUBMITTED_BUTTON_TEXT"; self.chnNewFirstName = ''; self.chnNewLastName = ''; self.chnErrorMessage = null; self.logout(); return this.$state.go('home.auth', { content: 'change_name_success' }); }, (error: ng.IHttpPromiseCallbackArg<any>): ng.IPromise<any> => { if (error.status === 500) { self.chnErrorMessage = 'AUTH_SERVICE.UNABLE_TO_CONTACT_SERVER'; } else { var errors: string[] = []; Object.keys(error.data.modelState).forEach((key) => { errors.push.apply(errors, error.data.modelState[key]); }); self.chnErrorMessage = errors[0]; self.chnErrorMessages = errors; self.chnAction = "PREFERENCES.CHANGE_NAME.SUBMIT_BUTTON_TEXT"; } return this.$q.reject(error); }); }; 

Answer 1

The main difference is as follows:

• changeName(): ng.IPromise<any>; represents a method .
• changeName: () => ng.IPromise<any>; represents a property that a function can contain (this corresponds to changeName = (): ng.IPromise<any> => { ... }; since this assigns a function to a property).

Because of this, differences between properties and methods apply. Here is one example:

 interface MyInterface { myMethod(): string; myProperty: () => string; } class MyBaseClass implements MyInterface { myMethod() { return "string"; } myProperty = () => "string"; } class MyChildClass extends MyBaseClass { myMethod() { return super.myMethod(); } myProperty = () => super.myProperty(); // error } 

The reason why using the property of an arrow function instead of a method is sometimes performed, is because the arrow functions assigned to the properties retain the value of this no matter what is associated with it ...

 class MyClass { myMethod() { console.log(this); } myProperty = () => console.log(this); } new MyClass().myMethod.call({}); // outputs {} new MyClass().myProperty.call({}); // outputs the instance of MyClass 

... since the value of this stored in the constructor ...

 var MyClass = (function () { function MyClass() { // captures this here var _this = this; // guaranteed to always use instance of class for `this` this.myProperty = function () { return console.log(_this); }; } MyClass.prototype.myMethod = function () { // not guarnateed to always use instance of class console.log(this); }; return MyClass; })(); 

Sidenote: You can read about .call in JS here .

Answer 2

It would be better to show the entire sample code. Hope the following example will explain your question:

 class MyClass { changeName(): number { return 5; } changeName2 = ():number => { return 5; } } 

translates to:

 var MyClass = (function () { function MyClass() { this.changeName2 = function () { return 5; }; } MyClass.prototype.changeName = function () { return 5; }; return MyClass; })(); 

[ Playground ]

There is a detailed explanation of the differences between the two definitions in: Declaring a javascript object object in a constructor function versus prototype

Answer 3

What is the difference between the following code

Since you have not added more code to see what was actually configured. As I can see, you have two lines of code:

 changeName(): ng.IPromise<any>; 

According to this code, you can understand that it returns a promise of type any, which can be any, object, string, array, number , etc.

So, we can say that changeName() will return a ng.IPromise value of type <any> .

---

While another line of code:

 changeName: () => ng.IPromise<any>; 

Says this function will return the ng.IPromise value of the <any> object.

Answer 4

There is no difference on the interface . This uses an interface that uses both entries (let me use string as a return type for clarity):

 interface MyInterface { foo(): string; // preferred bar: () => string; } 

Here foo is a function with a return type of string . And type bar also a function with return type string . The first notation is usually cleaner. The following object corresponds to the interface:

 let x: MyInterface = { foo: () => "", bar: () => "" } 

In a class, one notation adds a function to the prototype, and the other adds it as a property of a new instance ( this.myFunc = ... ). This has the same effect as in JavaScript (and you almost never need to add a function / method as an instance property).

 class MyClass { bar(): string { return ""; } // prototype, preferred foo = () => ""; // instance property } 

As we see below, the class corresponds to our original interface, although I changed the value of foo and bar . Therefore, the interface does not impose implementation details of how the method will be installed.

 let y: MyInterface = new MyClass(); 

Note that a class is not a special type - it effectively represents an interface and an implementation. Thus, you can use MyClass , like any other type (be it an interface or a class):

 let z: MyClass = { foo: () => "", bar: () => "" } 

As for types (this is what defines the interface), there is no difference, although when used in a class, different implementations produce notations.