Spread syntax with TS tuples

What is the Spread Syntax in TypeScript?

The spread syntax is used to spread the syntax. It is the opposite of rest syntax, while we know that rest syntax is used to collect multiple elements and "condense" them into a single element the spread syntax in typescript is used to "expands" an array into its elements or expand a string into its characters. The spread operator in typescript allows an iterable object like an array or a string to expand in places where 0+ arguments are expected. The spread operator is mostly used in those variables of the array where there is more than 1 value is expected. The spread operator allows us the privilege to obtain a list of parameters from an array. The syntax of the Spread operator is the same as the Rest parameter but it works the opposite of it. So let us see the syntax of the spread operator in typescript Syntax The spread operators are used in many places, lets us read about them in detail with the syntax :

• It can be used inside the function calls

• It can be used to create or extend an array iterable or iterable

Now let us see a few examples of spread syntax in typescript: Examples:

In the above example, we have seen how using the spread operator we can initialize an array from another array.

• Rest arguments

... is used as an argument for those functions that can take a variable number of arguments. Here when we return args, we see that we get back our array which we passed as separate values in the call. Hence we can see that how to rest parameters are the opposite of spread operators in typescript.

Spreading Expressions with Tuples

With the help of spread syntax in typescript, we can expand the elements of an array or object into its element. So similarly the spread syntax can be used to spread the values of its tuples, the spread expression is expanded as a sequence of arguments corresponding to the element of the tuple type. Let us understand this with the help of an example:

Whenever the function is called in typescript we can either pass the arguments as literals or via their respective indices but use the spread operator which is a fast and clean option for passing a tuple as an argument to a function call. Due to the nature of spread operators, the parameters are expanded. Run the above code in your editor for a better and clear explanation.

Spreading Generic Tuple Parameters to Narrow the Return Type:

As we know that we can also use the spread operators on tuples also using (...) dots. Let us understand this with the help of an example:

Using the spread syntax (...) we have narrowed down the return type of calculate. The inferred type of employee is still (string | number)[]. So let us again see how to narrow down the return type of employee:

Now the return type of employee will be the value concerning the parameters. Hence now finally using the spread operator in typescript we have narrowed down the return type. Run the above code in your editor for a better and clear explanation.

Implementing Function Using the Spread Operator

We can use the function while implementing the spread operator in typescript. Let us understand this with the help of an example:

Now let us add the values of the parameters in the function:

Now after adding this code the inferred type of Employees is (string | number)[]. Hence in the above example, we can see how we implemented the function using the spread operator in typescript. Run the above code in your editor for a better and clear explanation.