Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using spread operator in typescript

I want to write a function which returns me a component wrapped up in another. The function I'm trying to write is like below in JavaScript.

function GetGroup({ name, text, isRequired, ...props }) 

Here, name, text, and isRequired is obtained from the passed arguments and others are sent to another component as props.

How to write it in TypeScript?

like image 894
Prajwal Avatar asked Feb 14 '18 13:02

Prajwal


People also ask

Can we use spread operator in Typescript?

We can use the spread operator to create arrays from existing arrays in the given fashion.

Why we use spread operator in angular?

The spread operator is used to create a copy of existing objects with new or updated values or make a copy of an object with more properties. Instead of pass each element in the array as an argument in the function call, we can pass the array element as an individual argument using the spread operator.

What is the use of spread operator?

The JavaScript spread operator ( ... ) allows us to quickly copy all or part of an existing array or object into another array or object.

What does 3 dots mean in Typescript?

The three dots are known as the spread operator from Typescript (also from ES7). The spread operator return all elements of an array.


2 Answers

So firstly, Object Rest/Spread is a proposed ECMAScript feature that is well on its way to being standardized, having reached Stage 4, and is in the process of being formally adopted.

As you know from its usage, it makes working with plain JavaScript objects, incredibly flexible.

Information about the typing of the feature is available in the TypeScript 2.1 documentation. As it very eloquently states:

Object rests are the dual of object spreads, in that they can extract any extra properties that don’t get picked up when destructuring an element:

And indeed there are actually two features in play, the one complementing the other.

Object Rest

When the Rest portion of the feature is used, it enhances object destructuring by enabling us to collect the rest of the properties into a new object comprised of them.

We can write the type annotation as we would for any other value. For example

interface GroupProperties {
  name: string;
  text: string;
  isRequired?: boolean;
  values: string[];
  flagged: boolean;
}

function Group({ name, text, isRequired, ...rest }: GroupProperties) {
  console.log(rest);
}

This informs the type system that name and text are of type string and that is required is of type boolean. Further the type system then knows that rest has two properties, values and flagged of types boolean and string respectively. The type of rest is deduced.

Object Spread

When the Spread portion of the feature is used it enhances object construction by enabling declarative construction of an object from multiple sources, effortless creating derivatives, as well as easy undefining and overriding.

The type system also understands the meaning of Spread expressions and infers the types they evaluate to.

const o = {x: 1, y: 'hello'};

const o1 = {
  ...o,
  y: 1
};

In the above, o1 has type {x: number, y: number}.

like image 117
Aluan Haddad Avatar answered Sep 20 '22 08:09

Aluan Haddad


function GetGroup({ name, text, isRequired, ...props }: { name: string; text: string; isRequired: boolean; other: number; arg: string }) {
  props.other // number
  props.arg // string
}

TypeScript is just about adding types.. and name, text and isRequired are normal arguments. props, on the other hand, are the rest of the arguments. So, whatever the remaining arguments, are assumed to be the rest of the declared types.

like image 30
Faizuddin Mohammed Avatar answered Sep 23 '22 08:09

Faizuddin Mohammed