How to Use Default Parameter Values in TypeScript?

In this tutorial, I will explain how to use default parameter values in TypeScript. Default parameters in TypeScript allow you to initialize function parameters with default values if no value or undefined is passed. Let me show you this with some examples.

What Are Default Parameters in TypeScript?

Default parameters in TypeScript allow you to specify a default value for a function parameter. If the function is called without an argument for that parameter, the default value is used. This is particularly useful when you want to ensure that your function behaves correctly, even if some arguments are not provided.

Syntax of Default Parameters

The syntax for default parameters is straightforward. You simply assign a value to the parameter in the function declaration. Here’s the basic syntax:

function functionName(parameter: type = defaultValue) {
  // function body
}

Check out How to Get the Return Type of a Function in TypeScript?

Default Parameter Values in TypeScript Examples

Let’s look at some practical examples to understand how default parameters work in real-world scenarios.

Example 1: Greeting Function

Imagine you are building a web application for a local community center in Austin, Texas. You want to create a function that greets users. If no name is provided, the function should greet a generic user.

function greet(name: string = "Guest") {
  console.log(`Hello, ${name}! Welcome to our community center.`);
}

// Calling the function without an argument
greet(); // Output: Hello, Guest! Welcome to our community center.

// Calling the function with an argument
greet("John"); // Output: Hello, John! Welcome to our community center.

I executed the above TypeScript code using VS code, and you can see the exact output in the screenshot below:

Default Parameter Values in TypeScript

Read How to Use Default Function Parameters in TypeScript?

Example 2: Calculate Discounts

Suppose you are developing an e-commerce platform for a store in San Francisco, California. You want to create a function that calculates the discount on a product. If no discount rate is provided, the function should use a default discount rate of 10%.

function calculateDiscount(price: number, discountRate: number = 0.10) {
  return price - (price * discountRate);
}

// Calling the function without a discount rate
console.log(calculateDiscount(100)); // Output: 90

// Calling the function with a discount rate
console.log(calculateDiscount(100, 0.20)); // Output: 80

The exact output is in the screenshot below after I executed the above TypeScript code.

How to Use Default Parameter Values in TypeScript

Read How to Pass a Function as a Parameter in TypeScript?

Example 3: Fetch User Data

Let’s say you are working on a social media application based in New York City. You need a function to fetch user data. If no user ID is provided, the function should fetch data for a default user.

function fetchUserData(userId: string = "defaultUser") {
  console.log(`Fetching data for user: ${userId}`);
  // Logic to fetch user data
}

// Calling the function without a user ID
fetchUserData(); // Output: Fetching data for user: defaultUser

// Calling the function with a user ID
fetchUserData("user123"); // Output: Fetching data for user: user123

Conclusion

Default parameters in TypeScript are a valuable feature that can help you write cleaner, more efficient code. By providing default values for function parameters, you ensure that your functions behave predictably even when some arguments are missing. In this tutorial, I explained how to use default parameter values in TypeScript.

You may also like: