Detailed explanation of TS object spread operator and rest operator

Overview

TypeScript 2.1 adds support for the object spread operator and the rest properties proposal, which is being standardized in ES2018. The rest and spread attributes can be used in a type-safe manner.

Object rest attribute

Assume that a simple literal object with three properties has been defined

const marius = {
  name: "Marius Schulz",
  website: "https://mariusschulz.com/",
  twitterHandle: "@mariusschulz"
};

Using ES6 destructuring syntax, several local variables can be created to hold the values ​​of the corresponding properties. TypeScript will correctly infer the type of each variable:

const { name, website, twitterHandle } = marius;

name; // Type string
website; // Type string
twitterHandle; // Type string

This is all correct, but it's nothing new. In addition to extracting a set of properties of interest, you can also collect all remaining properties into a rest element using the ... syntax:

const { twitterHandle, ...rest } = marius;

twitterHandle; // Type string
rest; // Type { name: string; website: string; }

TypeScript will determine the correct type for the resulting local variables. While the twitterHandle variable is a plain string, the rest variable is an object with the remaining two properties that have not been destructured.

Object extended properties

Suppose we want to make an HTTP request using the fetch() API. It accepts two arguments: a URL and an options object containing any custom settings for the request.

In your application, you can encapsulate calls to fetch() and provide both default options and specific settings that override those for a given request. These configuration items are similar to the following:

const defaultOptions = {
  method: "GET",
  credentials: "same-origin"
};

const requestOptions = {
  method: "POST",
  redirect: "follow"
};

Using object expansion, two objects can be merged into a new object and then passed to the fetch() method.

// Type { method: string; redirect: string; credentials: string; }
const options = {
  ...defaultOptions,
  ...requestOptions
};

The object extension property creates a new object, copies all the property values ​​in defaultOptions, and then copies all the property values ​​in requestOptions in order from left to right. The final result is as follows:

console.log(options);
// {
// method: "POST",
// credentials: "same-origin",
// redirect: "follow"
// }

Note that the order of assignment is important. If a property appears in both objects, the one assigned later replaces the one assigned earlier.

Of course, TypeScript understands this order. Therefore, if multiple extension objects define a property with the same key, the type of that property in the resulting object will be the type of the last property assigned, since it overrides the previously assigned property:

const obj1 = { prop: 42 };
const obj2 = { prop: "Hello World" };

const result1 = { ...obj1, ...obj2 }; // Type { prop: string }
const result2 = { ...obj2, ...obj1 }; // Type { prop: number }

Make a shallow copy of an object

Object spreading can be used to create shallow copies of objects. Let's say we want to create a new todo item from an existing todo item by creating a new object and copying all the properties. This is easy to do using objects:

const todo = {
  text: "Water the flowers",
  completed: false,
  tags: ["garden"]
};

const shallowCopy = { ...todo };

In fact, you get a new object with all property values ​​copied:

console.log(todo === shallowCopy);
// false

console.log(shallowCopy);
// {
// text: "Water the flowers",
// completed: false,
// tags: ["garden"]
// }

Now you can modify the text property without modifying the original todo item:

hallowCopy.text = "Mow the lawn";

console.log(shallowCopy);
// {
// text: "Mow the lawn",
// completed: false,
// tags: ["garden"]
// }

console.log(todo);
// {
// text: "Water the flowers",
// completed: false,
// tags: ["garden"]
// }

However, the new todo item references the same tags array as the first one. Since it is a shallow copy, changing the array will affect both todos

shallowCopy.tags.push("weekend");

console.log(shallowCopy);
// {
// text: "Mow the lawn",
// completed: false,
// tags: ["garden", "weekend"]
// }

console.log(todo);
// {
// text: "Water the flowers",
// completed: false,
// tags: ["garden", "weekend"]
// }

If you want to create a deep copy of a serialized object, consider using jsON.parse(jsON.stringify(obj)) or other methods such as object.assign(). Object extensions only copy property values, which can lead to unexpected behavior if one value is a reference to another object.

keyof and lookup types

JS is a highly dynamic language. Capturing the semantics of certain operations in a static type system can sometimes be tricky. Take a simple prop function as an example:

function prop(obj, key) {
  return obj[key];
}

It takes an object and a key and returns the value of the corresponding property. Different properties of an object can have completely different types, and we don't even know what obj looks like.

So how do you write this function in TypeScript? Try this first:

With these two type annotations, obj must be an object and key must be a string. We have now restricted the set of possible values ​​for both parameters. However, TS still infers the return type as any:

const todo = {
  id: 1,
  text: "Buy milk",
  due: new Date(2016, 11, 31)
};

const id = prop(todo, "id"); // any
const text = prop(todo, "text"); // any
const due = prop(todo, "due"); // any

Without further information, TypeScript doesn't know which value will be passed for the key parameter, so it can't infer a more specific return type for the prop function. We need to provide more type information to achieve this.

keyof operator

APIs that take property names as parameters are fairly common in JS, but until now there has been no way to express the type relationships that appear in those APIs.

TypeScript 2.1 adds the keyof operator. Enter the index type query or keyof. The type produced by the index type query keyof T is the attribute name of T. Assume that we have defined the following Todo interface:

interface Todo {
  id: number;
  text: string;
  due: Date;
}

You can apply the keyof operator to the Todo type to get the type of all its property keys, which is a union of the string literal types.

type TodoKeys = keyof Todo; // "id" | "text" | "due"

Of course, you can also manually write the union type "id" | "text" | "due" instead of using keyof, but this is cumbersome, error-prone, and difficult to maintain. Also, it should be a Todo type specific solution rather than a generic one.

Index type query

With keyof in place, we can now improve the type annotation of the prop function. We no longer want to accept arbitrary strings as key parameters. Instead, we require that the parameter key actually exists on the type of the object passed in.

function prop<T, K extends keyof T>(obj: T, key: K) {
  return obj[key]
}

TypeScript now infers the return type of the prop function to be T[K] , which is what is called an indexed type lookup or type lookup. It represents the type of the attribute K of type T. If we now access the three properties of todo below through the prop method, each property has the correct type:

const todo = {
  id: 1,
  text: "Buy milk",
  due: new Date(2016, 11, 31)
};

const id = prop(todo, "id"); // number
const text = prop(todo, "text"); // string
const due = prop(todo, "due"); // Date

Now, what happens if you pass a key that doesn't exist on the todo object?

The compiler will complain, which is good; it prevents us from trying to read a property that doesn’t exist.

For another real-world example, take a look at the Object.entries() method in the lib.es2017.object.d.ts type declaration file distributed with the TypeScript compiler:

interface ObjectConstructor {
  // ...
  entries<T extends { [key: string]: any }, K extends keyof T>(o: T): [keyof T, T[K]][];
  // ...
}

The entries method returns an array of tuples, each tuple containing an attribute key and the corresponding value. Admittedly, there are a lot of square brackets in the return type, but we are always looking for type safety.

The above is a detailed explanation of the TS object spread operator and the rest operator. For more information about the TS object spread operator and the rest operator, please pay attention to other related articles on 123WORDPRESS.COM!