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?
We can use the spread operator to create arrays from existing arrays in the given fashion.
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.
The JavaScript spread operator ( ... ) allows us to quickly copy all or part of an existing array or object into another array or object.
The three dots are known as the spread operator from Typescript (also from ES7). The spread operator return all elements of an array.
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}
.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With