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

Question

Lets say we define a function using explicit typing like this,

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

as you can see we should be use ' => ' here, but we can not use this fat arrow in our function decleration.

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

But in lambda function e.g we use ' => ' this fat arrow why?

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

and in function typed interfaces why we use this e.g, we use ':' colon.

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

What this whole confusion is about?

Answer 1

There is no difference in what the two syntaxes represent (the return value of a function), but generally speaking, the : syntax is for use in function declarations and the => syntax is for use in function expressions. (Read Javascript function declarations vs function operators for an overview of the difference between these two things.)

The colon syntax dates back at least to the abandoned EcmaScript 4 specification which introduced type annotations using this syntax. The arrow syntax comes from the arrow function expression in EcmaScript 6 that uses the fat arrow symbol as the function “keyword”. The arrow syntax provides a shorthand for places where there would be ambiguity if colon were used, and is typically easier to parse visually in these cases.

For example, given a function that accepts a callback, using : to represent the return type of the callback is impossible without wrapping the type with {}, but is simple 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, it is possible to use the fat arrow syntax for properties of a class that are functions, but not for 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 makes a distinction between properties of a class and methods of a class. Functions defined as properties like this don’t need a body, but cannot be overridden or defined as methods in subclasses. In other words, you couldn’t do this, even though the signatures are “compatible”:

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

In conclusion, due to the way the type syntax works in TypeScript, it is always possible to use the colon syntax for any function type, but it is not always possible to use the arrow syntax. The most important thing is to write code that is clear and readable, so use the syntax that is most appropriate for the situation. Normally this means using => for callback parameters, and : for everything else.