Typescript ES6箭头语法

Question

What is difference between canDeactivate1 & canDeactivate2 in below typescript interface ? How these functions will be considered ?

export interface CanComponentDeactivate
{
    canDeactivate1 : ()=> Observable<boolean> | Promise<boolean> | boolean;
    canDeactivate2 (): Observable<boolean> | Promise<boolean> | boolean;
}

How can i write same function in JavaScript ?

Answer 1

The second is basically a shortcut (well, not much) for the first.

The expression ()=> Observable<boolean> | Promise<boolean> | boolean ()=> Observable<boolean> | Promise<boolean> | boolean ()=> Observable<boolean> | Promise<boolean> | boolean is a type declaration for a function that expects no arguments and returns an observable, a promise or a boolean. You can use such declarations anywhere a type is expected:

let foo: ()=> Observable<boolean> | Promise<boolean> | boolean;
foo = 1; //doesn't work, foo has to be a function
foo = () => 1; //doesn't work, we are not allowed to return a number
foo = () => true; // works
foo = function() { return true }; //works

Because functions on objects are usually used as methods, interfaces have a special syntax that resembles method declarations in classes. canDeactivate2 (): Observable<boolean> | Promise<boolean> | boolean canDeactivate2 (): Observable<boolean> | Promise<boolean> | boolean looks like a method without a body, which is more in line with what other languages have.