If you already have a subscription, you can sign in.
Enjoy free content straight from your inbox 💌
00:00
Here we have a type with properties of mixed modifiers. We have type X as read only and type Y as optional. To demonstrate the usage of map type modifiers, we create this utility map type that does nothing other than map over the properties in T and simply map them out to whatever they are within the type T. So if we use this utility type on the type point, the output would be the same as the input that is the same two members X as read only and Y as optional. Now, we've already looked at how we can make the properties
00:34
as read only in the output type by using the read only modifier. This makes all the properties as read only, and you can see that Y has become read only in the output type. TypeScript also allows you to optionally add the plus sign before the read only modifier. The output will be the same as without the plus token, but it might help you read better. TypeScript also allows you to add the optional nature in the generated properties by using the question mark token. And now if you look at the generated type, you can see that X has become optional in the output results.
01:08
Now, just like the read only modifier, you can add a plus before the question mark token if it helps you read better. I personally do not use these plus tokens. However, the reason why they're supported is that you can actually use a minus token to remove the optional nature or the read only nature. So if you use minus question mark, you can see that the optional nature of Y is removed in the generated type. Similarly, if you use minus read, only the read only nature of X will be removed in the generated type. Now to get more experience with map type modifiers,
01:42
let's look at a use case. Here we have a class designed to manage some state. It takes an initial state and stores it in its current property, and a method update to update the current value with the next state object that is passed in, we can create a new state object with members X and Y initialized to zero. This makes type T for the state instance as X and Y of type number. So we can update the state to a new X and Y value by passing an object to the update method. And indeed this does update the current
02:16
state with the correct values. However, notice the implementation of the update method. If we provide an object that doesn't have all the members that are required by Type T, it does automatically fill them from the current object. So we should be able to provide just the members that we want to update. However, this results in a compile time error because next has been annotated to accept the full type T, and we are not providing the X member anymore. The solution to this problem is to generate a type such that it has the same members as type T,
02:50
but all of them are marked optional. Now we can create a utility type function called partial that simply maps over an input type T and Adds the question mark modifier to all of the members. And now we can annotate the next argument for the update function to be a partial of type T. With this type annotation in place, the error on the update call goes away. Now creating a partial for any given input type is actually a common enough use case that we don't have to code up this particular utility type ourself. If we go ahead and delete our implementation, it falls back
03:24
to a built-in implementation provided by the TypeScript compiler that achieves the same purpose. And if you hover over the type, you can see that it is implemented by the TypeScript team exactly how we wrote it right now.