Welcome back to the cosmos of learning functions in TypeScript! In this voyage, you will learn how to define functions, handle optional and default parameters in these functions, and utilize arrow functions. These skills will help you craft effective and flexible TypeScript functions.

Let's learn more ways of working with functions in TypeScript. Although functions can be declared and used in a way similar to JavaScript, TypeScript offers a few more flexible options when dealing with parameters. Let's start with the basic definition:

TypeScript
Copy to clipboard
1function checkBaseID(baseID: number): void {
2  // If the ID is invalid, log an error message
3  if (baseID <= 0) {
4    console.log("Invalid ID!");
5  }
6}
7
8checkBaseID(-10); // prints "Invalid ID!"

In the above example, baseID is a parameter of the function and has a type number. The function does not return anything; hence, the return type is void.

One of TypeScript's additional features includes optional and default parameters. Here, we define a function with an optional parameter and a default parameter:

TypeScript
Copy to clipboard
1function shipmentDetails(baseID: number, isInsured?: boolean, insuranceAmount: number = 0): void {
2  console.log('Base ID:', baseID);
3  console.log('Is Insured:', isInsured ? 'Yes' : 'No');
4  if(isInsured) {
5    console.log('Insurance Amount:', insuranceAmount);
6  }
7}
8
9shipmentDetails(101, true, 5000); // Base ID: 101, Is Insured: Yes, Insurance Amount: 5000
10shipmentDetails(102); // Base ID: 102, Is Insured: No

In the shipmentDetails function, isInsured is an optional parameter, and insuranceAmount is a default parameter. The optional parameters and those with a default value must always come after the required parameters.

Arrow functions in TypeScript introduce a concise syntax for writing functions, focusing on simplifying function expressions. Unlike traditional function expressions, arrow functions capture the context of where they are defined, not where they are called. For now, we will concentrate on their syntax and straightforward use cases.

Let's explore the syntax through examples:

Before: Traditional Function

TypeScript
Copy to clipboard
1let checkBaseID = function(baseID: number): void {
2  if (baseID <= 0) {
3    console.log("Invalid ID!");
4  }
5};

After: Arrow Function

TypeScript
Copy to clipboard
1let checkBaseID = (baseID: number): void => {
2  if (baseID <= 0) {
3    console.log("Invalid ID!");
4  }
5};

We have transformed a traditional function expression into an arrow function. The arrow function checkBaseID uses the => symbol to separate parameters from the function body, enhancing readability especially for short functions.

Short, single-action functions can be compacted into a single line:

TypeScript
Copy to clipboard
1let logBaseID = (baseID: number): void => console.log("Base ID:", baseID);

Arrow functions are generally more readable and succinct, especially when used as callbacks or inline functions. However, they are not universally interchangeable with traditional functions due to distinctions in handling the context (i.e., this), a topic for deeper exploration later.

Congratulations! You have now familiarized yourself with defining functions in TypeScript, including using optional and default parameters, and you have taken your first steps into the world of arrow functions.

Looking ahead, you will get to apply what you've learned through engaging, hands-on exercises. These will not only reinforce your understanding but also challenge you to solve practical problems using functions in TypeScript. Ready for some coding? Let's dive in!