TypeScript Tutorial #3 - Type Basics

so the main fundamental difference between typescript and JavaScript is that typescript uses strict types and JavaScript as nots now that means if we define a variable as a string like this then in typescript it will always be a string and it's type cannot be changed later and the same would be true of any other type like numbers billions objects arrays that kind of thing so let's have a look now at some of the basics so the way we declare a variable is exactly the same as we would in a javascript file we just use either let var or Const so we've already declared this which is a string but let's now do maybe a number so let's say let's age equal to 30 now in typescript we don't use integers for whole numbers and we don't use floats for decimal numbers they're not two separate types like in other programming languages instead we just have a number type which covers the whole lot which makes it a little bit easier for us so this is now a number and therefore later on it could not be a string or a boolean or something else and if I say down here let's and we'll create one called is black belt and set that equal to false that would be a boolean and now it could not change into something else so if I came down here and I said okay well let me take the character and that's this one right here which is currently a string we assigned that to be a string if I try to set that to something like a number like 20 notice we get this squiggly line this error right here and if we hover over it says type 20 is not assignable to type string so it's not letting us now change this type but if I then try to change character to another string for example Luigi then it will let me do this we don't get an error so we can change the value of the variable just not the type so it can always be changed to a different string just not to something else like a number or a boolean the same is true and by the way strings in typescript can either be double quotes or single quotes just like in JavaScript so if we try to change the age now to something like then that is gonna air as well and it's going to say that the type yoshi is not assignable to type number so this is a number we can't change it to a string but again I can change that to a different number I could say age is now equal to something like 40 and that would be fine now final it let's do is black belt so is black belt and let's try changing that into a string we'll say yes and oops for a start we've not spelled this correctly is bulk belt should be is black belt okay and we get an error it says type yes is not assignable to the type boolean so if we want to change this to false it still works is black belt and set that equal to or rather true change it to true that's absolutely fine to do so we can't change these types we can change the values of them but not the types and that is the same for any type that we declare in typescript now notice we don't have to specifically say the character is going to be a string typescript uses what's known as inference or it infers the type based on the value we assign it so it looks at this value and says okay this is going to be a string and if we hover over character we can see it says character is a string we can explicitly define what type a variable will be but we'll look at that later on for now this is fine we can just give a variable of value and typescript infers its type now we can also declare what type of variable we expect to be passed into a function as an argument and in typescript we can use either regular functions or IRA functions it doesn't really matter I am going to be used in arrow functions most of the time so let's create a function down here I'm going to say Const and then Sirk and that stands for circumference is equal to a function and this function is going to take in as a parameter the diameter of a circle let's spell that correctly diameter and we're going to return the circumference of the circle based on the diameter and the formula for that is just the diameter times pi so I'm going to say return diameter time's math dots pi so this math object this is built into JavaScript and since typescript just extends javascript basically then it has access to everything that javascript has therefore it can access this math object right here so we're saying we want to return the diameter times math dots pi and that gives us the circumference now down here I'm going to say console dot log and I'm going to log out circ and then pass in something now right now I could pass any value into this function right here doesn't matter whether it's a number or a string or a boolean I could pass in hello if I wanted to and it's not going to give me any kind of error there's no squiggly line right here even though this doesn't make sense now if I save this and then compile this I'm going to say TSC sandbox dot CS and then I'm going to use the watch flag so that we don't have to keep running this to compile it so that's going to compile and it's not going to give me any kind of error and if we look inside sandbox is we still have this function right here and we log it and we pass in this as the diameter which doesn't make any sense now if we go over here and look in the console we're gonna get some kind of error or rather not a number logged to the console so we're not getting the result we want so in typescript what we can do is actually define the type that this must be when we pass something into it and we can do that by adding a colon at the end and saying that this must be a number for example or if it was a string it should be a string or a boolean if it was a boolean right so I'm gonna say this must be a number and now notice down here it doesn't let me do this right so if I save this now because we have an error here it's not actually going to compile and it gives us this error right here it says argument of type hello is not assignable to parameter of type number so we're saying when you call this function you have to pass in a number otherwise I'm not going to compile so now I'm going to get rid of that instead passing a number for example 7.5 the error goes away now it compiles and now we should get the reason we want over here so this thing right here let's take a look at what that looks like in the compiled JavaScript code so hmm doesn't look any different whatsoever it's just that we're passing in now a number and that's correct this check right here that we're passing the right thing the right type of data isn't done at runtime in the browser it's done before we compile right so as we're developing right here we're doing those checks and it won't compile to JavaScript if the wrong type is sent in so now typescript allows us to type check during development like this which leads to cleaner code and less errors in the browser so that's the basics of types in the next video we're going to carry on and look at objects and arrays

Channel: The Net Ninja

Views: 62,299

Keywords: typescript, typescript tutorial, typescript vs javascript, ts, ts vs js, typescript for beginners, tutorial, tutorial for beginners, typescript tutorial for beginners, what is typescript, typescript basics, install typescript

Id: 0DzDqtcxnz0

Length: 7min 35sec (455 seconds)

Published: Fri May 08 2020