7 Awesome TypeScript Types You Should Know

typescript it's big it's scary and time wise it's one of the best investments you can make as a developer here's seven incredibly useful typescript types like prettify that Matt pocock a fellow YouTuber came up with that gives you no matter how nested your types are all the properties inside of a type and six more here we go let's start with one of the most used types in general and that is if we had a constant person and that is going to be equal to John then how do we get the type of this person well we can just say type person is going to be equal to type of person and just by doing that we will get this value John right here inside of this type person right here now how does this work for objects this can be really useful if we had an object with values like the name which is going to be John again and then an edge that is going to be 24. if we do type person is going to be equal to type of object then we're gonna get this the name as the string and the H as the number but what if we only wanted the keys that is super useful you're gonna do it a lot in typescript you only want the name and the age without their respective types you don't need them in this case well how can we do that we can simply say key off type of object and what that's going to do is it's gonna give us the name and the age regardless of the values that they have so we only have the name and the H one of the most useful types is the return type for functions say you had a regular Arrow function just like this and you return a value from this function let's give this value a string type just like this and then we return it now how do we get the value that this function right here returns outside of the function type return is going to be equal to and what goes here right how can we get the string or whatever this function right here returns down here with our existing knowledge we could do something like this type return is going to be equal to and we know the type of property by now type of Val and this would technique work we would have whatever the function returns as a type but we can't really use this type outside of the function scope there is no way to export it or get the value down here so what we can do is instead of declaring this inside of the function we can use a really handy typescript utility type and that is going to be the return type that is nothing you need to import this is a built-in utility type and we can simply pass the type of func in here and thereby we will get the return value as a string outside of the scope of the function now what happens if this function is asynchronous that's going to do something to a return type we can see now there is a promise of a string and not the string directive and mostly that's probably not what you want man so what you can do is wrap this in something called awaited again nothing you need to import this is a built-in utility type and what that's going to do is give us the result of the awaited promise of this function if I just hover over the return we can see it's just a plain string and we can actually work with that now assume this scenario right here we have a main type which consists of a name as a string and an edge of a number and also we have a nested type this is the main type merged with another type and that adds one property that is the is developer as a Boolean that means or nested type is now the main type and the is developer thereby encompassing all three of these values but if we hover over the Nestle type we only see one value and that's not really handy if we import this from somewhere and want to know which properties all of them exist in this nested type we can't see that right here so we would have to click on the main type go to definition and imagine if this was nested through five levels this would be incredibly annoying now exactly for this use case so we can see all properties at one look there is a super handy type that Matt Poco came up with and that is called prettify with this protify we only have three lines of code that's literally it it's only this right here we can assign any type like I don't know and that is going to be the prettify and we're gonna pass as a generic the type we want to figure out the nested type for example and if I now hover over the I don't know you can see all values no matter how nested they are these right here are also super useful we have an interface to do and every to-do has a title and a description that's it for this example and we also have a function to update a to-do after the initial creation the function takes two arguments that is need to do we want to update and the fields we want to update like the description or both if we want to and we just do this updating by spreading in all the values of the initial to do then overwriting them with all the fields we want to update let's create a to-do of type to do that is going to be our initial to do with a title and a description just like our interface demands and now let's try updating this to do const updated to do is going to be the function we can just call right here pass in or initial to do and then the values we want to update for example in the description and the title but as you can see right here both of these the description and the title are the demanded we can't just update the description to be something else in fact typescript will complain that the title is not being passed property title is missing in type but that's super unpractical we don't want to pass all the values again imagine if this had like 10 fields that would be awful what we can do is wrap or to do it that we want to update in something called a partial and what this partial is going to do is essentially it's going to make all values optional we have to pass none of these that means we could even pass just nothing just an empty object would work just fine if I remove the string and the syntax arrows we could just pass an empty object and if I press Ctrl and spacebar right here to get typescript intellisense all values are now optional now the opposite of that is the required required there we go that's going to make all of these even if they were optional originally required so now we have to pass both it's the opposite of the partial okay last two ones also so very very useful and that is omit and exclude again we have or to do with the title and the description and let's create an object that is of this type let's give it or to do type so we get typescript intellisense that's going to throw an error great because the title and description are missing so let's pass those now when you create stuff in a database for example much of the fields are already done for you like the created at property be updated ad property and so on and there's a really useful type that makes you not need to pass those again it's called the result of this omitted and this is going to be equal to a typescript utility type called omit we can pass in or type like the to do up here and then we can Define the values we want to Omit let's close that off and in here we could say anything we don't get typescript intelligence for this but for example we could omit the title from this object or from this type right here the result would be just the description so imagine there was like a created ad property as a date that is often the case let's comment this out with databases right you don't want to pass this again that doesn't make a whole lot of sense so we can instead just exclude or omit it that's what it's called the created ad and the result is going to be just the title and the description that we now need to pass in to create a new object inside of our database the same thing unfortunately doesn't work with more complex objects let's say type shapes is going to be either a kind of circle with a radius of a number or it could also be the way we declare or entitlescript is using this type op at these this pipe operator and that's what it's called or it could be let's say kind of square and it gets an x value that is of type number so we have a circle and a square there we go that looks a bit better and if we try the same logic the same knowledge again let's call this omitted and this is going to be equal to the omit where it's pass in or type that is going to be the shapes and we want to exclude all where the kind is circle so we only get the square for example how would we do that while judging by the same logic we could pass like the object right where the kind is circle and try to Omit that from our object but that is not valid or mid-syntax we're going to get an error the type doesn't make a whole lot of sense and we get a type error right here so we can't use that instead to exclude where the kind is a certain value like Circle or Square or whatever we can use the exclude typescript utility type it's going to do the same thing as the omit but it's more for complicated objects now as the result we're only left with a square and fully excluded what we didn't want in our type and that is the circle hey I really hope you enjoyed the video and these typescript types I think they're a massive Time Saver super useful you don't even need to import anything there right there out of the box use them to your advantage well you now know how to I wish you all the best for your future projects and a lot of fun building your own cool stuff with this I'm going to see in the next video have a good one and bye bye

Channel: Josh tried coding

Views: 56,582

Keywords: typescript, utility types, typescript utility types, ts, ts utility types, prettify, typescript crash course, typescript tutorial, joshtriedcoding, josh tried coding, josh tried coding typescript, joshtriedcoding typescript

Id: q5DFpyIN5Xs

Length: 8min 56sec (536 seconds)

Published: Fri Sep 15 2023