TypeScript Rest Parameters

Note: If you're new to TypeScript, check our Getting Started with TypeScript tutorial first.


In TypeScript, rest parameters allow a function to accept an indefinite number of arguments as a single array.

They are indicated by the ... symbol before the parameter name.

Here's a simple example of rest parameters in TypeScript. You can read the rest of the tutorial to learn more.

Example

function addNumbers(...numbers: number[]): number{
    let sum: number = 0;
    for (let num of numbers) {
        sum += num;
    }
    return sum;
}

console.log(addNumbers(5, 10, 15)); // Output: 30
console.log(addNumbers(5, 10));  // Output: 15
console.log(addNumbers(5));  // Output: 5
console.log(addNumbers());  // Output: 0

In this example, numbers is a rest parameter of number type. As such, it can accept any number of arguments.


Syntax for Defining a Rest Parameter

You can create a rest parameter using the ... symbol before the parameter name.

Since rest parameters are arrays, you also need to use the [] symbol when specifying its type.

Here's the syntax for defining a rest parameter in your function:

function functionName(...restParameterName: type[]) {
    // Function body
}

Here,

  • ... - Indicates that we're defining a rest parameter.
  • restParameterName - The name of the rest parameter.
  • type[] - The type of the array that constitutes the rest parameter.

Notes:

  • You can have any number of normal parameters before the rest parameter.
  • The rest parameter must come after the normal parameters, never before. Breaking this rule will result in an error.

Example: TypeScript Rest Parameters

// Function with rest parameter 'deposits'
function studentInfo(name: string, ...marks: number[]): void {
 
    console.log(`Student Name: ${name}`);
    console.log("Marks Obtained:");

    // Print the rest parameter
    for (let mark of marks) {
        console.log(mark);
    }
    console.log();
}

// Pass a single argument to the rest parameter
studentInfo("Joe Smith", 100);

// Pass two arguments to the rest parameter
studentInfo("Jane Doe", 85, 92);

Output

Student Name: Joe Smith
Marks Obtained:
100

Student Name: Jane Doe
Marks Obtained:
85
92

Here's how the program works:

1. When studentInfo("Joe Smith", 100) is called.

  • name is "Joe Smith".
  • The marks[] array (i.e., the rest parameter) has only one element: 100.

2. When studentInfo("Jane Doe", 85, 92) is called.

  • name is "Jane Doe".
  • The marks[] array has two elements: 85 and 92.

More on Rest Parameters

Rest parameters with multiple types.

You can use a union type to ensure your rest parameter can take arguments of multiple types. For example,

// Function with rest parameter that can take number or string arguments
// The function returns a tuple of number and string

function addConcat(...args: (number | string)[]): [number, string] {
    let sum: number = 0;
    let message: string = "";
  
    for (let arg of args) {
        if (typeof arg === "number") {
            sum += arg;
        }
        else {
            message += arg;
        }
    }
  
    return [sum, message];
}

// Call the function
// Pass numbers and strings in random order
let [total, text]: [number, string] = addConcat(12, 2, 3, "Hasta ", 1, "la vista");

console.log(total);  // 18
console.log(text);  // Hasta la vista

Here, the rest parameter args can take any number of arguments that are either numbers or strings.

  • If an individual argument turns out to be a number, it is added to the sum variable.
  • But if it's a string, it is concatenated (joined) to the message string.

Also Read:

Did you find this article helpful?

Your builder path starts here. Builders don't just know how to code, they create solutions that matter.

Escape tutorial hell and ship real projects.

Try Programiz PRO
  • Real-World Projects
  • On-Demand Learning
  • AI Mentor
  • Builder Community