Command Palette

Search for a command to run...

Hectal
Phase 2Beginner3 of 18 in TypeScript

Functions

Type parameters and return values, optional, default and rest parameters, void and never, callbacks, overloads, this, and functions that carry properties.

Functions are where most JavaScript bugs live: the wrong thing passed in, a missing argument, a result nobody expected. This phase teaches you to write down what a function takes and what it gives back, so the checker guards every call.

You'll go from the basics (parameter and return types, optional and default parameters, rest parameters) to the pieces that make real code work: callbacks, functions that return functions, overloads, the tricky this, and functions that also carry properties or can be called with new.

Every example runs the real TypeScript compiler in your browser. Predict the error before you look at the Types panel, then change the code and watch it move.

0/7 · 0%
7 topics ~3 h 27 code blocks & diagrams
Start with the first topic
1
2.1

Typing Functions

A function has a type too: the kinds of values it takes in and the kind it gives back. Writing those down lets TypeScript check every call and every return.

27 min 3 code practice

2
2.2

Optional, Default and Rest Parameters

Some arguments can be left out (optional), some have a ready-made value (default), and some functions take any number of them (rest). Each form changes the type TypeScript gives the parameter.

27 min 4 code practice

3
2.3

void, never and Returning Nothing

void means a function gives back nothing you should use, and never means a function never gets back at all because it throws or loops forever. Both help the checker understand what happens after a call.

27 min 4 code practice

4
2.4

Callbacks and Higher-Order Functions

A callback is a function you pass to another function. TypeScript works out the callback's parameter types from where you pass it, so you rarely write them, and you can describe functions that return functions.

26 min 4 code practice

5
2.5

Function Overloads

An overloaded function has several allowed call shapes, each with its own result type, backed by one implementation. TypeScript picks the matching shape for each call, and often a union parameter is the simpler choice.

26 min 4 code practice

6
2.6

this in Functions

In JavaScript, this depends on how a function is called, not where it is written. TypeScript lets you declare what this must be with a this parameter, and warns when it would be lost.

25 min 4 code practice

7
2.7

Call Signatures and Function Objects

In JavaScript a function is also an object that can carry properties, and a class can be called with new. TypeScript describes both with call signatures and construct signatures inside object types.

26 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Type a Function

clamp keeps a number between a lowest and a highest value. Strict mode complains because its parameters have no types.

Beginner
2

Defaults and Rest

join should glue words together with a separator. Give separator the default ", " and collect all remaining arguments in a rest parameter words (an array of strings).

Beginner
3

Type the Callback

mapNumbers calls a function on every number and collects the results. Type the callback fn as a function that takes a number and returns a string, and give the function a return type.

Beginner
4

A Helper That Never Returns

needName should return a string, but TypeScript thinks the value can still be undefined after the call to fail. fail always throws, and TypeScript only knows that if you say so.

Beginner
5

Overloads: Result Follows Input

measure returns the length of a string, or a number padded to three digits. As written, its result is number | string for every call, so the two typed variables below fail.

Intermediate
6

Build a Callable Logger

A logger is a function you call with a message, and it also has a count of the messages so far and a reset() method. Describe it with a type named Logger: a call signature taking a string and returning nothing, plus count: number and reset(): void.

Intermediate