Horje
How to use Spread Operator in TypeScript ?

The spread operator in Typescript, denoted by three dots (`…`), is a powerful tool, that allows you to spread the elements of an array or objects into another array or objects. This operator makes it easy to copy arrays, combine arrays, or create shallow copies of iterable.

Syntax

...operatingValue

Example 1: The below code implements the spread operator to create a shallow copy of an array.

Javascript

let oldArray: number[] = [1, 2, 3];
let newArray: number[] = [...oldArray];
console.log(newArray);

Output:

[1, 2, 3]

Example 2: The below code combines the elements of two different arrays into a single array using spread operator.

Javascript

let array1: number[] = [1, 2];
let array2: number[] = [3, 4];
let mergedArray: number[] =
    [...array1, ...array2];
 
console.log(mergedArray);

Output:

[1, 2, 3, 4]

Example 3: The below code implements the spread operator to create a shallow copy of an object.

Javascript

type objType = {
    name: string,
    age: number
}
 
let oldObject: objType =
    { name: 'Author', age: 25 };
let newObject: objType =
    { ...oldObject };
 
console.log(newObject);

Output:

{
    name: 'Author', 
    age: 25
}

Example: The below code modifies the value of an property of an object using spread operator.

Javascript

type objType = {
    name: string,
    age: number
}
 
let initialObject: objType =
    { name: 'Author', age: 23 };
let modifiedObject: objType =
    { ...initialObject, age: 24 };
 
console.log(modifiedObject);

Output:

{    
    name: 'Author',     
    age: 24
}

 


Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
How to Select an Element by ID in JavaScript ? How to Select an Element by ID in JavaScript ?
How to Iterate JavaScript Object Containing Array and Nested Objects ? How to Iterate JavaScript Object Containing Array and Nested Objects ?
How to map Enum/Tuple to Object in TypeScript ? How to map Enum/Tuple to Object in TypeScript ?
How to create Selenium test cases How to create Selenium test cases
Postman Dynamic Variables Postman Dynamic Variables

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje