Pick: The TypeScript built in type that saves you from creating new syntax

one of the first lessons that you learn when starting your testing journey is that you can take an existing type and add more members to it by either using an extends keyword when working with interfaces or by using intersections when working with type aliases a little known fact is that you can also take an existing type and only select specific members from it when creating your new type by either writing a map type that you can code yourself or by using one of the built-in map type functions that exist within the typescript built-in library in this lesson we will look at how that works so let's go here we have a basic type representing a point in 3d space with members x y and z of type number your mission should you choose to accept it is to create a type called point2d with just the members x and y from point 3d now let's create a basic map type that does no transformation to the input type we take an input type t and for each property within t we create a member in the output type with the same type as it is present within t by using a lookup type now if we use this maps type by passing in the type 0.3d we should get the same output as point 3d and we can see that by hovering over the output type and you can see that it has the same three members x y and z of type number now our objective with pick is to go through only some of the keys instead of going through all of them and of course the answer is to take the number of keys that we want as a generic argument constrained by key of t and now when we try to use this type we will have to provide the keys that we want from t in our case we want the keys x and y so we go ahead and pass that in and that's it we've successfully achieved our goal of picking just a few members from an input type and you can verify that by hovering over point 2d to see that it just has the members x and y of the same type as they exist within point 3d now one final thing worth mentioning is that you don't actually need to write this particular pick type as it exists with the exact same name within the built-in typescript library so if we delete our version it falls back to the built-in one and if you hover over it you can see that it has the same implementation that we wrote ourselves in addition to creating new types pick is also really useful when you want to constrain some argument based on some globally present type for example consider the case that we have this type called css properties that has a number of built-in members now if we have this utility function that operates on just the size related members of css properties which are width and height we could definitely code it up ourselves by adding an explicit annotation that matches what is present within css properties however if we do this there is no clear indication of the fact that these members are dependent upon the css properties and if css properties ever evolves we will not be notified within our set size function to update the size member this is a fine example of where we can use pic to explicitly mention our dependence upon css properties for the size parameter and that's all for this lesson on the built-in picture smash that like and subscribe for more content like this and i will see you in the next one you

Channel: basarat

Views: 3,617

Keywords: typescript, javascript, basarat, that typescript guy, typescript deep dive, react, node, npm, angular

Id: m1GER-R0uLE

Length: 3min 9sec (189 seconds)

Published: Sun May 02 2021