Lesson 04 · Typing JavaScript

Typing functions

A function is a small machine: values go in, one value comes out. Follow area(w, h) as its two parameters get types, the call area(3, 4) fills the slots and returns 12, and tsc catches a wrong return and a missing argument before anything runs. Then a default value, h = w, makes area(3) work and print 9.

10 min9 steps5 questionsBeginner

Fig 4 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01In function area(w: number, h: number): number, what does the last : number mean?

The type after the closing bracket of the parameter list is the return type: the kind of value the function gives back.

02With area(w: number, h: number), what does tsc say about area(3)?

Every parameter without a default must get a value. tsc reports error TS2554: Expected 2 arguments, but got 1. Plain JavaScript would run it: h would be undefined and 3 * undefined is NaN.

03The return type is number, but the body returns w * h + " cm". What happens?

Adding text makes a string. tsc compares it with the return type and reports error TS2322 on line 2: Type 'string' is not assignable to type 'number'.

04After changing the parameter to h = w, what does area(3) return?

When h is left out, it takes its default, the value of w. So area(3) is 3 * 3 = 9. TypeScript infers that h is a number from the default.

05An editor shows area(w: number, h?: number): number. What does the ? on h tell you?

A parameter with a default value is optional, and TypeScript shows that with a question mark: h?: number.

Key terms

Glossary

Function: A named piece of code that takes values in, does some work and gives one value back.
Parameter: A name in a function's definition for a value it takes, like w in function area(w: number).
Argument: The actual value passed in a call, like 3 in area(3, 4). Arguments fill parameters in order.
Parameter type: The type written after a parameter, like : number in w: number. tsc checks each argument against it.
Return type: The type written after the parameter list, like ): number. It says what kind of value the function gives back.
Default value: A value a parameter takes when the call leaves it out, like h = w. It makes the parameter optional.
Optional parameter: A parameter a call may leave out, shown with a question mark, like h?: number.
NaN: "Not a Number": what JavaScript gives for maths that has no number answer, such as 3 * undefined.

Fine print

Notes and sources

You can often leave the return type out: TypeScript infers it from the return lines. Writing it anyway makes the promise explicit, so a wrong return is reported inside the function instead of where the result is used.
tsc 5.9 with no settings writes older JavaScript: it turns const into var and h = w into an if statement. Settings such as target change those details; the types are always removed.
The editor hint is what tsc itself reports for the function's outside (its declaration): area(w: number, h?: number): number. A parameter can also be made optional with ?, as in h?: number; then h is undefined when left out.
A function that gives nothing back has the return type void, as in function log(msg: string): void.
The code on the card is real and runnable. area(3, 4) is 12; with the default, area(3) prints 9.

Quiz Unlocks after the last step.