A beginners guide to Typescript | Collective Literal Types, Widening and Narrowing Types

hey there my gorgeous friends on the internet today I have an exciting episode we're going to continue the typescript series I started three weeks ago haven't forgot about it okay I promise uh I I really wanted to make the series and continue the series it's because when I learned typescript I just learned it in such a messy way I stumbled my head I hit I tripped over I started with generics who who learns typescript with generics as the first thing to learn like that's not okay so I'm trying to make the series like as simple as possible to like really understand hey like why is this uh useful you know so YouTubers talk too much let's just get into it so the first episode we learned a bit about types and how typescript can help us in our code base to catch errors in this episode I want to focus a bit more on literal types Collective types and understanding type narrowing and widening and why that's important so I think it's a we'll try to keep it as simple as possible okay prise so here we go so let's say we have a user okay and this user is called develop by at go okay so what what's the type of this typescript is automatically going to look at this code and it's going to say okay by what you wrote here I can tell that this is a type of string now string is a collective type just like Boolean that's a collective type as well why well because Boolean can be false or true uh string the reason why this is a collective type is because strings can have different values it can look like that it can look like this and it can look like that okay uh whereas a literal type you're going to hear that literal type it literally means that it's that literal value that you see right there so if I do cons if I do cons this time we know that constants don't change SCU makes its way into a typescript video who would guess as you can see so it's not a type so it's not just a type of string now it's like really down specifically to this only value and that's why when you use constants you always get a literal type here well not always actually I'll show you why if you do Primitives then yes so if I have a const age 30 here that's going to be a literal type of 30 meaning that this cannot be any other type of value other than 30 whereas if it's with let right let's do um Collective type Collective age and I'll say 30 as you can see this is number so number can be again it's a wider range so now hope you understand the difference with let and const let is going to accept a wider range of types and const is going to accept the only basically the only one that's left which is the exact type the literal type what about objects what if if I have a user like that and that has a name and an age and an ID of one here uh what what are these types is it literal types it's not like typescript is going to try to find like a balance between like what kind of types it puts on the on these key value Pairs and in this case it's going to use a wider type which is going to be it's just going to put string for this uh and number and number again okay so I can do user do name equals to Jane right that works fine but what if you wanted to behave the same way you wanted to behave on The Primitives here like that that's where the as conson keyword comes in and now this as you can see when you hover it look at that now it's all literal types okay so now user do like name equals Jane uh-oh spaghettio you cannot do that all this is hard okay like don't get overwhelmed by it if you don't get it straight away it took me a long time to get this it's perfectly normal um is there anything else I want to show you yeah so okay so it's all like this is like more Theory stuff right but like how does it actually like look in the real world let me show you one like you do maybe like what do we do react or Java vanilla JavaScript let's do uh vanilla JavaScript so maybe you have like a document do uh get queries not get query selector see I haven't done vanilla in a while document. query selector there we go so you get like an element okay you get a div okay so now typescript needs to decide what the hell am I going to do about this so it's going to look it's going to see oh well this is a htl HTML element however there might be a possib ability that it can be null as well you know you never know something might have broken so now typescript is going to have a wider range it's going to say hey this element can be a HTML development or no so now what you can do like since typescript is showing you this it's going to make you handle all the cases for it so if if you wouldn't have typescript you just probably do like oh element do add event listen or like I'll change the text of this to blah blah blah whatever okay but what if this element is you know not here then this thing would error out right so you can narrow it down so this is called type narrowing is where you have something that can be multiple different types of types right maybe you're doing a request from a database it can be a type of error it can be a type of success it can be a type of whatnot so that's why I can do something like this if there's no element well then I can handle this case any way I want okay and then check this out now elements here in this stage can only be a HTML development because we narrowed it down we excluded all the other possibilities and that's essentially it I'm going to talk more about this in the full stack nextjs course that's coming out you're going to see here that we use this quite a lot in our components where we check hey if the data is has an error then we handle that in a specific way if it doesn't then we handle that in a different way now how can you use type narrowing well you can use the instance of keyword for example so I can do like a function called contains and this is going to take in let's do a text of string a search I'll do string here but it could also be a type of a reg red Rex so here right now search is a type of string or reg XP right so what I can do is say if search is an instance of oh there it is Al completed for me uh reg XP right then here search is going to be the only type of reg XP okay so we handled the case here and then here else you can return whatever like that okay contains let's do Hello World blah blah blah okay there we go now careful you can also use typ of but you might shoot yourself in the foot let me just show you how you can excellent do that you know how I showed you the example with the element so we have let's say document dot query selector will get a div okay okay so this is a type of HTML div element or null okay so you could do something like this uh just be careful you can do if type of and then you can check the element it's a type of object for example okay so then and then you look at the element and it's still a HTML development or a null like why cuz I did this whole thing right and I said hey it should be a type of object well in JavaScript a type of null is an object unfortunately so you're not actually narrowing it out I know I'm sorry it's so silly how we how JavaScript is but it is what it is here's a another funny one that you might run into let's say we have a function okay and then this function you have a parameter that you might accept this can be let's let's widen that range again we'll do could be a number it could be a string it could be let's say a Boolean as well could be null okay here's what we'll do we'll say if there's no a okay we'll filter it out what do you think we'll have here console log X let's have a look what's the types on oh whoa so even though the value string and number are falsy here typescript is actually right because the value the the range is so wide here of the types it can be like undefined and null so it can still be a number or a string so that's going to be it for this episode I'm not going to go too deep into it yet because we do want to make this a like longer series uh I'll cover like generics and stuff like that later on uh but you guys also voted on x on Twitter follow me if you don't uh I asked you guys what should I learn next as a programming language to cover on YouTube here and the winner is go so thanks for voting and yeah expect the go

Channel: developedbyed

Views: 5,362

Keywords: typescript, typescript tutorial, reactjs, nextjs, string type, literal types, javascript objects, javascript let, let, const, type narrowing, type widening, compiler, runtime, js

Id: w74CNzY4zT0

Length: 9min 44sec (584 seconds)

Published: Sat Apr 13 2024