Rest Parameters in TypeScript

Rest parameters allow a function to receive multiple arguments as an array.

function showNumbers(...numbers: number[]) {
    console.log(numbers);
}

The numbers parameter contains all supplied arguments in an array.

Use three dots ... before the parameter name.

function functionName(
    ...values: number[]
) {
    // code
}

The general syntax is:

...parameterName: type[]

A function with a rest parameter can receive many arguments.

function showNumbers(...numbers: number[]) {
    console.log(numbers);
}

showNumbers(10, 20, 30, 40);

The numbers array becomes:

[10, 20, 30, 40]

A rest parameter can also receive zero arguments.

function showNumbers(...numbers: number[]) {
    console.log(numbers);
}

showNumbers();

The result is an empty array.

[]

Use number[] when all rest arguments should be numbers.

function numbers(
    ...values: number[]
): void {

    console.log(values);
}

numbers(10, 20, 30);

Rest parameters can also accept multiple strings.

function showNames(
    ...names: string[]
): void {

    console.log(names);
}

showNames(
    "Amit",
    "Rahul",
    "Priya"
);

Inside the function, a rest parameter behaves like an array.

function show(
    ...items: string[]
): void {

    console.log(items);
    console.log(items.length);
}

This means array properties and methods can be used.

Use length to find how many arguments were received.

function count(
    ...values: number[]
): number {

    return values.length;
}

console.log(
    count(10, 20, 30)
);

Output:

3

Because rest parameters create an array, you can loop through the values.

function showNumbers(
    ...numbers: number[]
): void {

    for (let number of numbers) {
        console.log(number);
    }

}

showNumbers(10, 20, 30);

Rest parameters are useful when calculating the total of several numbers.

function add(
    ...numbers: number[]
): number {

    let total = 0;

    for (let number of numbers) {
        total += number;
    }

    return total;
}

console.log(
    add(10, 20, 30)
);

Output:

60

The reduce() method can also calculate the total.

function add(
    ...numbers: number[]
): number {

    return numbers.reduce(
        (total, number) =>
            total + number,
        0
    );
}

console.log(
    add(10, 20, 30)
);

A function can contain regular parameters before the rest parameter.

function student(
    name: string,
    ...marks: number[]
): void {

    console.log(name);
    console.log(marks);
}

student(
    "Amit",
    80,
    75,
    90
);

A rest parameter must be the last parameter in a function.

function student(
    name: string,
    ...marks: number[]
) {
    console.log(name, marks);
}

You cannot place another parameter after ...marks.

The following structure is incorrect:

// Incorrect

// function student(
//     ...marks: number[],
//     name: string
// ) {
// }

The rest parameter must always appear last.

Rest parameters are useful when the number of subjects may vary.

function totalMarks(
    ...marks: number[]
): number {

    let total = 0;

    for (let mark of marks) {
        total += mark;
    }

    return total;
}

console.log(
    totalMarks(
        80,
        70,
        90,
        85,
        75
    )
);

You can calculate an average using all values received by the rest parameter.

function average(
    ...numbers: number[]
): number {

    if (numbers.length === 0) {
        return 0;
    }

    let total = numbers.reduce(
        (sum, value) => sum + value,
        0
    );

    return total / numbers.length;
}

console.log(
    average(80, 90, 70)
);

Rest parameters can receive several strings and combine them.

function joinNames(
    ...names: string[]
): string {

    return names.join(", ");
}

console.log(
    joinNames(
        "Amit",
        "Rahul",
        "Priya"
    )
);

A rest parameter can accept multiple types using a union type.

function showValues(
    ...values: (string | number)[]
): void {

    console.log(values);
}

showValues(
    "Amit",
    20,
    "Rahul",
    25
);

Rest parameters can also receive multiple boolean values.

function statuses(
    ...values: boolean[]
): void {

    console.log(values);
}

statuses(
    true,
    false,
    true
);

A rest parameter can receive multiple objects.

type Student = {
    name: string;
    age: number;
};

function showStudents(
    ...students: Student[]
): void {

    console.log(students);
}

showStudents(
    {
        name: "Amit",
        age: 20
    },
    {
        name: "Rahul",
        age: 21
    }
);

Arrow functions can also use rest parameters.

const add = (
    ...numbers: number[]
): number => {

    return numbers.reduce(
        (sum, value) => sum + value,
        0
    );
};

console.log(
    add(10, 20, 30)
);

Normal parameters expect a fixed number of values.

function add(
    a: number,
    b: number
): number {
    return a + b;
}

Rest parameters can accept any number of values.

function addAll(
    ...numbers: number[]
): number {

    return numbers.reduce(
        (sum, value) => sum + value,
        0
    );
}

With an array parameter, you pass one array.

function showArray(
    numbers: number[]
) {
    console.log(numbers);
}

showArray([10, 20, 30]);

With a rest parameter, you pass separate arguments.

function showRest(
    ...numbers: number[]
) {
    console.log(numbers);
}

showRest(10, 20, 30);

Rest parameters can be useful in React helper functions that accept a variable number of values.

function logMessages(
    ...messages: string[]
): void {

    messages.forEach(
        message =>
            console.log(message)
    );
}

logMessages(
    "App Started",
    "User Logged In"
);

React Native applications can use rest parameters in utility functions.

function showAlerts(
    ...messages: string[]
): void {

    messages.forEach(
        message => {
            console.log(message);
        }
    );

}

showAlerts(
    "Welcome",
    "Login Successful"
);

A practical example is calculating a student's total from several subject marks.

function studentTotal(
    name: string,
    ...marks: number[]
): void {

    const total =
        marks.reduce(
            (sum, mark) =>
                sum + mark,
            0
        );

    console.log(
        name + " Total: " + total
    );
}

studentTotal(
    "Amit",
    80,
    75,
    90,
    85
);

A common mistake is forgetting to use an array type with the rest parameter.

// Correct

function add(
    ...numbers: number[]
): number {

    return numbers.reduce(
        (sum, number) =>
            sum + number,
        0
    );
}

The rest parameter represents a collection of values, so its type should represent an array or tuple type.

Rest parameters are useful when:

• The number of arguments is not fixed.
• You need to process many values.
• You want to calculate totals or averages.
• You want to collect several arguments into one array.
• You are creating flexible utility functions.

function total(
    ...values: number[]
): number {

    return values.reduce(
        (sum, value) => sum + value,
        0
    );
}

Here is a complete example that calculates the total and average of student marks.

function calculateResult(
    name: string,
    ...marks: number[]
): void {

    const total =
        marks.reduce(
            (sum, mark) =>
                sum + mark,
            0
        );

    const average =
        marks.length > 0
        ? total / marks.length
        : 0;

    console.log(
        "Student: " + name
    );

    console.log(
        "Total: " + total
    );

    console.log(
        "Average: " + average
    );
}

calculateResult(
    "Rahul",
    80,
    75,
    90,
    85,
    70
);

Rest parameters allow a function to accept a variable number of arguments and collect them into an array.

function add(
    ...numbers: number[]
): number {

    return numbers.reduce(
        (sum, number) =>
            sum + number,
        0
    );
}

console.log(
    add(10, 20, 30, 40)
);

This makes functions more flexible when the number of arguments is not known in advance.