When we have a number of properties that are included in a component, we need to name each property as part of our template, as follows:
return ( <ItemView onItemClicked={_this.itemSelected} DisplayName={item.DisplayName} Id={item.Id} /> );
Here, we are constructing an ItemView component in our render function. The ItemView component needs three properties, named onItemClicked, DisplayName, and Id. When the list of properties for a component becomes large, it becomes very tedious and error prone to have to name each property in our template.
TypeScript now supports using rest syntax in these cases, as follows:
return ( <ItemView onItemClicked={_this.itemSelected} {...item} /> );
Here, we are constructing an ItemView component in our template as normal, and specifying the onItemClicked property. We are then using rest syntax, {...item}, to automatically assign each property for us.