TypeScript Crash Course 2021

Key Takeaways

in today's video i'm gonna show you all the concepts that you need to know to be successful with typescript as well as how you can start using typescript right away with react typescript will make you a better javascript developer for several reasons you'll feel confident when writing code fewer errors will appear in your production code it'll be easier to refactor code you'll write fewer tests and overall you'll have a better coding experience in your editor you've probably heard that typescript is a flavor or a variant of javascript add a little bit of spice the relationship between typescript and javascript is rather unique among modern programming languages typescript offers all of javascript's features and adds an additional layer on top of them typescript type system for example javascript provides strings numbers and objects but it doesn't check that you've used them consistently typescript does that the main benefit of typescript is that it can highlight unexpected behavior in your code lowering the chance of bugs if you're new here like and subscribe and comment down below if you'd like to see more typescript videos in the future now that you know typescript is awesome let's go ahead and get started [Music] to get started we're first going to create an empty folder on our desktop let's name it something like typescript finally you can simply drag and drop the folder into your code editor of choice i'll be using visual studio code starting to use typescript is an extremely straightforward process instead of creating a file with the js extension we'll create a new file that ends with a dot ts extension so let's create a new file and name it index index.ts inside of here we can write our typescript code another cool benefit of typescript is that there is absolutely no learning curve if you already know javascript that's because it's a superset of javascript so any valid js is also valid typescript so you can learn it incrementally as you go we can prove that by writing some simple javascript code into a ts file let's start with a simple console.log and then in there let's do hello typescript now the question is how can we compile this code to compile typescript into javascript we're going to open our terminal by going to view and then terminal the command we need to compile our code is going to be mpx tsc index dot ts so that's mpx tsc and then the name of the file that we want to compile okay let's run it and in a matter of seconds you'll see that a new index.js file has been created considering that we wrote pure javascript code inside of our typescript file when compiled it looks exactly the same console.log now that we know that typescript is nothing more than compile javascript with some extra features let's explore those same features that make typescript so powerful the biggest benefit is enormous knowledge that you give to your ide like visual studio code when you use typescript your code editor becomes multiple times smarter and more helpful it lets you autocomplete almost everything in addition compiler can catch bugs in advance which is far more efficient way to refactor code it's better to have silly errors during development than insane errors in production with that said let's start setting up our typescript config file when using typescript you'll often see the tsconfig.json file this file contains some simple compiler options in our case we're going to start with a pair of curly braces because we are in a json file and then in there we'll have just one property which is compiler options make sure that compiler options is wrapped in double quoted strings because we are in a json file our compiler options are going to be equal to an object that's going to have just one property called lib that lib is going to be equal to an array containing two strings the first one is going to be dom and the second one is going to be es6 with this we're simply telling typescript compiler to compile to newer standards of javascript and now enough talking let's explore typescript in action first we're going to discuss implicit types typescript knows the javascript language and it will generate types for you in many cases for example in creating a variable and assigning it to a particular value typescript will use the value as its type so if we do something like lead hello world and that's going to be equal to a string of hello world okay as you can see if you hover over it you'll see that it says that hello world is a string so in normal javascript if you try doing something like hello world is equal to to the number of five this would be completely fine but in typescript if you hover over it it says type number is not assignable to type string you might think that this is unnecessary but this is definitely helpful and it's gonna catch a lot of bugs in my opinion variables should be of one type and they shouldn't be changed because that can cause unexpected behavior so in this case typescript knows that this is a string and it's going to forbid you to use any other type and all of that without adding any extra characters this seems like normal javascript code right now let's talk about explicit types opposed to implicit types you can also define the types yourself doing this is extremely easy let's say that you want to create a variable let first name is going to be equal to a string of john and let's say that john has the age so we can say let age is equal to something like 30. with this we just used implicit types but if you want to define types yourself you can say colon and then specify the type in this case we're going to say the first name is of the type string and age is of a type number this is how you would do it in typescript and as before if you try changing the first name to something like a number that isn't going to work same thing if you try changing the age to something like a string it says type string is not assignable to type number and it says type number is not assignable to string so it immediately tells you okay this variable has to be a string and this one has to be a number so just to repeat the only thing you have to do to define a type is to add a column and specify the type that's it in typescript you can use a variety of different types some of the most commonly used ones are boolean number string array tuple enum unknown any void null and undefined as you can see most of them are basic variable types that you can use in javascript every day tuple and enum might be new to you but don't worry because we're gonna go over them right now tuple allows you to express an array with a fixed number of elements whose types are known but don't need to be the same for example you may want to represent a value as a pair of a string and a number so let's create that type we can say type and let's do something like string and number this is going to be the name of our type and you can simply define it as an array and put the types right into it so as you can see our type called string and a number is an array where first element in that array has to be a string and the second one has to be a number so if we were to declare a variable of that type we would say something like let x type of string and number is equal to an array and then there we can say something like hello and the second thing something like 10. this is a proper variable using the type string and number now if you tried assigning a different value to the second element something like hello world you're immediately gonna get an error that says type string is not assignable to type number and simply put that was a tuple next on our list we have enums enum is definitely a helpful addition to the standard set of data types from javascript in languages like c-sharp and java an enum is a way of giving more friendly names to sets of numeric values enums allow a developer to define a set of named constants using enums can make it easier to document your intent or create a set of distinct cases right below i'm going to just paste a usage for enums let's say that for example you have continents these are going to be constants and you want to have them all in one reachable object of sorts you can do that by saying enum continents and then use this object like structure by default if you don't specify anything the first thing in an enum is going to have a value of 0 following by 1 and so on so these are self-incrementing values so why is that useful if you want to set something like a chosen continent on a map to africa you don't have to say choose to you can say choose continents.africa which is going to be equal to 2 and in that way your code is more descriptive if you used redux before then you might already see a purpose for this in actions we have a lot of types like do this do that and they have all of their string names with enums you can specify the names like this and then you can be sure not to miss one character in a string anytime soon again typescript helps with that this auto-incrementing behavior is useful for cases where we might not care about the member values themselves but we do care that each value is distinct from other values in the same enum this also might be a good place to check how the typescript compiler works let's try to compile our enum by running the mpx tsc index.ds if you remember correctly this is going to create our javascript file as you can see our typescript code got compiled down to something that javascript can understand but don't worry you don't need to know this syntax this is just how our typescript is being compiled to javascript with that said let's with that said let's continue exploring one of the most useful things when it comes to typescript are interfaces to create an object which includes properties of name which is a string and an id which is a number you can use something known as an interface we define interfaces by saying interface and let's name it something like user usually the convention is to use a capital letter then you put curly braces and in there you can specify the types of all the properties so let's say that our name is a string and our id is going to be a number one difference from javascript objects is that we use semicolons here not just columns now that we have this interface we can declare a javascript object that conforms to the shape of your new interface so let's do something like const user and we can say user is type of our user interface our user is going to be equal to an object that has the name of john and let's make it have an id of something like zero as you can see our user now belongs to the type of user if you try adding another property that doesn't match the interface you provided typescript will warn you so if you try adding age of 25 as you can see type name string id number h number is not assignable to type user object literal may only specify known properties and age does not exist in type user typescript is really descriptive of what you need to do so we cannot have an age property in our user with typescript you can also create complex types by combining simple ones so we can call that composing types composing multiple types is called a union with a union you can declare a type that could be one of many types a popular use case for union types is to describe the set of strings and numbers that a value is allowed to be for example we can have a type of window states and those window states can be open and then we have one straight line it's not an or sign it can also be closed and our window can also be let's say minimized these are all the window states it cannot be anything other than this so if you were to declare a variable const window state and then you say that window state is of a type window states and you make it equal to i don't know this is not a window so that's a random string type i don't know this is not a window is not assignable to type windows states this might seem trivial now because you wouldn't make a mistake like this you would just type open or closed or minimized but in bigger applications this can really save your life because sometimes you're going to use strings or numbers or past variables that you don't know what value needs to be for them this is going to help you let me provide you with a few more examples of unions we can also say lock states and lock states can be equal to let's do something like locked or it can also be unlocked finally another example is let's do odd numbers under 10. this is really descriptive and let's make it 1 3 5 7 and 9 right odd number under 10 can only be one of these five numbers so if we create a variable called odd and set it to odd number under 10 of course we cannot make it something like six as you can see that results in an error but if you do something like 5 or 7 or 9 that is completely fine unions provide a way to handle different types too let's say that we want to create a function that gives us the length of something well first we have to think what can we get the length from strings have length right but so do arrays so let's create a function const get length that can take in a string or an array of strings so we can make this an arrow function and then inside of params you can specify something like a param and there you can say of which type can this parameter be so we can say something like a string or and then this is how you can declare an array of something string and then array sign this here is not a string type this means array of strings if you want to create an array of numbers then it would look like this or if you want to use any that means an array of any types then you would use this but in this case let's keep with strings and then what we want this function to do is to return param dot length now if we tried calling our function get length with something like a string of test then that would be four right we passed in a string we set string that length and this has four characters so that is four if we try the same thing with an array something like this where we have an array and that array has two elements test and test one the result would be two right array that length returns two calling our function in normal javascript and passing a number as a parameter would be completely legal so something like get length and then in there we pass the number 5. this wouldn't cause any issues or syntax error in plain javascript but if you think about it calling to that length of a number would result in an undefined and it will potentially break your code so if you try doing this in typescript it immediately warns you of that it says argument of type number is not assignable to parameter of type string or an array of strings and this error just saved you from all the troubles that you would get later on pretty useful right especially in large applications so far you'll learn how you can start using typescript and hopefully you can continue learning it by yourself by reading the docs before the end of this video i've prepared a short little tip so you can start using typescript in your react applications right away to do that we're going to create a new folder called something like react typescript and we're going to drag and drop it into our visual studio code we're going to open up the terminal like before if you've previously installed create react app globally it would be best if you uninstall that package you can do so by running npm uninstall g create react app after that you'll be able to run a new command which is mpx create dash react dash app dot slash and finally and finally the flag of dash dash template typescript this is going to create the entire react folder structure but optimize for typescript let's wait a few minutes for it to finish and i'll be right back our installation is done and if you take a look into the source folder you can see that instead of app.js we have app.dss app.test.dsx and we have an index.dsx everything is using typescript although you might not see a lot of changes this is a great way to start using typescript in your react applications this is going to be the end of this video i hope you learned something new about typescript which is an emerging technology right now and there are a lot of jobs for it to make sure not to miss the next video like and comment on this one and if you haven't already make sure to subscribe and more importantly turn on all notifications by clicking the bell icon stay safe and see you in the next one [Music] you