“A spread argument must either have a tuple type or be passed to a rest parameter” – How To Fix?

Are you getting the error “A spread argument must either have a tuple type or be passed to a rest parameter” and don’t know how to fix it? Don’t worry. In this tutorial, we will demonstrate some common methods to solve this problem. 

Reproduce the error “A spread argument must either have a tuple type or be passed to a rest parameter”

Example 1: 

// Calculate the greatest common division
function calculateGCD(x: number, y: number): any {
    if (!y) {
        return x;
    }

    return calculateGCD(y, x % y);
}

var arr = [16, 20];
var result = calculateGCD(...arr);
console.log(result);

Output: 

A spread argument must either have a tuple type or be passed to a rest parameter.

And we will run into this error. This is because our function has a fixed number of parameters, but we are trying to pass an array to the function with the spread syntax. The way the spread syntax works is it will allow our array to expand more than the number of elements that we expected. Now, here are some ways to fix it.

How to fix this error?

Declare our array as a tuple

The error suggests that our spread arguments must have a tuple type so that we will do it exactly. 

var arr: [number, number] = [16, 20];

When we set explicitly the type of our array as a two-element tuple, it will match the arguments of the function, and thus there would be no error when using the spread syntax.

Completed code:

function calculateGCD(x: number, y: number): any {
    if (!y) {
        return x;
    }

    return calculateGCD(y, x % y);
}

var arr: [number, number] = [16, 20];
var result = calculateGCD(...arr);
console.log(result);  

Output:

4

Use type assertion

One more straightforward way to fix this problem is to use the ‘const’ assertion. It will pass our array as a tuple and convert it into ‘readonly‘ mode, which means that our spread syntax cannot expand the array.

var arr = [16, 20] as const;

Completed code:

function calculateGCD(x: number, y: number): any {
    if (!y) {
        return x;
    }

    return calculateGCD(y, x % y);
}

var arr = [16, 20] as const;
var result = calculateGCD(...arr);
console.log(result);

Output:

4

Use rest parameter

Again, as the error suggests, we pass the spread argument to a rest parameter, and we will try to do it. The idea is to change the parameter of our calculateGCD() function from a fixed parameter to a rest parameter and, therefore, can take infinite numbers of arguments.

function calculateGCD(...arr: number[]): any {
    if (!arr[1]) {
        return arr[0];
    }
  
    return calculateGCD(arr[1], arr[0] % arr[1]);
}

var arr = [16, 20];
var result = calculateGCD(...arr);
console.log(result);  

Output:

4

Summary

In this tutorial, we have demonstrated three common ways to fix the error “A spread argument must either have a tuple type or be passed to a rest parameter” in TypeScript. The idea is to pass the argument to a tuple or rest parameter like what the error suggests. Thank you for reading!

Maybe you are interested:

• Argument type ‘undefined’ is not assignable parameter of type
• “element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type”
• “Property has no initializer and is not definitely assigned in the constructor”

Khanh Ngo

Hello. My name is Khanh Hai Ngo. I graduated in Information Technology at VinUni. My advanced programming languages include C, C++, Python, Java, JavaScript, TypeScript, and R, which I would like to share with you. You will benefit from my content.

---

Name of the university: VinUni
Major: EE
Programming Languages: C, C++, Python, Java, JavaScript, TypeScript, R