TypeScript Crash Course

hey guys welcome to another crash course right reversing media this is going to be a video and tutorial on typescript all right so what is typescript it was created by Microsoft and it's a superset of JavaScript so if you don't know what it's superset is it's basically anything you can do in JavaScript you can also do in typescript so it inherits all the functionality of JavaScript and then add some extra features and syntax which we'll go over in a minute another example of superset is objective-c which is a superset of the C language so typescript compiles or trans compiles into standard JavaScript because the browser can't read a typescript file it can only read JavaScript there's a program called TS c that we can use to compile it easily typescript can be integrated into JavaScript products quite products projects quite easily and it was designed for larger applications now of course you could use it with small apps but if you have a very small codebase it might just be a waste extra step to add typescript all right so we know what typescript is but what does it do what does it offer us so first of all it gives us static type checking by default javascript is an untyped language meaning that we don't have to specify variable or type or function types and what I mean by types is a string or number array and so on high level languages like Java they require you to specify your types and although it's an extra step it does have a lot of advantages all right and the great thing about typescript is that it static typing is completely optional so you don't have to do it all right we also get class-based objects with typescript if you have any experience with PHP or Python or Java you've probably worked with classes in object-oriented programming with standard JavaScript es5 you had these prototypes which is kind of confusing and annoying with the new es6 standard we can use classes and typescript is compatible with es6 as well now typescript also makes JavaScript more modular so we can do things like import other files and other modules and components also we get all the es6 features like arrow functions and we can use wet and Const for declaring variables things like that alright so overall it gives us a syntax that's closer to higher-level languages like Java and Scala alright so static type checking one of the main features hence the word typescript we can check and assign types for variables parameters and functions so like I said this is completely optional it's not going to throw an error if you don't use it the only time it's going to throw an error that you do assign a certain type to a variable and then you try to fill it with the wrong type so if you say if you typecast it as a string and then you put a number in it static types also will they'll find and prevent bugs and stop future issues from happening not only that but it makes our code much more readable and descriptive especially if we're sharing that code with others so here are the types we can use in typescript so we have basic types such as strings numbers boolean's which are true/false values and arrays and then we also have to be any type which is just that it can be anything and any kind of type void which is no type returned we have null or undefined a tuple which is an array with a fixed number of elements enum which are enumerated values and then generics which specify the type of constraint ok this is great for a reusable code it's a little more advanced and we might get into it later I'm not exactly sure all right so another huge advantage to typescript is the use of classes so this gives us the ability to use true object-oriented programming in our JavaScript applications we can define classes properties methods we can stop using prototype based objects it provides us with encapsulation and keeps all the functionality of certain resources in one place so if we have a blog on our website we can we can have a blog or a post class and we can keep all that functionality inside of that class and then use it when needed let's see so inheritance we can inherit classes and have subclasses and we can even use access modifiers like public protected and private and this using classes is is alone is a great reason to use typescript all right so as I mentioned typescript files need to be compiled that the browser doesn't read typescript this is done with the typescript compiler which is called TFC so basically it takes to the dot ts files and transpile them into dot j s files and then we can just include those files in our HTML all right so TS c can be installed with npm which is the node package modules so you'll just need to install nodejs on your system you can follow along with this tutorial even if you don't know anything about node so don't worry about that and if you do want to learn more about nodejs I have plenty of videos on my channel on it it also sports es6 or the es2015 syntax so we can use let and const arrow functions and all that good stuff alright so that's it for the slide introduction let's go ahead and jump in and get started with typescript alright guys we're going to go ahead and get started with typescript now before we do anything you need to have no js' installed so if you don't just go to node.js org go ahead and download and install it or if you're on Linux or a Mac you can install it using your package managers just make sure you get that set up alright now as far as code for a text editor I'm using Visual Studio code which is really nice for typescript it is really good highlighting and error checking so I would recommend it but of course you can use whatever you'd like for your text editor all right so we're going to go ahead and get started now first thing I want to do is I'm going to open up a command line or your Mac or Linux terminal and we need to install typescript with NPM okay so I'm going to say NPM where it doesn't matter what path you're in because we're installing it globally just make sure you do NPM installed - gee that will install it globally so that you can access it from anywhere and then you just want to say typescript okay I already have installed so that's why it went so quick now what I'm going to do is go into a folder where I want to create my files I'm going to go into projects and I'm going to create a directory I'm going to call it TS sandbox ok and then we'll go into that okay so we have typescript installed and what we want to do is I'm going to open up the folder in my editor and I'm going to create a file called types dot PS okay ts not Jas I would see I'm just going to close that and from here what we're going to do is let's just say console.log hello from TS and we'll save that and then what we want to do is compile this typescript file into JavaScript so we can say over here T SC and then the name of the file which is type dot TS okay and now if you look over here it can see it created a j/s file which has the same exact thing in it it's the same thing because we didn't put any typescript in the TS file so it's just it's identical but the j/s is what you're going to want to include in your in your application or your website so if we have an index dot HTML file here and just paste this in so just simple HTML and you would want to say script source and you want the type dot JS file okay so if we were to save that and then open it up okay we get our hello world all right and if we open up the console we get hello from TS so all of our work is going to be in the TS file we don't want to touch the GS that's just what gets compiled and what's included in our HTML all right so let's go ahead and write some typescript so let's create a variable and we're going to use wet so let's say let my string and we're going to give that a type of string okay and then down here let's say my strength equals hello world and then we'll simply console.log my string all right so if we save that and we need to compile it so let's go TSC types TS enter and now if we look at types J s you'll see this and it doesn't have that type script in it can I this right here which is typescript it compiles it down to standard JavaScript all right now it can be a pain in the ass to have to do this every time you update so what we can do is we can run the compiler and watch mode so if we do TF c type dot TS - W that will run it in watch mode so every time we save this will this will update and compile it all right now let's see what happens if we change my string to let's say a one okay now notice right away vias code gives us this error says type 1 is not assignable to type string so this editor is really nice for typescript and I know that there's there's plugins you can add to sublime text and add them to do this kind of thing but I think that this is pretty cool that it does it off right off the bat but let's save that and then down here notice that it says the same thing we get that error in our console and if we reload it's going to give us that one it's not going to give us any browser hours because we don't want that anyways this is for the developer not for the user but that's going to throw an error so if we do let let's say let mine um and we'll set that to number say my num equals 22 let's make this back to a string okay then we'll console.log my num save it we get 22 and let's look in the console and we get no errors I'm just going to move this up look okay but if we were to change my num to a string so we already get the error there and we get it down here okay next type we'll look at is boolean so we'll say let my bool set that to boolean set it to true save that true we have no errors if we see if we set this to false again no errors if we set it to one we get an error because one is not assignable to a boolean alright so with these with let's let's say with numbers there's quite a few things that we can use as a number so that an integer obviously positive or negative we save that that's fine if we do an expression so if we can say 5 plus 5 save that that's ok we can do a decimal please say 5.5 that's fine what else we can do a hexadecimal so if we do 0x f 0 0 D that's fine all right and then for string we can do concatenated strings so if we were to concatenate catenate in here a space we can do that and what's console.log that okay so that gives us hello world we could even do a function return as a string so for instance if we take this hello and let's do we'll say hello dot slice and let's say 0 3 save that you can see that works that gives us H EA L because what it's doing is it's just taking the first three characters of the string okay but that works that's that's fine for a string next one we have is any so if we say let I'm just going to call it my bar and we'll set it to any and then we'll say my bar equals five console.log that okay we get five no errors we can say hello that's fine we can say true that's fine so it can be absolutely anything all right so those are the simple data types string number boolean any let's take a look at or raise all right now there's actually two ways to define an array type so let's start with this one we'll say let STR array and we're going to set that to string but look but we're going to put these brackets on the end of it okay so let's let's call that right STR ing that what is this error cannot find the name string oh I put an equal sign okay so what this is saying is that this has to be an array of strings so let's go down here and say STR array equals hello world and console.log that okay we get hello world no errors everything's fine if I were to add in a1 here you'll see that we get an error we get it down here as well okay we can also do let num array and we'll set that to number array okay we'll set that to say one two three num array okay everything's fine if I put string in here we get an error okay it still works up here but we still are still getting an error okay we can also do a an array of boolean so if they let bool array key putting that equal sign there and we can do true true false true okay and that's fine now the other way that we can define these let me just comment these out the other way that we can define arrays is we can say let string array and we can do array and then put in our angle bracket angle brackets and say we want this array to be a string or strings okay I notice that we're not getting an error here we can do the same thing for the other ones so this will be num array so number and we can do bool array set that to boolean okay no errors there everything is good so let's now look at a tuple which is basically an array with a defined number of elements so let's say let will say string num tuple and we're going to set that with some brackets and then we'll say string number so basically what this has to match is an array with a string and then a number so down here let's say string num tuple let's set that to out see we'll say hello and four okay notice that ever went away save it everything's good if we were to change this to a three we still get an error and if we change this to a string we get an error because it has to match this exactly okay now what happens if we do match it like like that and then we add on to it notice that we're not we're now not getting any errors this is fine the reason for that is once you pass that initial string number pattern you can put whatever you want it's done a union okay which is a little weird but that's how it works okay so that's a tuple let's see let's look at void undefined and no okay so if we say my void or not let my void and we'll set that to void and let's sit and we can set it here as well whoops and then let's log my boys what I need to change the batteries in this keyboard all right so log that and we get no so void can be now let's see let's try undefined that work yeah it looks like that works too but if we set it to let's say 1 we get an error okay there's also no and undefined types so let's say my no and my undefined okay so it looks like undefined is okay for all of these let's see oh wait we didn't change this now undefined okay so it is okay if we change this to null that's good let's try changing this one to know and that works as well okay so that's going to be it for ten types of variable types I now want to look at functions so I'm actually going to create a new file for this so let's create a file called not types function dot TX okay and we'll close up types and I'm going to stop the compiler because we want to change it now to TS functions TSW all right and let's include that in our HTML there's not a lot of purpose to having this eight this browser opening and including it in the HTML but what the hell all right so functions so let's create a function here something very simple we'll say get some okay so this is a function that's going to take two numbers and add them so it'll take a num 1 num2 and then we just want to return num1 plus num2 ok so let's use that little console log get some and let's say 1 & 4 ok save that gives us 5 up here we have no errors obviously because there's no type script yet so with functions we can we can add a type to the parameters as well as the functions return type so let's say for the parameter num1 has to be a number num2 has to be a number okay and then the function itself the return value also has to be a number okay so if we save that everything's fine but let's go ahead and let's try and return a string so we'll get rid of that and we'll return hello and you can see the error hello is not assignable to type number if we save it we get that our down here as well okay so if we try to go right here and enter a string we get an error okay assignment argument of type hello is not assignable to parameter of type number save it gives us the same error here okay so you can see that this is this is making our code much more strict and just much cleaner in general now let's uh let's comment this out and let's create a variable called mice some and just going to set this variable to a function okay so function same thing it's going to take in num1 num2 and let's same thing return num1 num2 and then we could simply console dot log my sum and we'll pass in three whoops three and five okay we reload we get eight so let's add to this number I could have just copied and pasted what I had up there but whatever alright actually no you know what I want to do is I want to say any because what I want to happen is I want to be able to put in this a number or the number as a string type with quotes around it so I wanted to accept any but I want it to return a number like this okay so what we can do here is we can test to see what type what type of values these are so let's do an if statement and we'll say if type of num1 is equal to a string then what do we want to do we want to parse it as a number as an integer so we'll say num1 is then equal to parse int which is a function that's going to parse a string as a number and we'll say num1 okay and then we'll do the same thing for num2 - copy that we'll see if num2 is a string then we want to set num2 to parse int num2 and then we can return that so now if we save that everything's okay and even if I go when I change this three to a string of three you'll see there's no error here and everything's fine okay so this now accepts strings and numbers but still returns the number all right so let's create another function here I'm going to just comment out the the log and let's create a function called get name so this is going to take in a first name and a last name and we're going to set these to the string type and we want this function to also return string all right and notice that there's an error because it's not returning anything which obviously isn't a string so let's say return first-name and then what we'll do is just concatenate a face and then last name and let's call it down here we'll say console dot log get name and we'll say John Doe save that we get John Doe we get no errors everything's okay now if you want you can make these optional so for this last name if we put a question mark right here that makes this optional so if we get rid of this now we're going to get an error while not an error but we're getting it John undefined so what we can do is we can check for to see if last name is undefined it'll say if last name is equal to undefined then let's just return first name okay so then we just get John all right let's see what else does I want to do we can also make a function return void which is basically not returning anything at all so let's say function my void and let's say : void and that's okay because it's not returning anything no errors if we say return 3 we're going to get an error saying 3 is not assignable to the type of void all right but if we just do return that's okay as well all right so those are functions so you can you can add types to your parameters as well as your return value okay so let's save that and close that up ok I'm going to create another file here and we're going to look at interfaces okay whoops I said Jaya such BTS TF and we're going to stop this and we just want to run this on interfaces TF hello running okay and must be running all right and then in the index will change functions to interfaces all right so what we're going to do here is create a basic function we're going to call this show to do and we're going to pass in here to do and say that this has to have a title that's a string and then have to have text which is a string okay then we'll just console dot log and let's log to do dot title and we will concatenate that and say to do dot txt okay and then let's say show to do and we'll go we'll create a variable here called my to do and set that to an object say title trash and text take out trash okay and then we'll pass that in here like that save it a three load and we get trash take out trash so what we can do to clean this up is create an interface all right now I'm going to copy this I want the reason I don't delete this stuff is I want you guys to be able to have it for reference so I know that I repeat myself sometimes here but what we're going to do is create an interface and we're going to call it to do and we're going to say that this has to have a title likho string a text that's a string and then down here let's paste in that show to do and instead of doing this messy crap we can say to do set that to the interface of to do okay and then we'll just grab that let's grab that and this save it reload and there we go okay no errors if we were to change this title to let's say a 1 a number we get an error see here it says the types property title are not incompatible or are incompatible type number is not assignable to the string what else is a is not assignable to parameter type of to do okay so this is how you can create an interface so this looks a lot better than this crap up here okay it's basically creating your own type okay so instead of saying you know to do being a string or an array or whatever you're saying that you want it to be a custom type of to do open let's change that back okay so that's an interface now the last thing I want to look at is classes okay so let's go over here and create a new file called classes dot TS close that up and then we'll change this to classes stop this and we'll say TSC classes alright so if you know Java PHP Python any object-oriented programming language and you've worked with classes this should be pretty easy to you basically the same syntax okay so we're going to say class we'll create a class called user so a class can have properties and it can have methods okay a property is basically just a value a key value pair and then you have some methods which are just functions inside the class so let's give this this give this class of property of name and we're going to say this name has to be a string email which has to be a string and then age which has to be a number okay those are the properties of our user now inside of a class you have something called a constructor okay this is a special kind of function or method that runs when you instantiate an object with this class so when you create a user this is going to run and what we want to be able to do is create a user and pass in this stuff here and have it added to these properties so the constructor will take in a name which will be a string email which will be a string age which will be a number and then what we want to do is assign these to these properties so we do that with this name when we use this it pertains to this class so we want this class name property and we want to set it to the name being passed in same thing with the email same thing with the age all right and then let's just do a message here we'll just say console dot log and we'll say user created and then we can just concatenate this dot name so that's a class and what we want to do is create a user object so to do that we can create a variable let's say let we'll call it John so let John equals new user all right now I'm going to pass in those three things it's name is email and his age okay notice the error thing went right away so that's going to create a new user let's go ahead and save that and if we reload here you'll see user created John Doe alright so we have a class with our static typing something you definitely can't do with regular JavaScript now with es6 with the newer standard you can have you can do classes but you can't do the static typing as far as I know now if we wanted to get let's say John's age we could say console console dot log john dot age so if we save that reload you'll see we get 34 now we can make it so that these can't be accessed from outside of the class by adding an access modifier so if we say private what kept will stay private to all of them and we save that if you look down here property age is private and only accessible within class user so we can't do this and you'll see we get the error here as well now if we say for age public then it works okay we also have protected which means that we can't access it from outside the class but we can access it from any class that inherits this one okay because you can use class inheritance so let's take a look at inheritance I'm going to remove these and what we're going to do comment that out for now we're going to create oh a keynote before we do that let's look at methods okay I want to create a method in this user class called register ok and all this is going to do is just console log and it's just going to say we'll say this dot name and then we'll concatenate is now registered so to call that let's make this live again and then we can say john dot register save it and now you can see John Doe is now registered we can also make these private save that you can see we get the error saying register is private and only accessible within the class so we could only call register from within this class all right so now let's do a little inheritance so down here I'm gonna I'm gonna create another class called member and then we're going to say extend user okay so this is a it's inheriting the user class and I'm going to give this a property of ID which will be a number okay so a member ID and let's create a constructor now we want to pass in here the ID which will be a number along with the the fields of the class it's inheriting so let's grab these and place those in the Constructors must contain a super call okay so the constructor of this class has to have a super function and that's going to take in the properties of the class it's inheriting which is named female and age okay so now those errors go away and then what we'll do is set this dot ID to ID we don't have to do this dot name equals name and all that stuff because we did that up here and then we use the super so this is essentially doing this for us all right now if we want to let's say have a pay invoice function down here what we could do is we can say super dot pay invoice and then we can put that up here and in the classes inherits so okay notice that now that error is gone and up here we'll just console.log and let's say this dot name wait that shouldn't be in quotes so this dot name and the mole concatenate paid invoice all right so now down here let's create a member so we're going to say let Mike and we're going to give them a type of user and we'll say new member and then we want to pass in the ID which will say one his name which will say Mike Smith email and age all right so let's save that and now we get user created Mike Smith because he is a user but he is also a member so we can call pay invoice will say Mike dot pay invoice save that and now we get Mike Smith paid invoice alright so I know this might be a little confusing but I just wanted to make sure I go over all of it the last thing I want to do is create an interface for our class alright so let's say interface we call it user interface and we know that it needs a name which is a string email which is a string age number we also need to include our functions so we have a register function and we have a pay invoice phone okay so now we can say class user implement user interface okay and let's save that and everything works out okay all right so that's going to do it now there are some things that I didn't cover but we covered all this all the static all the types functions using types and parameters and return values interfaces classes inheritance if you want to keep going and you want to learn more and you want it we want to go a little slower I do have an edge ilanics course on typescript which I'll put a link in the description all right so hopefully you guys enjoyed this if you did please subscribe leave like whatever you can do is fine and I will see you next time

Channel: Traversy Media

Views: 274,759

Rating: 4.942265 out of 5

Keywords: typescript, typescript tutorial, static types

Id: rAy_3SIqT-E

Length: 46min 8sec (2768 seconds)

Published: Tue Jan 31 2017

Reddit Comments

[u/fail30onMe]

Is this video still up to date? Typescript has changed a lot during the last 2 years... Right?!