What is the difference between ':' and '=>' from functions in typescript?

Question

Suppose we define a function using explicit typing, such as

var func : (arg1: string, arg2: number) => boolean; 

as you can see, we should use '=>' here, but we cannot use this bold arrow in our function declaration.

 func = function name(arg1: string, arg2: number) : boolean {return true;} 

But in a lambda function, for example, we use '=>' this bold arrow, why?

 var lambdaFunc = (arg1: string, arg2: number) => true; 

and in functional typed interfaces, why we use this, for example, we use a colon :.

 interface SearchFunc { (source: string, subString: string): boolean; } 

What is this confusion?

Answer 1

There is no difference in what the two syntaxes are (the return value of the function), but usually the syntax is : intended for use in declarations and syntax => intended for use in expressions . (Read the Javascript function declarations and function operators for an overview of the difference between the two.)

The colon syntax goes back to at least the abandoned EcmaScript 4 specification, which introduced type annotations using this syntax. The arrow syntax comes from the expression

For example, for a function that accepts a callback, using : to represent the return type of the callback is not possible without wrapping the type with {} , but simply with => :

 // ambiguous parse, syntax error function sendString(callback: (value: string): void); // valid, using fat arrow function sendString(callback: (value: string) => void); // same thing, using curly brackets // (harder to write, harder to parse visually) function sendString(callback: { (value: string): void; }); 

In classes, you can use the thick arrow syntax for class properties that are functions, but not methods, as in this example:

 class Foo { // In TypeScript's eyes, this is actually a // property, not a method! someMethod: (value: string) => boolean; } 

In this case, TypeScript distinguishes between class properties and class methods. Functions defined as properties like this do not need a body, but cannot be overridden or defined as methods in subclasses. In other words, you could not do this, although the signatures are "compatible":

 class Bar extends Foo { // nope! someMethod(value: string): boolean { return true; } } 

In conclusion, because the type syntax works in TypeScript, you can always use the colon syntax for any type of function, but you cannot always use the arrow syntax. The most important thing is to write clear and readable code, so use the syntax that is most suitable for the situation. This usually means using => for callback parameters and : for everything else.

Answer 2

Suppose we define a function using explicit typing like this, var func: (arg1: string, arg2: number) => boolean; as you can see, we should use '=>'

This is a shorthand. In a long hand is used::

 var func : {(arg1: string, arg2: number): boolean;} 

But in a lambda function, for example, we use '=>' this bold arrow, why? var lambdaFunc = (arg1: string, arg2: number) => boolean;

Not true. You are still using : here. those.

 var lambdaFunc = (arg1: string, arg2: number):boolean => true; 

and in functional typed interfaces, why we use this, for example, we use a colon :.

Exactly, we use : just like the other examples that you present here.

In short

The contraction is confusing and odd. I do not like? Use your long arm 🌹