Functions

What this module covers

4 steps · TypeScript

1. Step 1. Functions

   Functions are reusable blocks of code. In TypeScript you can explicitly type parameters and return types, preventing errors like passing the wrong argument type or misusing a return value. function add(a: number, b: number): number { return a + b; } const greet = (name: string): string => `Hello, ${name}!`; function log(msg: string): void { console.log(msg); } Optional and default parameters: function greetUser(name: string, title?: string): string { ... } function createUser(name: string, role: string = "guest") { ... } function sum(...nums: number[]): number { return nums.reduce((a, b) => a + b, 0); } Always type parameters and return values for safety. Optional parameters (?) are for values not always required; default values avoid undefined; rest parameters (...) collect multiple arguments into an array.

   Typing both the parameters and the return value means TypeScript can catch a caller passing the wrong argument type, or misusing the function's result, before the code ever runs. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Add a function called `shout` that takes a string parameter and returns void.

2. Step 2. Quiz: Functions

   Answer these questions about typed functions.

   Parameters and return values can both be typed; ? and = give parameters optional/default behavior. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Answer the quiz below.

3. Step 3. Type a Function

   Write a function called formatName that takes firstName (string), lastName (string), an optional title (string), and returns a formatted string. All parameters and the return type must be explicitly typed.

   Optional parameters must come after required ones, and the `?` communicates to every caller — and to TypeScript — exactly when a value can be safely omitted. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Does formatName use typed parameters, an optional title, and build a real formatted string?

4. Step 4. Mini project: Functions

   Write a function called formatName that takes firstName (string), lastName (string), an optional title (string), and returns a formatted string. All parameters and the return type must be explicitly typed. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   Optional parameters must come after required ones, and the `?` communicates to every caller — and to TypeScript — exactly when a value can be safely omitted. This project stage asks you to apply the same idea without step-by-step scaffolding. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Does formatName use typed parameters, an optional title, and build a real formatted string?