TypeScript Optional Parameters

In TypeScript, optional parameters allow you to define parameters that may or may not be provided when calling a function. These parameters are indicated by placing a ? symbol after the parameter name in the function signature.

Syntax for Optional Parameters

function functionName(param1: type, param2?: type): returnType {
  // function body
}

In this syntax, param2 is optional, meaning the function can be called with or without it.

Example of Optional Parameters

Here’s a basic example to illustrate how optional parameters work:

function greet(name: string, age?: number): string {
  return age ? `Hello ${name}, age ${age}` : `Hello ${name}`;
}

console.log(greet("John"));         // Output: Hello John
console.log(greet("Alice", 25));    // Output: Hello Alice, age 25

In this example:

• The age parameter is optional.
• If age is not provided, it will not be included in the greeting message.

Default Values for Optional Parameters

Optional parameters can also have default values. If no argument is provided for the parameter, the default value will be used.

function greet(name: string, age: number = 30): string {
  return `Hello ${name}, age ${age}`;
}

console.log(greet("John"));        // Output: Hello John, age 30
console.log(greet("Alice", 25));   // Output: Hello Alice, age 25

In this case, if the age parameter is not passed, it defaults to 30.

Optional Parameters with Rest Parameters

You can combine optional parameters with rest parameters. Rest parameters allow you to pass an arbitrary number of arguments to a function, while optional parameters can still be used for specific values.

function displayInfo(name: string, age?: number, ...hobbies: string[]): string {
  const ageInfo = age ? `, Age: ${age}` : "";
  const hobbiesInfo = hobbies.length ? `, Hobbies: ${hobbies.join(", ")}` : "";

  return `Name: ${name}${ageInfo}${hobbiesInfo}`;
}

console.log(displayInfo("John"));                    // Output: Name: John
console.log(displayInfo("Alice", 25, "Reading", "Traveling")); // Output: Name: Alice, Age: 25, Hobbies: Reading, Traveling

Here:

• The age parameter is optional.
• The hobbies parameter is a rest parameter, allowing any number of hobbies to be passed.

Function Overloading with Optional Parameters

You can use function overloading in combination with optional parameters to create multiple signatures for a function. This allows different numbers of parameters to be passed without causing type errors.

function greet(name: string): string;
function greet(name: string, age: number): string;
function greet(name: string, age?: number): string {
  return age ? `Hello ${name}, age ${age}` : `Hello ${name}`;
}

console.log(greet("John"));         // Output: Hello John
console.log(greet("Alice", 25));    // Output: Hello Alice, age 25

Here:

• The first signature accepts only the name parameter.
• The second signature accepts both name and age.
• The implementation provides logic for both cases.

Summary

Optional parameters in TypeScript offer flexibility in function definitions by allowing parameters to be omitted when calling a function. You can use them with default values, rest parameters, and function overloading to create more versatile and robust functions. By using optional parameters, you can ensure that your functions remain usable even when not all data is available.