using spread operator in typescript

Question

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?

Adlei

Answer 1

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}.

Technicolor

You can also write the type in the function definition: function Group({ name, text, ...}: {name: string, text: string, ...}) – Paulina

@BallpointBen, indeed, but I find it quickly becomes unreadable as the number of properties exceeds three – Technicolor

Answer 2

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.

Haematic

Added little more info, @aloisdg – Haematic

Answer 3

To add on to Aluan's answer, you can also use this index signatures syntax (seen here as [propName]) to add on a dynamic number of any type properties to an object type or interface:

const getGroup = 
  ({ name, text, isRequired, ...props }:
  { name: string; text: string; isRequired: boolean; [propName: string]: any;}) =>
    console.log(name, text, isRequired, props);
    
  getGroup({'a': 1, 'b': 2, name: 's', text: 'o', isRequired: false});

result:

[LOG]: "s",  "o",  false,  {
      "a": 1,
      "b": 2
    } 

code playground

Egerton