TypeScript Crash Course: Learn Fundamentals in 50 Minutes

[00:00:00]hey guys how's it going I'm back here with another video and in today's video I'm going to be bringing a recently much requested tutorial where I'm going to be going from zero to explaining everything I believe you should learn in order to say that you understand and know how to use typescript for those who don't know typescript is an open-source programming language developed and maintained by Microsoft it is basically a super set of JavaScript which means that any valid JavaScript code is also valid typescript code typescript is a better version technically of JavaScript because it adds things that JavaScript can't have like static type definitions allowing us developers to be able to Define each variable with their specific type and when you actually compile your typescript code um everything will become JavaScript but the the point of using typescript is not for the end user it is for us developers to prevent ourselves from making mistakes that would then cause issues to the client and the users who are using our website therefore typescript makes one of my favorite programming languages which is Javascript be even better so if before this video you had any ounce of Doubt of whether you needed to learn typescript I'm assuring you that you do need it and if you want to become a web developer in today's day and age especially with how competitive the market is there you need to be up to date with the most reliable and used Technologies and typescript is on the top of the list so because I know it's annoying to learn new technologies especially in the beginning um I compiled this video which um I'll structure it in a way such that if I was the one learning typescript again from the beginning how would I approach this now do you need to know JavaScript for this course well I will assume you know the basics because I do think JavaScript is important to learn in its core uh before learning typescript because at the end of the day typescript isn't a replace like it isn't some any different from JavaScript in the sense that the syntax is the same the only difference is the extensions that you apply so the things you add not actually the things you already did in JavaScript and you'll understand as we go on through the video and before we get into this video if you could leave a like And subscribe I would massively appreciate it this video is not sponsored but if you want to help the channel uh you could support the channel by checking out one of our partners uh which is hostinger uh talked about them a bunch of times in my channel already you can check out my link in the description if you're looking to host your website in any place place they have a really good service and I would appreciate if you could check them out uh but yeah that's basically it let's get into the [Music] tutorial okay everyone so right off the bat I explained to you guys uh what typescript is and uh why I think you should use it so now uh let's get into the Practical stuff so first off we need need to install typescript I opened up here vs code and this is where we're going to be running our application um if you know how to run JavaScript applications you might know that there's two ways to do it you can either run it in a browser by just using normal JavaScript and having an HTML page however for athetic purposes and for Simplicity reasons I actually want to run my typescript and my JavaScript all inside of my terminal and we do this by utilizing nodejs so I will create um a file over here called tutorial. TS now this will be the file where all of our code is going to be written um if you notice immediately we use a TS extension instead of a JavaScript a GS extension because uh this will help us distinguish this from a Javascript file and here is the file now we need to actually install typescript inside of our computer all computers I Believe come with JavaScript but typescript uh definitely needs to be installed now in order to install it you have to use a package manager um let's assume you're using npm and run npm install dasg to install this package globally and then typescript now I've obviously already installed this so I'm not going to run that however after you do you did that you should run the command TSC then D- init what this is going to do is it will help us generate our TS config file which is a Json file um which which includes a bunch of configuration stuff related to how we want to manage our typescript code the file includes settings for various compiler options such as which files to include or exclude the target JavaScript version that you want your typescript code to run with and additional checks like if you want your typescript uh application to actually be very strict with the typing rules or uh maybe not so strict um essentially it's kind of like a road map for the compiler detailing all the rules that you want your typescript code to follow Now by default you see there's a bunch of configurations already set up for us um thing is I actually want to check and you can see this uh strict true over here uh should be set to true for this tutorial because you actually want to enable all checks for typescript so if you put this to false it will basically uh allow you to write your code in typescript but it will also allow you to not add type definitions to every single variable you create or every single function you create which kind of goes a bit against of why you're using typescript sometimes I use this just when I'm annoyed and I'm just trying to build a quick project however um I definitely recommend setting this to true so I'm going to keep this as it was I'm going to save this and let's start working on the code right off the bat I want to introduce you guys to um the different type annotations that come with typescript so we all know how to define a variable right I want to to Define a variable called age or ID I could come over here and say ID is equal to 5 right however in typescript this isn't how it works because although uh JavaScript would assume that this is a number we have to make sure to let our code know that this is a number so in order to let typescript know that this variable should be considered a number we would have to come over here and Define this variable as an actual number so as you can see in typescript we add the types for each variable just like this and you actually see this whenever you're just writing normal JavaScript if you hover over a variable you can see it assumes that the variable is equal to this however us defining it instead of letting JavaScript assume will help us prevent future bugs that we might not even be thinking of so we definitely want to keep this as a number now what other variables we could Define well we could Define a string for example we could Define a variable called company and set it equal to um I don't know Acme Corporation right now how would we Define this type as string well we just come over here and Define it as a string same goes with a buleon um let's create a Buon called is published or something like that and we would Define it to be a bullan by just setting the Boolean type now I'll continue on with a couple other types and just go over what each of them do okay so I added three more types over here and I'll go over what each of them mean so right off the bat if you want to Define an array of a specific type the way you do it is by writing the type first and then putting open and square and closing square brackets just like this so this would be to Define an array of numbers just as we do over here if I wanted to make this into an area of strings I would do this now immediately you notice that when I try to change the type definition starts giving us some squiggly lines over here which says that the type number is not assignable to the type string so you can see the power of typescript because anytime you mistakenly uh Define variables with um the wrong type it will actually let you know if this was JavaScript this would allow us to do it no matter what right I mean JavaScript even allows you to do something like this over here which is um having an array with different types inside of it now necessarily here it doesn't give you a red Squigly light because there's a specific type in typescript called the any type which as you might know it just defines a variable as any of the types so this variable X over here because I set it to any could actually be a number it could be a bullan it could be um I don't know an array if I wanted to um and it kind of defies a bit the point of typescript so you might see some n's in some projects however usually people use any whenever they are just they they they don't want to actually Define the real type or they're confused with the real type or they just are annoyed with typescript and don't actually want to uh learn what the actual type is so this over here should only be used the any type should only be used in extreme scenarios um and obviously there's other specific scenarios where you definitely want to use it but I'm just saying in general I would only keep that for extreme scenarios where you actually don't know the type now this is cool however how would this work with some actual functionality well if I were to create a function right let's create over here a function and let's call it concatenate strings or actually let's call it concatenate values that would be better and let's make it such that this function takes in two variables A and B and it returns the two values um concatenated so for those who don't know the word concatenate basically is usually used for Strings so if I if a over here was the word hello and B was the word world the result of this function should be hello world right so you can see there is a red squiggly line here because it is immediately telling us that we actually didn't didn't Define any type for it and it is actually in assuming that it has an any type which isn't allowed in strict mode so we would have to define a type but before we actually do that let's see what would happen in two scenarios that I think will'll exemplify to you guys uh situations in which JavaScript could cause some issues so let's actually console uh log over here um the result of this function and first let's call it using hello and then world just like we said before and then let's actually try to put a number here instead of a string let's put five and 10 right so thing is five and 10 are numbers not strings so if we're taking the function by what it actually is saying that it's doing which is just getting two strings and adding them together technically this over here should return 510 right however since these are numbers um and we haven't defined a specific type here this will actually return 5 + 10 which is not 510 it is 15 so you see that if I run this file and for those who don't know if you're trying to run a nodejs file locally you just run node and then you run the uh tutorial uh you run the the file like this um you can see that yeah we got hello world and 15 not 510 so we definitely want to Define find a type for this function and the way we Define types for arguments of functions is just like how we defined for the variables over there we just put over here the the values so I'll say string and I'll say string perfect and now you should see that we it gives us a an error over here because we're actually putting five and 10 as numbers so we know that if we want to get the result that we wanted we had to do something like this and now if we were to come over here and run node index.ts or tutorial. TS actually you should actually see an error and the error is pointing to the fact that uh we're putting typescript in a file that node.js doesn't know how to read because node.js like I said isn't going to compile or isn't going to read and run the typescript code in itself it actually runs JavaScript so we actually have to compile this into a Javascript file to be able to run with the J with the typ script notation so in order to compile this tutorial. TS file into a JavaScript one we can run um TSC and you'll see that it automatically generates this file as a Javascript file so it's basically the same thing as before but without the type annotations which means that um this is what is going to be read by the browser this is what is going to be read by the server if we're we're deploying this to a server so the benefit of typescript goes in this file and if you want to run our result we actually need to run the JavaScript one so I'll say node index.js and um what happened um module not found oh I keep putting uh index.js let's do tutorial. JS uh and yeah you can see it correctly said 510 which is perfect now one thing I want to point out to you guys is um what I what if I actually return something else what if I return the the the number three this obviously is wrong right because how can this we're expecting a string not a number so there is a way for you to Define um the return type of a function and the way you do that is by adding the return type over here so we'll say that the return type for this function is a string so that um our code knows that this is what it's supposed to return now if I were to put three or four over here it would give us an error on the return statement um telling us that we can't actually return a number perfect now that we've learned the basics of the basics let's start getting where a typescript gets really interesting which is when we actually start defining objects and types ourself so whenever we have an object in JavaScript right so if I were to define the object user we could put various different fields inside of here we could put an ID right which would be um a number we could put a name which would be a string and we can also put for example an AG right which would be um a number so this object over here could be defined in a certain way but then you could right after this come here and change one of the values to something that doesn't make sense right now it says over here that you can't do that because the string is not assignable to a number it is assuming that our user object is defined this way and it's is actually helping us by a by giving us a red squiggler line telling us that this shouldn't happen however we shouldn't let JavaScript assume anything we should Define the type for this object ourselves and the way I would Define a type for an object is by using an interface so an interface is basically um a road map a blueprint for how our object should look like so I'll call this interface the user interface and inside of here we should Define all of the fields that our user has but instead of putting the values for each of the field we should put the types so for ID it will be number for age for name it will be string and for age it will be number as well now you can see that um if I were to put this it will still say you can't um but we actually haven't assigned this object to this interface that's why if I were to actually make this into a string this would work however we don't want to allow a user to be defined with an age which is a string so we say that this user has Type user interface so now it gives us the error which means that just like how we were defining variables before um by giving the string type we can now use uh a personalized type that we create to enforce type definitions now let's fix this by just removing this uh by making this into a number and I want to actually point a question for you guys what if there's a user I imagine we're in real life and there's a user who we don't know the age and the age actually doesn't matter that much but it's an additional thing that we might want to have some times right so what if I don't want to pass an age well there's clearly an issue right it says property age is missing on this type and it's required in the user interface now what does it mean to be required it means that some fields or all the fields you define in your interface they can either be required or not they can either be required or optional so it assumes it's required because that's how we actually defined it in order to make it optional we had to put a question mark right after the name of the field and now you see it doesn't give us an error anymore now what happens if I print or a console log sorry console log the user. AG well let's check this out let's open this again and like you like I told you guys we have to first build this um it just built and then we have to run the tutorial. JS you see it gives us as undefined because the optional type is either undefined or a number so you see this is how the age field in the user interface is defined either a number or undefined you might expect it to be null but technically not because undefined as a JavaScript type and it's used uh in typescript for whenever we don't we didn't actually Define a value for some sort of field or variable so we could actually um play around with this we can say okay if uh let's console log this if uh there's no user. AG so if user. AG is undefined then we actually want to console log a message saying no no age of the user and if it isn't undefined then we actually want to console log the AG you'll see that after this if we built it again and run the same thing we should actually get a error message for it which means that um actually having type definitions in our code can lead to many conditional statements that you previously couldn't have in JavaScript you have no idea how many times I have statements like this where a piece of data can actually be no and I'm constantly checking to see if it is because um projects revolve around that whole concept now what else can you actually put inside of an interface well if you have any idea of what you can actually put inside of an object then you have your answer because objects can be defined in the exact way in which they um can be created so if I imagine in this user interface over here I had a function right imagine here actually in the actual object I had aun function called uh greet right it's a function which um we can actually use to uh greet someone right and it comes with a little message over here uh and with it we can actually just console log um the actual message so I can say something like this conso log message now why is it giving us an error right why is it giving us an error actually I should remove that uh why is it giving us an error well because we haven't defined any of the types but if we didn't have typescript we could easily set this up and then over here we could call user.

[00:20:43]greet and put something like hello over here and whenever we called this uh this grd function would run and it would conso lck the message however it's given us an error because we haven't defined this specific function as a part of the user interface so let's do that so to Define functions it's a little bit weird but at the same time um it's pretty uh self-explanatory um we actually first Define the name of the function and we specified to typescript that this is a function by right after the name we put a a parenthesis right now whatever we put here is what this function will return so with this over here this is actually just a console log so it's not returning anything right so whenever you're not returning something in a function timecrimes is the type definition over here there's no problem but we could actually redefine this if we wanted to we could actually put void over here as well and here put string as well if we put something else if we put number then you would see that this is a problem because it's not the same functions right so let's keep it how it was before and let's save this let's run this and let's see if the function is actually called uh we have to build it and then run it and you can see it is actually called perfect okay so I think this is a everything kind of uh important to know with interfaces uh there's more complexity that is added um with whenever you work with multiple types and that's what I want to explore right now so let's comment all of this out and actually probably delete this and I want to present you guys uh the following scenario imagine we have this function called uh print ID right and it's related to an user uh I wanted to actually print the or console log the ID of a specific user and it takes in the actual ID of the user now if you've ever worked with IDs before you might know that IDs can vary in definitions it can actually be a number or it could be a string no matter what uh I just want to console log it so I'll say console log um the ID some message saying ID is equal to the ID perfect now it's asking us to define a type and I can Define over here for example a string right and I could call this print ID function and put a string over here like ID 1 2 3 however there are scenarios in which you also need this to be a number because maybe the ID is not ID 1 23 it's a bunch of numbers right and obviously you don't want to keep it as a string you want to keep it as a number because that might be the way that the data is coming to you so with typescript is important to understand that sometimes especially when you're dealing with a full stack app um data might be coming from the back end in ways that you might not expect so you have to deal with that so whenever you have a situation like this where this field can be either a string or a number um you can use what is known as a union which is um you combine multiple types and say that the combination of them can be attributed to this variable so I can say that this ID field can be a string or a number and now this doesn't give an error anymore so this little thing over here kind of allows us to uh maybe internally or in line Define a new type which is a type uh defined by the union of both a string and a number now unions can be become really complex and annoying for example this could become I don't know it's a Boolean it could become as well an array of uh numbers I don't know obviously it's hard to come up with an example right now but there are situations in which a variable can have a very complex type which is a union of a bunch of different types in that kind of situation or if you actually just want to keep it simple and not have this Union over here in the argument of the function you can actually Define a type for yourself now we've kind of done that with an interface right with an interface we've said user and then defined an object right however the difference between what we're going to do now is that an interface is mostly done for objects and what we're doing now is for single Fields so if I want to Define this ID field to be a type that isn't one of the Primitive types I can for example use the type definition over here which is also known as a type Alias and just say that um this will have a type of ID field type and it will be a union of a string and a number and then I can pass this over here and reuse this maybe uh anywhere inside of my application and now it will always know that this can either be a string or a number it accepts both now since we've talked about uh unions we probably should talk about the opposite of Union right a union basically gets two sets for those who've done set theory or have learned about Vin diagrams uh a union has two different sets of data right and it accepts both of them which is in this case the string and the number but what about the situation where you want to intersect uh two types right you want to intersect those two sets so a situation like this would be the following imagine we have uh the two the following two interfaces right we have an interface for now imagine that we have an interface for uh a business partner I don't know it's a person a person that is your partner in business um and let's keep it simple let's actually just say that our business partner has two fields in this object one is their name and one is their um credit score I don't know credit score and that's a number now there is another interface called uh interface called um user identity right and this is actually more General so business partner will be used for objects uh related to a specific type of person in our website it would be a specific type of business of employee so it would be a business partner and user identity would contain the ID of a user and their email which is something that everyone in the website should have right so we have two different types and um they have some intersection because a business partner whenever they have a user they they do have a user identity right so if I want to Define this new type right this new type which is a more General uh representation of uh an employee in a website right I can call this employee um it would be a combination of the values in this object and the values in this one to do that I could just use the concept of intersection I can say that the employee is a business partner and it intersects with the user identity object now if I were to create a function over here and imagine you want to sign a contract for this employee right you want to sign their contract I could come over here and say const uh sign contract and then uh Define that you need to pass an employee over here here so employee and we'll just console log a message saying uh contract signed by and then put uh the employ name which as you can see just by the autocomplete it includes the fields from both uh interfaces not just one so we can get the employee name and we can say uh something like like with credit score equal to and then we add the credit score as well actually uh no name and credit score in the same object so actually let's instead of say with email CU they are in different one so with email um equal to employee email perfect and you can see that if we were to call this so sign contract and we were to pass this object with the following Fields a name called Pedro a credit score of 800 let's say I'm I'm amazing uh an ID of 23 or 34 uh and an email of Pedro gmail.com now if we call this um let's just build it and oh there's an error okay I have to do this and also let's define the type of this as void because that's the return type uh if I were to do this build it and then run it again you should see that um it actually works there's a mistake in the string but it actually works so it actually concatenated both types it intersected both of them and created a new type which is uh it's not the union of both because that's the whole difference between intersection and Union because if I were to do this this would give us an error because employee is not uh an object with fields of both types it is either one of the types so we can't have one of each over here I could actually change this to credit score and this would make more sense with the unit type because then it would like over here we could pass either the business partner object or the user identity but in this case uh we want to have both fields of both objects so we do keep it like this with an intersection sign and you'll see this being used um I I see unions being used way more in projects but this is also important important um and I think it's definitely important for you to understand but one thing that is super important in typescript that we haven't talked about yet and it's what we're going to be talking about right now is the idea of enums um which is one of my favorite parts of of typescript in general you can actually replicate this in JavaScript as well if you if you ever want to do that but enims is a very easy and handy way for you to define a set of named constants and it will actually improve the read readability and usability of your code that uses those constants so if you don't if you didn't get what I meant by that uh let me explain imagine that um you want to have a function over here uh and call it print error message right and this is probably going to be called whenever you have some error scenario in your website like whenever you click a button and you call some data and it comes out wrong um and it should take in an error and it should print out a message based on that right so let's say error now um imagine that there might be multiple types of Errors right the error could be um for example an unauthorized user error it can be an unauthenticated user error it can be an error about the user not existing right it can be imagine that this is probably going to be called whenever you're trying to sign in into an account right that's an eror so let's think about this like this error over here can be multiple things and let's note it down so you guys can understand it um the error can be um an unauthorized error so the user is not authorized and um user doesn't exist if the user is trying to sign in probably there's an error for wrong credentials and um yeah or probably like an internal error something just happened not none of the other ones right so it can be either of this ones and depending on which one it is we want to conso log a different message so we could obviously come over here and whatever this is returned we could uh do something related to that but the thing is we want to define a specific set of constants for this which is going to Define all the different types of errors that they can be so an enum could be a great example of what you can use to make this easier we can say uh enum uh login error and we can Define over here different types of constants or of errors that can exist so for example the login error can be an unauthorized error and we can define a string that is going to match that so I'm going to say unauthorized this over here not necessarily uh will be what's going to be printed um you could print that but it's not necessarily it's just a a value for um your enm key so then uh let's create one for user doesn't no actually user don't no no User it's a better way so user doesn't exist let's call it no user and let's pass in over here uh user doesn't exist or actually this just pass in no user uh and then wrong credentials we'll say wrong CR credentials and again wrong credentials and finally Let's do an internal error so internal and internal perfect now we can say that this error is uh of type login error Ena which means that um if we wanted to display a different error message depending on what which one of these types it is we could easily just come over here and say um if um error is equal to login error do unauthorized then we can just console log uh a message saying user not authorized so you see it's pretty easy for you to match this with this you define the type of error and you define the condition that should happen when that error happens now let's do it for the other ones uh let's say if error is equal to uh no user we'll say console lug uh no user was found with that username something like that now I'll fill up the other ones and I'll be back in a second okay as you can see we can check for all the different errors we can even put an else for the internal one or we can just default it to be internal by also checking if it's internal but um that's fine um we'll just also console log actually we'll remove this over here and now let's call this function let's call Print er no error message so how would we what would it put over here well we can actually just straight up use the enum so I can print out a message for the uh wrong credentials one right and I can save this build it run it and you'll see that it will say the correct combination um I could change this to be uh the no user one and you'll see that it will actually change based on that as well so um this is the basics of enms inms are great for this kind of stuff it is great for defining I don't know situations like directions Different Strings that might or like keys for specific uh parts of your website stuff like that um it's probably one of the most used things in typescript that I use personally I love them and I think they're extremely useful now one of the last things I want to talk about um in typescript is probably one of the most complicated to understand which is the concept of generic types and that's probably something that a lot of people just uh Breeze over and don't actually learn but they see it on our day-to-day um working um hours um so I wanted to just explain to you guys uh because generics are actually a very powerful feature that many programming languages including typescript uh use because it allows you to write flexible reusable functions and classes that can be used uh with different types they kind of help you ensure type safety without losing the flexibility of working with various different data types um and I came up with a pretty I I believe to be um relatable and simple example that demonstrates how to use generics in typescript so we're going to be creating a storage class a storage container class which um will contain different uh data types right and uh we can make different versions of this class with different types so we can make one with the string type one with the um number type you'll understand as we build it but uh to start this off let's start off by just creating a class and call it storage container now this class whenever we Define a normal class that could be of a type we could pass over here an interface for example we could pass in a user interface like the one we created but like I said um this should actually be um accepting various different data types so we're going to be using a generic and to define a generic over here we pass in a t as you can see this will stand for uh it's kind of a placeholder for um the different data types that can be used so over here we'll create a variable called contents and we'll Define it to be a array of this t uh type now this is a private function so I'll make this private and contents will just be uh whatever variable like whatever value values we're holding inside of here we're going to return this um in the end this is going to be a very simple class now for Constructor uh in this class will'll just say this do contents is equals to an empt array so we'll start off with an empty array and as we use this class we'll fill in this uh contents array which is going to be the actual storage system the storage uh container now we're going to have two functions inside of this we're going to have an added item function which is going to add something to this contents array and there's going to be a get item function which as you might know we we get an item now we're using this generic type because we don't want want to make this be just for Strings or for numbers so over here inside of this we'll have an item as an arguments so the item we would add and instead of putting string or number We'll add the T and like you might expect this will return void because the whole point of this function is just to um push something to the end of the contents array right now this get item will have an argument which is going to be the index for uh which item in our storage we want to get so it will be a number and it needs to return back either the item itself or nothing or undefined because uh maybe it will actually not find that item now instead of get item let's just return uh this do contents and then return the item inside of the index right so this is our very simple storage container now this is where you guys start understanding the power of generics which is we can actually make multiple different uh instances of this class for example we can make one for uh usern names right and say new storage container now usernames is a string right it's going to be a string so we Define what type is going to fill in for this T over here this generic by passing it over here so I'm going to say string and this would generate a version of this an instance of this class where we can uh add an item like Pedro tag and then uh probably add something else as well I'm going to add one more uh P tag uh Echo BR um and then I'm going to say usernames do get item and you'll see that if I try to get the first item this should return the correct information uh it doesn't oh we have to print this out sorry about that um console.log and then print this out perfect uh you see Pedro Tech so that worked right now we can also make uh another instance of this which isn't with strings it's actually with numbers so I can come over here and I can say number and this is actually age of no actually age is not a good example maybe uh I don't know friends count let's imagine that this stores for each item the array it stores the amount of friends a user might have so instead of adding strings over here we can add numbers we can add 23 we can add 56 or 678 and obviously we have to pass this in and you'll see that the type definition actually worked right um it doesn't it didn't allow me when it was usernames because username is a string storage container but when I change it to the number one it works and if I print out both you'll see that both work uh sorry did I actually yeah I'm still returning usernames um let's try again and yeah it works so generics are meant for this are meant for uh basically reusing some sort of class or object um that can have multiple different data types as arguments to the data that is present in that class and making different versions of it you should see it in every single library that you use if you use it in re a react Library if you use a View Library if you use a angular Library all of them under the hood use stuff like this now this is basically all of the complicated topics the I left a like a minor thing that you should see should understand to the end uh but it's also pretty easy to understand uh because you you will see this when you're working with typescript um however it's not that important so I left it for L which is the idea of uh readon variables so uh if you were to create an interface for example for an employee um just like this uh we could Define some properties for it right we could Define that this employee um could have a name like a string uh and a department which is also a string I don't know but also it has some fields that they shouldn't be altered because they are inherently not mutable they're strings that are defined once and should never change for example uh employee ID right technically you shouldn't be able to change the ID maybe you do but I don't think you should a better example would be a start date right uh a user can't have a can't change their start date after they started that's a a predetermined thing which by the way I don't think I mentioned but you can use the date type for dates um now how do I enforce that when I were to create here an employee uh and set it to equal to employee over here and I were to uh Define all of this stuff uh well actually I need to put an equal sign so let me Define an employee here uh start date equals to new date I'll just set it to right now um and then name let's add it to Pedro and Department let's set it to finance right if I were to create this employee I want to be able to change the name field to Jessica imagine I change my name to Jessica but I don't I want to not be able to change my employee ID right right now I can still do it employee employee ID is equal to uh this number and then if I were to print the employee in the end you should see that it actually Alters everything right as you can see however I want to make uh both this and this field be read only not mutable so by the name you should see that I can add this read only thing over here which actually allows for that to happen and it gives us a red squiggly line for the employee ID meaning it doesn't actually allow me to um mutate this it says that um cannot assign employee ID uh cannot assign to employ ID because it's a readon property so I can remove this and I know that I shouldn't be able to change that and now you see that it actually fixes it so yeah that's that's pretty much the last thing I wanted to go over um I've made typescript videos in the past um especially videos related to specific uses of typescript so I'm linking up here a video I made on using typescript for uh backend applications so like setting up a typescript uh application with Express and nodejs um if you're are interested in that go check that out but more importantly I've also made extensive videos on using typescript with react because I do think you if you're going to be using react you have to be using typescript I don't use it in some of my videos to make it more understandable for everyone even those who don't know typescript but in the real world you definitely need to use typescript because type safety is one of the most important things so that's basically it I really hope you guys enjoyed it if you enjoyed it please leave a like down below and comment what you want to see next subscribe because I'm putting a lot of effort into this channel um I came back I just hit 200,000 subs and I couldn't be more grateful for everyone um and I'm really motivated to post a lot of videos for you guys so I'm interested to see in the description or in the comments down below uh what you guys want me to make and yeah that's that's basically it really hope you guys enjoyed it and I see you guys next time