086 — The Function Type (inference, Function, params, defaults, void)

Video: 086 · TypeScript Tutorial #8 - Function Basics · watch · ~8:16 · Net Ninja TypeScript tutorial series, lesson 8 (Shaun)

Source: this is a written companion to the video. Part of the Favorite TypeScript Videos curated path, module 04 (functions and generics). Functions get the same treatment variables got in lessons 3–6: infer, annotate, then constrain.

a variable holding a function infers a function type

let greet = () => {
	console.log("hello world");
};
// greet = 'hello'; // error — already declared a function type

“Now, TypeScript will automatically infer that the type of this variable now is gonna be a function, much like inferred strings or booleans or other types before when we defined those.”

declare it ahead with the capitalized Function type

let greet: Function;
greet = () => {
	console.log("hello");
};

Unlike string or boolean, this one uses a capital — “function does use a capital.” The variable may hold any function later, but nothing else.

typed parameters, then optional and default values

const add = (a: number, b: number, c?: number | string) => {
	console.log(a + b);
};
add(5, 10); // fine — c omitted

“Now, if I want this to be optional, all I have to do is place a question mark in front of it, and notice, when I do that, the error down here goes away.” Unpassed, c is undefined — demoed by logging it. A default (c: number | string = 10) covers the same case with a value instead; use one or the other, never both. And ordering is a rule, not a suggestion: required parameters first, optional and defaulted ones at the end, “otherwise these arguments are gonna get mixed up.”

The browser check passes a union member through: add(5, 10, '20') compiles because c accepts number | string.

return types: inferred, then annotated

const minus = (a: number, b: number): number => {
	return a - b;
};
let result = minus(10, 7); // result: number — inferred from the return

Hovering result shows number — TypeScript reads the return the same way it reads an initializer. The explicit : number after the parentheses locks it in writing.

void means no value at all

“Now, what if we don’t return something like this function right here, because this just logs something to the console? Well, it still technically returns a value, and it returns a value called void.” Distinct from undefined — which is a real value an omitted optional holds — void is the absence of a value, and the lesson-10 signature (a: string, b: string) => void builds directly on it.

Prev: 085 — Project Workflow with tsconfig · Next: 087 — Type Aliases

The auto-transcript mishears a few terms; this narrative uses the corrected forms: booleans (transcript “bullions”), return value and return type (transcript “returned value”, “returned type”), and the capitalized Function type (distinct from lowercase primitives).