Introduction to TypeScript. Function Types

Basic syntax

Since everything in TypeScript has to have type, functions are also wrapped in the type system: inputs must have types, output must have one, let’s look at the example:

function add(x: number, y: number): number {
  return x + y;
}

console.log(add(1, 3)); //4

Enter fullscreen mode Exit fullscreen mode

Actually, we don’t have to explicitly assign type for an ouput:

function add(x: number, y: number) {
  return x + y;
}

console.log(add(1, 3)); //4

Enter fullscreen mode Exit fullscreen mode

The compiler won’t see any problem with it, since it implicitly set number type for an output. The following code is also valid:

function add(x: number, y: number) {
  if (x === 0) {
    return "zero!"
  }
  return x + y;
}

console.log(add(1, 3));

Enter fullscreen mode Exit fullscreen mode

Here, the compiler defines output type of the function as either number or "zero!".

Arrow function

Special return type

• void – function return type that is used to indicate that function returns nothing.

function action(): void {
  // your code here
}

Enter fullscreen mode Exit fullscreen mode

• never – function return type indicating that the function throws an exception or terminates execution of the program.

Optional parameter ?:

function makeProfile(name: string, age: number, url?: string) {

}

let profile = makeProfile("Mary", 81);

Enter fullscreen mode Exit fullscreen mode

A parameter url is optional, but if it exists, it must have string type.

Default parameter

Default parameter is an optional parameter that doesn’t need special character:

function makeProfile(
  name: string, 
  age: number, 
  url: string = "www.example.com"
) {
  return `${name} is ${age} years old and visits ${url}.`
}

let profile = makeProfile("Mary", 81);

console.log(profile); //Mary is 81 years old and visits www.example.com.

Enter fullscreen mode Exit fullscreen mode

Callback

As we know in JavaScript functions are treated as all values, they can be an argument in other functions. So, how would we define callback type?

function makeProfile(
  name: string, 
  age: number, 
  url: string = "www.example.com"
) {
  return `${name} is ${age} years old and visits ${url}.`;
}

function makePage(
  func: (n: string, a: number, u?: string) => string,
  param1: string,
  param2: number
) {
  func(param1, param2);
}

let profile = makePage(makeProfile, "Mary", 81);

Enter fullscreen mode Exit fullscreen mode

parameters names in callback don’t matter, but the same types do.

Multiple callbacks

What if we have several callbacks with the same parameters types? How is better to define them?

function mathOperation1(x: number, y: number): number {
  return x + y;
}

function mathOperation2(x: number, y: number): number {
  return x - y;
}

function applyMath(
  funcs: ((a: number, b: number) => number)[], 
  x: number, 
  y: number
){

}

applyMath(
  [mathOperation1, mathOperation2], 
  1, 
2
);

Enter fullscreen mode Exit fullscreen mode

((a: number, b: number) => number)[] type tells the compiler that it has to be an array of functions with two parameters of number types.

Rest parameter

function sum(...numbers: number[]) {
// code
}

sum(1,2,3);
sum();
sum(1,2,3,4,5,6);

Enter fullscreen mode Exit fullscreen mode

arguments of this function will be stored inside numbers array.