Introduction

In this tutorial, we'll be diving into one of the most useful features in TypeScript: optional and default parameters. These features make your functions more flexible, reusable, and robust by allowing them to accept different numbers and types of arguments.

By the end of this tutorial, you will be able to:
- Understand the concept of optional and default parameters
- Implement functions with optional and default parameters in TypeScript
- Use these features to create more flexible and reusable functions

Prerequisites:
- Basic knowledge of TypeScript
- Basic understanding of functions in TypeScript

Step-by-Step Guide

Optional Parameters: In TypeScript, optional parameters can be added by using a question mark ? after the parameter name. This means the function can be called with or without this parameter.

Default Parameters: Default parameters allow you to set a default value for a parameter. If the function is called without this parameter, the default value is used.

Best Practices and Tips

• Use optional parameters when it makes sense for a function to be called with fewer arguments
• Use default parameters to prevent errors when arguments are not provided
• Make sure to put required parameters before optional ones

Code Examples

Example 1: Optional Parameter

function greet(name: string, title?: string) {
    if (title) {
        console.log(`Hello, ${title} ${name}`);
    } else {
        console.log(`Hello, ${name}`);
    }
}

// Call the function with two parameters
greet('John', 'Dr.'); // Output: "Hello, Dr. John"

// Call the function with one parameter
greet('John'); // Output: "Hello, John"

In this example, title is an optional parameter. If it's not provided when calling the function, the function simply greets the person without a title.

Example 2: Default Parameter

function greet(name: string, title: string = 'Mr.') {
    console.log(`Hello, ${title} ${name}`);
}

// Call the function with two parameters
greet('John', 'Dr.'); // Output: "Hello, Dr. John"

// Call the function with one parameter
greet('John'); // Output: "Hello, Mr. John"

In this example, title is a default parameter. If it's not provided when calling the function, the function greets the person as 'Mr.' by default.

Summary

In this tutorial, we explored optional and default parameters in TypeScript. These features help to make your functions more flexible and reusable. Remember to use optional parameters when necessary and to set sensible default values for your parameters.

To continue learning more about TypeScript, consider exploring topics like arrow functions, type annotations, and interfaces.

Practice Exercises

1. Create a function that accepts an optional parameter and logs different messages depending on whether the parameter is provided.

2. Create a function with multiple parameters, including optional and default parameters. Test your function with different numbers and combinations of arguments.

Solutions

1. Solution

function display(message?: string) {
    if (message) {
        console.log(`Your message: ${message}`);
    } else {
        console.log(`No message provided`);
    }
}
display('Hello'); // Output: "Your message: Hello"
display(); // Output: "No message provided"

1. Solution

function order(drink: string, size: string = 'medium', sugar?: boolean) {
    let orderMessage = `You ordered a ${size} ${drink}`;
    orderMessage += sugar ? ' with sugar.' : ' without sugar.';
    console.log(orderMessage);
}
order('coffee'); // Output: "You ordered a medium coffee without sugar."
order('tea', 'large', true); // Output: "You ordered a large tea with sugar."