Typescript Spread Operator
🛑 ALL INFORMATION CLICK HERE 👈🏻👈🏻👈🏻
Typescript Spread Operator
view raw
example1.ts
hosted with by GitHub
view raw
example4.ts
hosted with by GitHub
view raw
array.ts
hosted with by GitHub
view raw
exaple2.ts
hosted with by GitHub
view raw
example2.ts
hosted with by GitHub
view raw
example5.ts
hosted with by GitHub
view raw
example6.ts
hosted with by GitHub
Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.
Cool features of Generics in TypeScript
November 4, 2018
Angular Material Table With Paging, Sorting And Filtering
April 1, 2019
Pipes in Angular
December 9, 2018
Rob
8 Apr 2019
Reply
Categories Categories
Select Category
.Net Core (2)
Angular (24)
Angular 7.0 (22)
Angular 8 (6)
Asp.Net Core (2)
BlockChain (3)
Blog (5)
Docker (3)
GraphQL (3)
iOS (2)
JavaScript (12)
MongoDB (1)
Node.js (4)
NPM (4)
ReactJS (3)
SwiftUI (2)
Tech (3)
TypeScript (5)
Uncategorized (3)
Visual Studio (1)
Select Category
Archives Archives
Select Month
June 2020 (1)
May 2020 (1)
February 2020 (1)
January 2020 (3)
December 2019 (2)
November 2019 (3)
October 2019 (2)
September 2019 (5)
August 2019 (4)
July 2019 (2)
June 2019 (3)
May 2019 (3)
April 2019 (3)
March 2019 (3)
February 2019 (4)
January 2019 (3)
December 2018 (6)
November 2018 (5)
October 2018 (11)
Select Month
Categories Categories
Select Category
.Net Core (2)
Angular (24)
Angular 7.0 (22)
Angular 8 (6)
Asp.Net Core (2)
BlockChain (3)
Blog (5)
Docker (3)
GraphQL (3)
iOS (2)
JavaScript (12)
MongoDB (1)
Node.js (4)
NPM (4)
ReactJS (3)
SwiftUI (2)
Tech (3)
TypeScript (5)
Uncategorized (3)
Visual Studio (1)
Select Category
Copyright 2018-2020 ZeptoBook.com All rights reserved. Disclaimer As an Amazon Associate I earn from qualifying purchases.
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here:
Cookie Policy
In T ypescript , you can use spread operator to spread the element of an array or object. The spread operator can be used for initializing an array or object from another array or object. You can also use spread operator for object destructuring .
To read more about object destructuring , you can follow below link:
Let’s explore some of the examples of Spread operators.
Create new array from existing array.
Similarly, you can create new object from existing object.
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
You can simply add a property to an object without mutating the original.
Note: For objects, the order of where you put the spread matters. What comes first is ‘overridden’ by what comes later.
So, in summary, we learn how we can use spread operator to spread an array or object elements. I tried to give a lot of useful example of using the spread operator in your TypeScript code. It is really fun to play with spread operator.
Hi Adesh,
It seems to me that example2.ts does not run.
I’ve changed your code for this
(myFunc)(…paramArray);
So it works.
Bye,
Rob
Notify me of follow-up comments by email.
This site uses Akismet to reduce spam. Learn how your comment data is processed .
let Array1 = [ 1 , 2 , 3 ] ; //1,2,3
let Array2 = [ 4 , 5 , 6 ] ; //4,5,6
//Create new array from existing array
let copyArray = [ ... Array1 ] ; //1,2,3
//Create array by merging two arrays
let mergedArray = [ ... Array1 , ... Array2 ] ; //1,2,3,4,5,6
//Create new array from existing array + more elements
let newArray = [ ... Array1 , 7 , 8 ] ; //1,2,3,7,8
console . log ( list ) ; // [1,2,3,4]
//put expanded array at any position
console . log ( list ) ; // [0,1,2,4]
// concatenate array using concat()
arr1 = [ ... arr1 , ... arr2 ] ; // arr1 is now [0, 1, 2, 3, 4, 5]
let Object1 = { a : 1 , b : 2 , c : 3 } ; //{a: 1, b: 2, c: 3}
let Object2 = { d : 4 , e : 5 , f : 6 } ; //{d: 4, e: 5, f: 6}
//Create new object from existing object
let copyObject = { ... Object1 } ; //{a: 1, b: 2, c: 3}
//Create new object from existing object + more elements
let newObject = { ... Object1 , g : 7 , h : 8 } ; //{a: 1, b: 2, c: 3, g: 7, h: 8}
//Create object by merging two objects
let mergedObject = { ... Object1 , ... Object2 } ; //{a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}
function myFunc ( x , y , z ) {
var paramArray = [ 0 , 1 , 2 ] ;
myFunc ( ... paramArray ) ; //10, 20, 30
const point1 = { x : 1 , y : 2 } ;
/** Create a new object by using all the point1 properties along with z */
const point2 = { ... point1 , z : 3 } ;
const point1 = { x : 1 , y : 2 } ;
const newPoint1 = { x : 5 , z : 4 , ... point1 } ;
console . log ( newPoint1 ) ; // {x: 1, y: 2, z: 4}
const newPoint2 = { ... point1 , x : 5 , z : 4 }
console . log ( newPoint2 ) ; // {x: 5, y: 2, z: 4}
Spread Operator in TypeScript - HowToDoInJava
Spread Operator In TypeScript - ZeptoBook
Spread Operator - TypeScript Deep Dive
TypeScript : Documentation - TypeScript 2.1 | Object Spread and Rest
Spread operator for object types and interfaces #32689
var [ x , y , ... remaining ] = [ 1 , 2 , 3 , 4 ] ;
console . log ( x , y , remaining ) ; // 1,2,[3,4]
console . log ( list ) ; // [1,2,3,4]
console . log ( list ) ; // [0,1,2,4]
const point2D = { x : 1 , y : 2 } ;
/** Create a new object by using all the point2D props along with z */
const point3D = { ... point2D , z : 3 } ;
const point2D = { x : 1 , y : 2 } ;
const anotherPoint3D = { x : 5 , z : 4 , ... point2D } ;
console . log ( anotherPoint3D ) ; // {x: 1, y: 2, z: 4}
const yetAnotherPoint3D = { ... point2D , x : 5 , z : 4 }
console . log ( yetAnotherPoint3D ) ; // {x: 5, y: 2, z: 4}
const foo = { a : 1 , b : 2 , c : 0 } ;
const fooBar = { ... foo , ... bar } ;
// fooBar is now {a: 1, b: 2, c: 1, d: 2}
The main objective of the spread operator is to spread the elements of an array or object. This is best explained with examples.
A common use case is to spread an array into the function arguments. Previously you would need to use Function.prototype.apply :
Now you can do this simply by prefixing the arguments with ... as shown below:
Here we are spreading the args array into positional arguments .
We've already seen one usage of this in destructuring :
The motivation here is to simply make it easy for you to capture the remaining elements of an array when destructuring.
The spread operator allows you to easily place an expanded version of an array into another array. This is demonstrated in the example below:
You can put the expanded array in at any position, and get the effect you'd expect:
You can also spread an object into another object. A common use case is to simply add a property to an object without mutating the original:
For objects, the order of where you put the spread matters. This works something like Object.assign , and does what you'd expect: what comes first is 'overridden' by what comes later:
Another common use case is a simple shallow extend:
apply is something that you often use in JavaScript, so it's good to have a better syntax where you don't have that ugly null for the this argument. Also having a dedicated syntax for moving arrays out of (destructuring) or into (assignment) other arrays provides a neat syntax for when you are doing array processing on partial arrays.
Nudist Beach Teens Sex
Hot Brunette Lingerie
Mom Given Ass
Cute Secretary Groped
Realitykings Com Sekis
