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?

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges