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

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

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));

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 }

• 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);

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.

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);

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
);

((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);

arguments of this function will be stored inside numbers array.