The following example showcases how a regular function is annotated in TypeScript:

function sayHello(name: string): string {
  return 'Hello, ' + name;
}

We can clearly see two main differences from the usual function syntax in regular JavaScript. First, we annotate with type information the parameters declared in the function signature. This makes sense since the compiler will want to check whether the data provided when executing the function holds the correct type. In addition to this, we also annotate the type of the returning value by adding the postfix string to the function declaration. In these cases, where the given function does not return any value, the type annotation void will give the compiler the information it requires to provide a proper type checking.

As we mentioned in the previous section, the TypeScript compiler is smart enough to infer types when no annotation is provided. In this case, the compiler will look into the arguments provided and the return statements to infer a returning type from it.

Functions in TypeScript can also be represented as expressions of anonymous functions, where we bind the function declaration to a variable:

var sayHello = function(name: string): string {
  return 'Hello, ' + name;
}

However, there is a downside to this syntax. Although typing function expressions this way is allowed, thanks to type inference, the compiler is missing the type definition in the declared variable. We might assume that the inferred type of a variable that points to a function typed as a string is obviously a string. Well, it's not. A variable that points to an anonymous function ought to be annotated with a function type. Basically, the function type informs about both the types expected in the function payload and the type returned by the function execution, if any. This whole block, in the form of (arguments: type) => returned type, becomes the type annotation our compiler expects:

var sayHello: (name: string) => string = function(name: string): string {
  return 'Hello, ' + name;
}

Why such a cumbersome syntax, you might ask? Sometimes, we will declare variables that might depend on factories or function bindings. Then, it is always a good practice to provide as much information to the compiler as we can. This simple example might help you to understand better:

// Two functions with the same typing but different logic.
function sayHello(input: string): string {
  return 'Hello, ' + input;
}

function sayHi(input: string): string{
  return 'Hi, ' + input;
}

// Here we declare the variable with is own function type
var greetMe: (name: string) => string;
greetMe = sayHello; 

This way, we also ensure that later function assignations conform to the type annotations set when declaring variables.