TypeScript course · Part 2: Functions and reuse · lab 2 of 5
Functions, generics and the built-in helpers
Typing functions you pass around, writing one function that works for any type without giving up checking, and the helper types that save you rewriting shapes you already described.
By the end you can
- Type a function that is passed as a value, with optional and default parameters
- Write a generic function that keeps the type it was given
- Constrain a generic so it only accepts what it can actually handle
- Reuse a shape with Partial, Pick, Omit and Record instead of rewriting it
Easier if you did first
step 1 of 3
Typing a function you pass around
In the JavaScript course you passed functions to other functions constantly: to addEventListener, to map, to filter. Each of those is a value with a type of its own.
A function type is written like an arrow: (guests: number) => number. That says what goes in and what comes out, and nothing about the body.
So a function that takes a formatter looks like: function report(total: number, format: (value: number) => string). The compiler then checks every function you pass, before it is ever called.
Two more pieces of a signature. A question mark marks an optional parameter: (guests: number, notes?: string). Inside the function that parameter is string or undefined, and the compiler makes you deal with the undefined.
A default value does the same job more usefully: (rate: number = 45). The parameter is then always a number, and the caller may leave it out.
One rule that catches people: an optional parameter cannot come before a required one, because there would be no way to skip it.
Fill in the three signatures on the right.
type Formatter = (value: number) => string;
function report(total: number, format: Formatter): string {
return format(total);
}
function quote(guests: number, rate: number = 45, notes?: string): number {
return guests * rate;
}What these words mean
- function type
- (in: Type) => Out. What goes in and what comes out.
- optional parameter
- A question mark. Inside, the type includes undefined.
- default value
- A value used when the caller leaves it out. The parameter is never undefined.
- callback
- A function passed to another function to be called later.
- void
- A function that returns nothing useful.
Easy to get wrong
format: Function
format: (value: number) => string
Function accepts anything callable and checks neither the arguments nor the result, so it is only slightly better than any. Write the shape out.
A default value and a question mark together
One or the other
A default already makes the parameter optional for the caller, and the question mark would reintroduce undefined inside the function, which is the thing the default was there to prevent.
What we check
- The compiler reports no errors
- Formatter is written as a function type
- rate defaults to 45
- notes is optional
- The default is used when the rate is left out
- report runs the formatter it was given
- No any is left
Nothing printed yet. Run your code.