TypeScript Crash Course 2021

[Music] this video is sponsored by stream stream makes it easy for developers to add real-time chat and activity feeds to their applications stream takes care of the hard things such as hosting scaling and security so developers can focus on what matters which is building high quality apps in as little time as possible using one of their many front-end sdks users can add a fully customizable production quality chat to their application check out their sdks for react react native flutter as well as native android and ios so click the link in the description or visit getstream.io hey what's going on guys welcome to my typescript crash course so this course is for absolute beginners that want to learn what typescript is and learn how to use it and we're going to start off with some slides and then we'll jump into vs code and we'll start to look at typescript and some of its features so let's start off by defining what typescript actually is so it's an open source language that builds onto javascript by adding some extra features so it's what's called a superset of javascript meaning it's everything that javascript is plus some other features the main feature or reason to use typescript is to add static types to your code which i'll talk about in the next slide and using types or any typescript features is completely optional you can create a dot ts file which is the extension that typescript uses and you can have just regular javascript in that file and it'll work fine and the reason for that is all typescript files get compiled down to regular javascript so i'll talk more about about compiling in a few minutes as well typescript can be used in the front end with vanilla javascript as well as any framework like react or view it's actually included by default with angular or i should say angular 2 plus and learning angular was actually my first experience with typescript and then it can also be used on the back end as well with nodejs and as far as features obviously the biggest feature is having static types but you also have most of the features that are included in es6 es7 things like classes arrow functions etc now these days you don't have to use typescript if you just want to use classes or arrow functions because all that stuff is already included in javascript after es6 was released the main reason to use typescript is to add static types to javascript so let's talk a little bit about what that means now in programming you have dynamically typed languages and you have statically typed languages so dynamically type languages like javascript the types are associated with runtime values and not explicitly named in your code meaning that if you create a variable let's say called name and you assign it a value of brad a string value you don't specify in javascript that that variable is a string in statically typed languages you explicitly assign types to variables whether that's a string a number or a boolean and function parameters and function return values can also have types as well so you would declare that same name variable as a string now some examples of statically typed languages are java c c plus plus rust golang and some examples of dynamically typed languages are javascript python ruby and php so if if you're coming from uh or if you know java c c plus plus uh or any of these other statically typed languages this should just come really easy to you and you should understand it pretty well now there are some pros and cons to using typescript so i want to talk about those and i'm mostly looking at this objectively i can see the points of both sides as well as with all my other crash courses they're there to teach you not to persuade you into you know using something or not using something so as far as the pros typescript makes your code more robust as all your variables variable types are defined this also allows you to easily spot bugs at an early stage that you may have missed if not using types apparently research has found that typescript detects about 15 percent of common bugs at the compile stage predictability also a plus if you define something as a string it stays a string and this helps things just run as initially intended readability is another one especially if you're working with multiple developers your code is more self express expressive and descriptive typescript is also very popular and there's a good chance that some of the jobs that you'll apply for will be using it according to the stack overflow language survey it was the second most loved language in 2021 now there are some downsides to using typescript so you kind of really need to weigh the pros and cons for yourself the obvious one is you'll be writing more code sometimes we just want to get things done quickly and cut out any unnecessary code or things that we don't need writing more code also requires you to learn more so obviously to use typescript you have to learn it first which takes time required compilation so browsers don't read dot ts files or typescript files so you have an extra step in there where you're compiling your typescript down to javascript uh the good news is if you're using something like create react app or next.js and a lot of other tooling you can opt to just use typescript and all the it'll be all set up for you to transpile your code down to javascript typescript also gets some flack from java or c developers as they say it's not a true static typing language or statically typed language as it just compiles down to regular javascript which is dynamically typed so some people will say that it gives kind of a false sense of security as well so for me if you ask my opinion i think it's worth learning typescript i'm definitely not someone that will tell you you should always use it in every single project so for me for most of the stuff i work on i do by myself and they're not really really large projects i think where typescript really shines is with larger projects where you're working you're working on them with multiple developers because again it makes your code more self-expressive and you can really see what's going on if you're building a simple react app i just think typescript is it's it's an unnecessary step but that's just my opinion of course you're welcome to disagree with that and i'm sure a lot of people would disagree with that so like i said typescript needs to be compiled down to javascript and when you use typescript your files will have a dot ts extension or they can also have a dot tsx extension for working with jsx like when you're working with react components and i'll give you an example of using typescript with react later so tsc or the typescript compiler is the main tool that we can use to transpile typescript to javascript we can install it with npm or yarn and we'll be doing that soon tsc can also just watch the files and report errors that compile time as well as your ide so many ides and text editors have typescript support such as vs code many tools will also allow you to use typescript without any extra setup such as next.js create react app you can also create or generate a file called tsconfig.json to control how typescript works what it reports and where your files are compiled to and so on and we'll take a look at that file as well all right so that's pretty much the gist of typescript i don't i don't like to spend too much time in slides i like to be more hands-on so let's jump into vs code and let's start to learn typescript all right so the first thing that we're going to do is install the typescript compiler so we can do this with npm or yarn you can also install it globally so it's accessible through your whole system or locally to your project so i'm going to install it globally so since i'm on a mac i'm going to run sudo and then i'm going to use npm install dash g for global and then type script now make sure you do typescript here the command is actually tsc but you don't want to do npm install tsc all right so once you do that you should be able to say tsc and we can say dash v and it should show you the current version and now you have it installed so i'm going to go ahead and close that up and i'm going to create a new file in vs code and i'm going to call it index dot and give it a ts extension so it has a typescript extension and we're just going to go ahead and create a variable here called id set that to a number of five and before i get into all the different types and syntax and all that i want to first show you how to compile typescript to javascript using the typescript compiler i also want to show you how to set up a configuration file and set up our directory structure as well okay before we move on to actually looking at the syntax but here i have just a variable set to five this is just obviously just regular javascript if i want to add some typescript in here and and say that this variable should be a number i can just do colon number like that okay so this is typescript this is not javascript now if i were to take this id let's say later on somewhere along the line in our code this for some reason gets set to a string of five you'll see that right in vs code it's going to give us a typescript error that says type string is not assignable to type number now typescript does do something called type inference where it will infer that this will be a number even if i don't explicitly set so you'll see even if i do that it'll still give me that that error all right i'm just going to put that back and now i want to show you how i can actually compile this to a javascript file so i'm going to open up my terminal and we're going to do tsc and then target the index file because i call it index ts so if i run that you'll notice that i get the same error that shows up in vs code type string is not assignable to type number so it'll show you any errors that you have down here when you compile and it still did go through with with the compilation you can see i have my index.js here and you can see that it's just var id equals five it doesn't have the the number uh type annotation here because this is just javascript you also notice that it uses var and the reason for that is because by default it's going to compile to es5 and that was before let and const were introduced that was introduced in es6 now you can change it in the config file that i'm going to show you in a minute you can change it so that it it compiles down to es6 or absolutely any javascript version that you want so you can also choose to watch a file instead of having to do you know tsc index you can just do dash dash watch index and you'll see it'll start in watch mode and any changes we make to our ts file like let's get rid of this now and save and you can see zero found zero errors and it'll just continuously watch this now when you're just in development and you don't actually need to compile yet all your errors will show within vs code so what i'll do now is let's stop this and i want to show you how we can set up a configuration file and we can do that with tsc then dash dash init so what this does is it creates a ts config file which can look a little bit intimidating it has a lot of stuff most of it's commented out and honestly right now there's not there's not a lot here that you actually need to know when you're getting started but if we look at the compiler options the target is set to es5 so that's why when we compile the javascript had var if i were to change that let's change it to es6 and i'll save and i'm going to recompile except this time i'm just going to run tsc and i'm not going to specify the index file what that does is it will just it'll compile any typescript files that it finds in the project so we'll just run tsc and now if we look at index.js you can see that it uses let it also add added use strict all right so it's up to you on what what version of javascript you want to compile to you can use es5 es6 you can also use this syntax yes 2015 2016 and so on all right and then let's see the module system common js you can change that to es modules if you want uh es2015 and then let's see allow javascript true what this does and it actually tells you over here what each what each value does here or each option does this will allow typescript to be compiled from js files and then check js will allow it to get checked from js files but not compiled um source map true so if you uncomment that'll generate source maps which can be good for debugging what i want to show you here is the outdirect or outdoor and router so typically you're not going to have your ts and js files right next to each other in the root directory typically what you'll see if you're not using reactor or some framework is you'll have a source folder that has your typescript files which is the files you work on and then you'll have a dist folder with your actual project with your javascript files so what i'm gonna do here is under out directory i'm going to uncomment this in the out directory i want to be dist so basically when it compiles javascript i want it to go into dist and then root is where i want my source code i'm going to i'm going to put src for that so we'll go ahead and save that and then over here let's create a folder called dist we can just delete the javascript file because that will get created that'll just get generated again and then let's create another folder called source and let's put the ts file inside source okay so that's our file structure now there's nothing in dist at the moment but if i come down here and i do tsc again it should compile into dist so now we have our source code and our production code separate so this would be your your you know your project for instance you might have an index html in here and we'll just go ahead and don't know we'll just say my website and then you could have your script and that would point to index.js because obviously put an h1 here because obviously the browser doesn't read typestrip typescript files so hello browser hello world so you would have your javascript file here and just to show you if i go now to my index ts and let's just console.log id i'll say id like that now i have to compile it so i can either run tsc i can also do tsc dash dash watch and that will continuously watch it if we look at our index.js that should also have the console log so now if i were to open this index.html i'll just go ahead and open it with live server and let me just bring it over here and let's go ahead and open up our console and you'll see id5 okay so i mean that's kind of a basic workflow again if you're using typescript with react or vue or whatever else there's other there's other tooling that that might that you might be using whether it's create react app or angular or whatever this is just kind of a like a vanilla type script set up i guess but as far as the the rest of this config stuff you'll kind of learn this as you go on i'm not going to go over all this especially since we haven't really done anything yet but um you know like remove comments true if you set that then all your javascript that gets compiled it's going to automatically remove the comments but now that we went over some of the basic configuration and we kind of have a file structure going on here we have our typescript compiler watching down here let's go ahead and start to work with typescript and learn more about types so let's just go ahead and put a comment here and just say basic types so obviously we have a number we also have strings so we can say like let say company and say that's a string okay so that's a string we also have booleans so you might have something like is published set that to a boolean set that to true okay so those are like the main primitive types we also have a type called any which is just that it can be anything so let's say let x and say any and i'll set that to a string and then down here i could go ahead and set that to something else like a boolean and it's not going to complain we're not going to get any errors because we we said that this could be anything and you can also initialize like if we just say let age we know that's going to be a number then we can come down here and say age equals 30 or whatever if it's not a number it's going to throw an error all right so you can just initialize them now as far as arrays go we can set the type of the the values that are going to be in the array so let's say we have an array called ids and we want this to be just an array of numbers so the way that we define the type is we do colon and then the type of the values that we want in the array and then we just want to add some brackets okay so this is just saying that this has to be an array that only contains numbers so if i were to take ids and try to push on to it a string it should give us an error so it'll tell us up here and since we're watching with the compiler it'll also tell us down here so it says type string is not assignable to parameter of type number okay and it would also complain if we tried to put something in here like a boolean it's also going to complain about that you could also do let's just say let array and we could also do any as an array if you for some reason if you don't know exactly what types are going to be in here so we could have a number you know we could have a string so we could use any with arrays as well now we also have something called a tuple so with a tuple you can specify the exact types inside of the array with any yeah you can have multiple types but it could be anything with a tuple you can specify the type so let's say let person and let's say that actually we'll define this first so we'll say person and then we want to define this as a tuple that will have a number it'll have a string and it'll have a boolean okay so we'll set that to let's say one so that's the number then we have the string and then we have the boolean right so if i make this last one here another number it'll complain i'll throw an error that says number is not assignable to type boolean because it's expecting a boolean in that exact spot all right and it has to be in that spot if i trade let's say put the string here and put the boolean here we're going to get an error because it's expecting it in this particular order now we could even do a tuple array so let's say let we'll say let employee and then i'm going to say for the type we want this to be a tuple with a number and a string but we also want it to be an array so we'll add the brackets okay just like we did above and then we'll just go ahead and say employee and let's set that to an array and inside that array we'll have tuples that'll have a number so we'll say one string we can just copy that down i'll say jill all right so that's perfectly valid if i were to put a boolean in one of these then it's going to throw an error okay so that is an array of tuples now we also have unions so if you want if you want a particular variable to be able to hold more than one type you can do that with a union so let's say let id and sometimes ids can be numbers or strings so we could just say string and if we wanted to be able to also be a number we could add a pipe character here and we can say number okay and then we'll set that to 22. and why oh this is going to give me an error because i already have id up here so we'll just say i don't know product pid product id okay so this could be a string or a number we can just initialize it here and we could set it here i could set it to 22 as a number i could also set it to 22 as a string okay so you can use unions for that next we have enums or enumerated type so let's say enum and enums basically allow us to define a set of of named constants either numeric or string so let's say for instance enum we'll call this uh we'll call this direction one and we can assign constants like let's say up down left right now by default the first one these are going to have values of 0 1 2 etc so if i were to console log here let's say direction 1 dot up we should get 0. so let's um we have the compiler running here i'm going to open up another terminal we want to run the javascript file so let's do no let's go into cdist and we'll run node index okay so we get zero right now you can change the values of these so these are going to be numeric values by default if i change this to one then it should make the rest of these uh 2 3 and 4. by default it's going to be 0 1 2 3. so if i run that again you'll see that we get 1. if we console log direction 1 let's do left it should give us three because it's one two three so let's run that and we get three we can also use strings so i'm just gonna copy this and we'll call this direction two and instead of setting these to numeric values we'll set this to a string of up set this to down left right okay so now if i console log direction to left it should give us a string of left okay so that those are enums now i want to talk a little bit about uh objects so let's just clear this up and we'll just say objects so if we want to create a user object for example let's say const user and this user might have an id of one and a name of john all right now if we want to add types for each of these each of these values here we can do that so we can say colon and then we'll say that this is an object type and this object type expects an id which should be a number and it expects a name value which should be a string so now if i come down here and i make this id a string we're gonna get an error okay now this looks a little bit messy so what you can do is you can set up here we can say type user so we can give it a name and then we can say you know the id oops id should be a number and then the name a string and then instead of doing this so instead of having the actual you know the type here we'll just change this to user all right and that should do it if we again make this a string we're going to get an error now there's also something called interfaces which are very similar and you can use them in very similar ways in fact i'd probably use an interface here but we'll get into that in a little bit now you also have something called type assertion let's say type assertion and type assertion is explicitly telling the compiler that we want to treat an entity as a different type so for example if we have let's say let we'll say let cid and we'll give this an any type and set that to 1. and then let's say we want to have customer id and we want to set that to cid but we want it to be a different type we want it to be a number so you can use type assertion here and there's actually two ways to do this two different types of syntax the first is using angle brackets and then we can put the type in here so now customer id should be a number if we say customer id equals true we should get an error that says type boolean is not assignable to type number now the other way that we can do this i'm just going to comment that out we can say let customer id and we can say equals id or cid rather so cid as and then the type so we can say as number okay so that's a second we can do it either way here all right so cid initially has the type of any but then we're setting customer id to that and we're asserting that we want that to be a number so now let's take a look at using types in functions so say functions and we'll use a classic example of getting the sum of two numbers so we'll call this add num and it takes in x and y and let's say we want to return x plus y and by default with our config we're going to get this parameter x implicitly has any type and it's fine if you do like in the global scope let something equal something and you don't give it a type but it will complain if you don't give your function parameters a type unless you disable implicit any which i think is right here no implicit any you can set that to false if you want but it's a good idea to give these types so obviously x is going to be a number y is also going to be a number and we can also give a type to the function's return value so what is this going to give us we want that to be a number as well so we could put that right here okay so we have each argument that gets passed in has to be a certain type as well as the function return value and of course if we want to run this we'll just do a console log and add num and i can pass in one if i try to pass in a string here it's going to give me an error because it has to be two numbers the return value also has to be a number and if we want to run this we get 3. now you might not always have a return value so let's say for instance we have a function called log and let's say that can take in a message which can be so we'll give this a we'll give this a union it can be a string or it can be a number and then for the return what i'm going to do here is just the console log of that message so for the return value it's not going to actually be anything so here we would use the void type okay so this is void and of course if we want to run this we can say log and i should be able to pass in a number i should also be able to pass in a string but i shouldn't be able to pass in anything else i shouldn't be able to pass in a boolean i don't know why you would do this but just just to give you an example all right so that's how you can use types with functions with with parameters and the return types so now we're going to talk about interfaces and interface is is kind of like a custom type or a specific structure to an object or a function and we can actually use it very in a very similar way to how we use this custom type this custom user type object in fact i'm just going to copy this and we'll paste this in here so what we would do if we want this to be an interface is instead of type we'd say interface and inst you just don't want an equal sign here either if it's an interface and we're just going to rename it okay and then down here let's say that user will call this user one and we want to use the user interface okay and it works in the same way we said id has to be a number if i make it a string it's going to give me an error and so on so in this case where we're describing objects i would use an interface over a type i mean it's kind of preference but there are some differences so for instance a type can be used with primitives and it can be used with unions so to give you an example i could say type i could create a custom type called point and set that to be either a number or let's say a number or a string so i'm setting it to a union and then if i want to use that let's say for p1 a variable p1 and i want to use point that can be a number or a string so that's fine you can't use an interface in this way so if i try to do that that's not going to work all right so just want to let you know you can't use an interface with primitives or with um with unions but in the case of objects is where you're usually going to be using them that's what i would choose personally now i just want to show you some other things here let's say we have age which is a number so this is going to give us an error because we don't have age defined here now you might want age or you might want some properties to be optional so in that case you just put a question mark so now that's optional and it's not going to give us an error if we don't include an age another thing you might want to do is have read only properties so right now i could say user 1 and i could take the id and i could set it to something right so i'm setting it to from 1 to 5 here however if i want that to be read only i can go ahead and just specify that up here and then i'm going to get an error and it says cannot assign id because it's a read-only property alright so you can have optional properties as well as read-only properties now we can also use interfaces with functions so let's say interface and we'll call this math func and let's say we want this function to take in an x value which is a number and a y which is a number and a return value which is a number and if we want to use this we'll create let's do an arrow function so we'll call this add and we want it to use the math func interface and it's going to take in x number y number and return value of a number and we're going to use an arrow function here and it's just going to return x plus y okay now if i were to change this and say i want this to be a string that doesn't comply with our interface so we're going to get an error that says number is not assignable to type math func because this has a very specific structure to it okay very specific interface now we might want to do a subtract which uses the same interface so let's call this sub and the only difference is it's going to subtract instead of add but it uses the same interface it uses the the two numbers that gets passed in and the return value as a number so that's an example of using an interface with a function so now i want to look at classes now classes are available in javascript there this ever since es6 they were introduced but i'm still going to go over them and i want to also show you how you can implement an interface with a class so we define a class with the class keyword and then we can call it what we want we'll say class person and classes are used to create objects so we can create multiple person objects using this class now they need properties or they usually have some kind of properties associated with them so we'll have an id of a number we'll have a name of a string and the reason that we're getting these red lines it says name has no initializer and is not in is not definitely assigned in the constructor now a constructor is a method so classes can have properties they can also have methods which are just functions within the class and a constructor will run whenever the class is or whenever an object is instantiated from that class so for example right now i'm outside of the class and let's say i want to create a person i'll just name this variable brad and i can say new person right so that's going to create a new person object in this variable called brad now as soon as i instantiate this that's what this is doing it's going to run the constructor so in here i could say i could do a console log if i want just console log one two three and if i were to run this file we see one two three and the reason is because the constructor ran as soon as i instantiated this this object i could create another object let's call this one mic and if i run this file again we're going to see one two three twice because the constructor ran twice because we initialized two objects now we're probably going to want to assign an id and a name to each of these person objects so what we would do is the constructor would then take in an id we'll give it a type of number and a name we'll give that a type of string and what we want to do what we want to do is take these parameters that are passed in and assign them to these properties and we do that by saying this dot id now that this keyword just basically means this the class that we're in or the current instance so we'll say this id equals the id that's passed in the constructor this dot name and notice the error above went away for id name is going to equal the name that's passed in now we have an error down here because we're not passing in the id and name so let's pass in a number and let's pass in a string and then same thing here this will be id2 and mike mike jordan so now those errors go away and if i want to console.log brad mike and we run this file here we're going to see two person objects now we also have something called axis modifiers or data modifiers so these properties here id and name these are public by default meaning we can access them we can change them so i can come down here and i can say brad.id equals five and that's fine however we can change these to either public so they are public by default but we can change them to private or protected as well so you have three of public private and protected private is going to make it so that you should only access the this this property from within the class you'll see now down here i have an error and it says property id is private and only accessible within the class and not even just setting it if i wanted to just console log it and say brad dot id that's also going to give me an error okay and if i save that and we look at down here in the compiler same error and if i change it to protected we should see the same thing because what protected means is you can only access it within either this class or any class that is extended from this class and i'll get into extending classes in a few minutes all right but you do have the option to use private and protected you can also use public you can do this but it's the same thing as just leaving it off so it's kind of pointless in most situations at least now in addition to having properties in a constructor we can have other methods as well so let's say we want a method called register and obviously we're not going to really register a user or anything so let's just return from this a string we're going to use we're going to use backticks here so we can put in this dot name and then we'll say is now registered and we should be able to call that let's do a console log and let's say brad which is one of the objects that we instantiated and let's call register so now if we go see let's go back here and let's run the file and we see brad traversing is now registered and get rid of this actually we'll get rid of both of these all right so now we have a method we can also implement an interface to this class so i'm going to go up to where we have our user interface and just copy that and then let's go right here and paste it in i'm just gonna rename this to um to person interface i'm trying to just keep all the passcode so you guys can have it i'll put it in a gist or something and let's get rid of the read only on the id so we have id name and then we can also add in our method so let's put in our register method and say that that returns a string and then if we want to implement that on this person class what we do we don't do this like colon person interface we use the implements keyword and then person interface okay so that should all look good now if i were to return a number from this register i should get an error okay so basically it's just telling me that you know register is supposed to return a string because that's what we have in our interface so it's really cool how you can kind of map out exactly what your classes or your functions or objects or whatever are supposed to look like and it just makes your code more robust now i also want to show you how to extend a class so right here we have a class of person but let's say we want to create an employee class that also has the properties of id and name and the method of register but maybe we want to add a position property as well so let's go ahead and say class employee and we want to use extends here and we want to extend the person class and we're going to add a position property that's going to be a string okay and then this is going to just it's just telling us it has no initializer so what we need to do here is have a constructor okay now when we initialize an employee we're going to pass in three things we're going to pass in the id which will be a number we're going to pass in a name which will be a string and we're going to pass in the position which will be a string and then we want to uh basically set those to the properties now the id and name are in the person property that we're extending so we don't have to do this again like this id equals id what we can do is call super and then pass in id and name okay which is basically the same as initializing it like we did up here except we're doing it from the person from the class that we're extending now position does have to be defined or initialized let's say this.position equals the position that's passed in so now we should be able to go under where we define the class and let's say const we'll just say emp for employee and we'll say new employee we need to pass in an id let's say three we need to pass in a name we'll say i don't know sean and then we need to pass in a position let's say developer okay so now we should be able to see we should be able to go like emp dot name and if we run this file we should see sean we should also be able to do register so say emp dot register and it says sean is now registered so even though registered that method is not in this employee class it's in the person class that was extended okay so hopefully that makes sense and this employee class is actually called a sub class so let me just put that here so sub classes get rid of this all right so next we're going to talk about generics which are basically used to build reusable components and they're it's a little hard to just explain so i'm going to just do my best by showing you so we're going to create a function here called get array and this is going to take in an array of items so we'll say items i'm going to give it a type of any so it's an array of any type and it's going to return an array of any type and in here we're just going to return and initialize a new array so this is just javascript initialize new array and concat onto that the items that are passed in okay so that's our function now let's say we want two different arrays we want one to be an array of numbers one to be an array of strings but we want to use this function to create them so let's say let num array and we're going to set that to get array which remember takes in items of any type but we want this to be numbers so let's do one two three four and then i'm going to copy that down and let's do this one will be a string array so str array let's get rid of these and let's say i don't know we'll just do names so brad john and jill okay so we have two arrays built on the from the get array function now i'm able to take my num array and push onto that a string so if i do hello i'm not going to get any errors because our get array it takes in an array of anything and it returns anything so it's not going to complain so what we could do is we could add a generic to this so that we can create an array of numbers that has to have numbers an array of strings it has to have strings based on using this function so for this get array i'm going to go right after the function name and we're going to use some angle brackets here and we're going to put a capital t in okay so this is our type it's kind of like a i guess you'd call it a placeholder and then instead of any we're going to put t here instead of any here we're going to put t here and then down here where we have our number array we're going to add on to this some brackets with number because this we want this to be numbers this one here we want this to be strings so now if we go and we hover over this it should say argument of type string is not assignable to permit parameter type of number so basically what this did is instead of just having any which would allow us to do something like this which we don't want we were able to use the generic here as basically like a placeholder of the type and then we define the type here and same thing if i were to you know string array.push that's fine because that's a string but if i were to put a number in here that's going to give us an error because it expects a string so it allows us to basically create reusable components and use placeholders and then we can replace them with numbers strings whatever whatever data types we want all right so we've gone over you know configuration compiling different types interfaces classes and so on generics um there's there is more to typescript but i want to keep this kind of short and just as a an introduction to the syntax and so on i do want to give you an example of using it with react and when you use create react app which is a popular utility to you know create a boilerplate app you can include typescript by default so i just want to show you that real quick before we end the video all right so i know that a lot of react developers follow this channel so i want to just show you how you can include typescript with react really easily and you can do this with create react app also next.js typescript works right out of the box you just need to rename your files either to ts or dot tsx if it's a jsx file alright so let's go ahead and i just have an empty folder here i'm going to run npx oops i should probably click in here i'm going to run npx create dash react dash app and i want to generate the files in this current in this folder and then i'm just going to tack onto this dash dash template and then i'm going to say typescript so just by doing that it should set up my react project with typescript okay so if we look in the source folder notice that anything that would have been js or jsx is now ts or tsx and our project runs the same way we can run npm start and that should start it up all right so that just opens up regular boilerplate app and in the source folder i'm just going to create a new file let's say we want a header component we'll do header.tsx not jsx and let's say const header and we'll make this an arrow function component okay and then in here let's just return and we'll have a html5 header tag with an h1 now let's say that we want to have a prop passed in we want to have a let's say a title and a color so what we could do is we could say props and we can actually give this the type of props which we're going to create as an interface so up here let's say export interface props and let's say that we want a title and by the way when you do when you use typescript with react you don't really need to use prop types like you would with uh you know with javascript so let's set this to a string so title should be a string let's also we'll have the ability to pass a color in maybe we want the text to be a different color but let's make that optional so remember we can do that with a question mark so that's also going to be a string all right so now we've typed our props and we could go ahead and use that like in here we could say props dot title that would be the output and then we could have style double curly braces since we're doing the inline style and we'll say color set that to props dot color but we want to see if that exists if it does then we'll use props dot color and if it doesn't then we'll use blue so let's export it down here so export default header and then we can bring it into our app tsx file let's see i'll just get rid of all this junk we'll go ahead and import and it's going to be imported the same way so just header from and it's in the same folder so just dot slash header and then we'll just put it down here header and let's pass in um so this should take in a title and you'll see that it says title is missing so title and we'll set that to hello world and we can pass in a color but i'm just going to leave it for now and we can get rid of these other imports so it doesn't complain at us okay so if we take a look uh let's see we need all right so you can see that the header is blue because we said if we didn't pass in the color it would be blue but we can pass in a color of let's say red and now it's red all right so very very basic stuff but as you can see it just makes your code more more self-expressive and robust and and it's really up to you if you want to use typescript like i said i think it really shines with large projects when you're working with multiple people um i think that it makes it more readable and and easier to work with less prone to errors so that's where i think it really works out and it's really useful i'm definitely not a typescript fanboy i don't use it in most projects but if i were to for instance create my own platform from scratch which i would eventually like to do i would most likely use next js um some kind of back end headless cms and typescript but that's just me um so don't take this video as me saying you should or shouldn't learn it i'm just here to show you the basics show you how it works and that's it hopefully you guys enjoyed this video and i'll see you next time

Channel: Traversy Media

Views: 83,783

Rating: 4.9706888 out of 5

Keywords: typescript, typescript crash course, typescript for beginners, typescript tutorial

Id: BCg4U1FzODs

Length: 52min 27sec (3147 seconds)

Published: Wed Aug 18 2021