Basics

JavaScript function:

function add(a, b) {
  return a + b;
}

TypeScript annotations:

function add(a: number, b: number): number {
  return a + b;
}

Void

function log(message: string): void {
  console.log('LOG:', message);
}

Rest Parameters

function sum(...values: number[]) {
  return values.reduce((previous, current) => {
    return previous + current;
  }, 0);
}

sum(1, 2); // 3
sum(1, 2, 3); // 6

Type Aliases for Functions

type Add = (a: number, b: number) => number;

let add: Add;

add = (a, b) => a + b;

Transcript

00:00

Let's create a simple JavaScript function that is designed to add to numbers. Now, just like we can annotate variables, we can also annotate the parameters of a function. TypeScript also allows us to annotate the return type of a function using the same familiar syntax. Now, you can have a function in JavaScript that is not designed to return any value. Now, if a function does not return any value, you can annotate its return type using the special TypeScript built-in type called word. Now, JavaScript also allows you to create a function that can take an indefinite number of arguments.

00:35

The way to indicate this in JavaScript is using three dots before the parameter and such a parameter is called a rest parameter. Here we have a function sum that you can invoke with as many numbers as you want internally. All these arguments get collected into a JavaScript array for the rest parameter. TypeScript understands this and will enforce that you annotate the risk parameter as an array. For our sum function, we expect only numbers, so we have annotated it as an array of numbers. Now, JavaScript also supports first class functions.

01:12

What this means is that we can store functions in a JavaScript variable. Now, TypeScript understands this and provides a nice shorthand syntax for declaring variables of a function type. The syntax consists of listing out the parameters between brackets, each parameter with their own type annotation, followed by the arrow operator and the return type. Now, as you mentioned before, anything that is used as a type annotation in TypeScript can be given a name using a type alias. So if you wanted, we could create function types once and use them again and again.

01:47

Finally, it is worth mentioning that the shorthand syntax for TypeScript function types is actually inspired by the error functions that are supported by modern JavaScript.

Account Required

Professional TypeScript Masterclass Lessons

Function Types

Sign in to access this content

Basics

Void

Rest Parameters

Type Aliases for Functions

Transcript

Professional TypeScript Masterclass