in a series of um learning react native with the intention of going to mobile development. Um we touched on javascript before, I'll kind of assume that, you know, most of the basics of javascript, kind of the syntax and how it sort of works. Um and today we're really going to be getting into typescript and you might be asking yourself like what the hell, I just started javascript, we just did some javascript, what is typescript? And why are we switching all of a sudden like back to back? Um basically typescript is under the hood, essentially just javascript. So the switch that we're making is really not much um you'll kind of be able to get the hang of it um pretty quick and at a certain point you kind of forget that there's ever been a difference. The real the difference between them is that typescript is javascript but typed as kind of evident in the name. Um and so what this means is if you've ever worked in C or java or kind of a more more basic programming language, um you're used to when you're declaring variables and when you're calling functions um you're going to be saying, okay, well what kind of variable is this going to be? Um So you might have to say like, oh I'm going to declare a variable, it's going to be a string or oh I'm going to declare a variable, it's going to be a bullion um Yeah, it's a bit laborious at first, especially coming from javascript, which is a very free world of just being able to get in there and kind of get the code on the page. Um and so there's a little bit of an upfront cost of having to obviously do stuff like that. Um But the benefits really outweigh that sort of initial bit of work because especially as you're working on teams of more people and kind of, your code is being used by multiple people, it's it's just really helpful to be able to say like, hey, I'm making this function um and no matter where you're calling this function from in the file system, you're going to be able to see that you're supposed to be passing in some variable with the strength and you're supposed to be passing in some variable that is an array of objects of something and it's basically just a way to kind of keep everybody accountable knowing what they're writing when they're writing it. Um and so it is a bit annoying at first, but I promise it gets a lot easier and you're kind of learn to love it in a way. Um It's also just increasingly popular um pretty much every company that's working in, especially the web and mobile space has been using javascript and it's now switching to using typescript. Um It basically just saves so much time down the road of bugs and all of these things. Um Anyway, sort of a short intro kind of arduous and long, but let's get into it, okay, so when you're first kind of getting introduced to this, especially if you have the S code or you don't use the S code much. Um I always suggest using Rebel it um which is basically just an in browser um like compiler for all sorts of languages, it basically will just make your life a lot easier moving forward. Um That way you don't have to do things like installing a compiler. Um so when you want to learn typescript, it just basically puts the barrier a lot lower. Um so you'll go to replicate, you'll just sign in with google um signing with GIT hub would or whatever you want to sign in with. It might ask you a couple questions, give it what it wants, just get past that and then you'll just come and you'll create um create a new Rebel and it will basically just set up everything where you will have your editor on the left here and you will have your console on the right and then um you can just put whatever you want here, type whatever code you want, pretend that's in code and it run and it spits out whatever happens under the console, it will just make your life a lot easier. Um one quick thing to note is that replicate. Very, very forgiving with its typescript. Um Honestly a bit detrimentally forgiving. So it will let you do pretty much anything even though it violates a couple of rules in typescript um so when it gives you squiggle ease and when it gives you um warnings um I would really pay attention to those because when you're working on an actual project um the compiler won't be as forgiving. Um but anyway, so I'm going to be working in the s code um so that it sort of sinks with the podcast um a bit easier, but anything that I'm doing any time that I run something down here, um you're basically just gonna be doing that and you're going to be running it up here. We won't be hitting running too often in the beginning here because we're just really going to be going over basic syntax and stuff, so I'm going to make a new file, I'm going to call it um I don't know, into two types. T. S so instead of Js it's T. S. Javascript and typescript going to be pretty much like that, where the changes are quite self explanatory, so mhm basically um in typescript there are three sort of baseline types um you might be used to other languages where there's more typescript tries to make things as easy as possible if there's only three. So um as you might expect um one of the first ones would be something like a string, so if I have a variable called my string um Normally you would just do this and you would set it equal to this now this is technically how you will generally do things moving forward. Typescript is like a little bit aware. Um and it knows like this is clearly going to be a string because you're defining it as a string, so this kind of behind the scenes will do the work of declaring that this is now a string. Um that being said um I'm going to be overly redundant um Just for the sake of kind of learning this and we'll see that the syntax of typing, this will be applicable later in situations where it's not implicit like here. Um So basically the general um way of typing things is before the equal sign, so everything on the right of the equal sign is what the actual variable is going to be. Um here on the left, we're going to say like let my string or whatever your variable name is. Um and we're going to say colon and then we're gonna put whatever type it is. Um So basically I like to think of it as if you're just kind of writing in like a normal sentence, not in the world of programming, um but you will have like this is that and the way you kind of denote that in english is just with a colon. And so we're going to say I'm going to let my string which is a string be equal to this, so it's relatively basic um you will kind of get the hang of this pretty quickly. Um But yeah, so evidently the first one is the strength um Mhm. So the second one that we're going to do um is going to be numbers. Um Now in other languages you might be used to numbers as integers and floats and long floats and all of these sort of things, typescript. Very simple, it's a number and then they just call it a number, so I'm going to just say that my number is going to be my name. Um it's going to be equal to some number and then here we're going to say, okay well this is going to be of type number. Um So it's not it's not float, it's not any of those things, it's just numbers. And so it's pretty simple to kind of wrap your head around. Um And then only one more to do um is going to be Julian's, so this one is going to be a type boolean um and it's going to be equal to either true or false or anything that's truth or falsity. Um So these are really the three base variable types. Um you're never really gonna use anything other than these and everything else is going to be a compound on it when we do stuff like arrays and objects which are going to come up in a couple of seconds. Um So I would kind of do a quick little check in um see where we're at. Does this make sense. Does the syntax of this kind of make sense? Um I would kind of try and explain it to yourself like a sentence. Let my boolean which is a boolean be equal to true. Um It's kind of like how my brain reads it as I'm writing it and I find it's really helpful for just remembering syntax at first. But yeah, okay, so off of that, we're going to talk about a raise, which is kind of a natural progression after you go off of these. So um eventually we'll get into arrays of multiple types but for now we're just going to say I want to make an array and it's going to be full of one type of variable only. So we're going to have my rate, I'm very creative with my variable naming, excuse me. But yeah, so I'm gonna have my array and let's say I don't want to define what it's going to be at first because obviously we could we could just set it equal to an array and we could have all the different numbers in it, I don't know, just spamming the keyboard, but um we could have all of that, but let's say we don't want to do that right now, we just want to say well I'm going to have an array and it's going to be an array full of numbers, let's say. So this syntax is going to be very similar to all the other type languages if you've ever used them. Um basically we're going to say, okay, well my race is going to be an array of numbers, so similar to up there, we're going to have number number, but right now it's being set to one number and so the way that we did note that it's going to be an array of numbers is just by kind of putting this double curly or double square brackets at the end um to kind of say that this is an array of numbers, so um kind of whenever you're defining these, you'll kind of, you'll also just get really used to this syntax here. Um There are ways to define multiple types, like it can be an array of numbers and strings or something like that. Um It's not too much more complicated but we'll leave that for a later time um and yeah, so this would work for numbers um if I just copy, paste it and then change this to another one, it would be the exact same for an array of bullying. Um Okay, so next kind of natural thing that we want to go to Um is going to be objects, objects as you likely know, are kind of the backbone of Javascript. Um 90% of things in Javascript are kind of objects under the hood just doing different things um and so you're really going to get used to declaring objects and so this is going to be a really useful thing. Um but it's also going to be similar to these up here where I'm gonna set it equal to an object and thai trip will be able to determine from when I'm just declaring an object. So for example, I'm going to say that my object, I'm going to set it equal to an object and then in here I'm going to say like cat and then that's going to be, let's assume I'm making an object for different animals and sounds and dog is going to be a wolf. Um So this is pretty obvious for typescript to be able to determine what is this object that I'm making and what are the types of the variables that are inside of it. So technically we don't need to add this, right? Like just like up here, this is completely redundant, you can get rid of it, it doesn't matter. Um but if we were trying to kind of obs obs use, I don't want, I'm trying to say ob ob obviously if you skate, but if we were trying to escape, um then we might want to type it and so it's going to be honestly exactly the same as the other ones as you would expect. Um And so we're going to say, well this is going to be an object and then you sort of just declare this as if you were declaring the object. So this is where the redundancy becomes like brutally clear. Um So we're going to have a key called cat and the value is going to be a string and we're going to have a key called dog. And the value is going to be a string as well. Mm hmm. This can obviously be anything this we can add one called age and it's going to be a number. Um, and then obviously it's going to be like you said that this is going to have a number and it does not have a number or or a property called age so that we can add one in it. What kind of let us continue. Um, so again, brutally redundant. But sort of just to kind of get the general syntax of defining that we're going to have each thing and what what type of variable it's going to be. Um, so this becomes a bit more useful um, when we're defining what's called an interface. So this is to make one object. Um, if we're planning on having objects kind of repeat themselves in the future, we're going to have multiple of the same type of object, let's say you had a app and you had a bunch of buttons with similar properties, um, that basically just means that you're, you're not gonna want to have to write multiple of these for like if this was my like button one and then you had my button to and then you're you're out here kind of having a bunch of these after each other and it's just kind of um just a little silly and we want to be a bit more modular than that. So what typescript gives us is these things called interfaces. There's a couple ways of doing this. Um There's another syntax. Other interfaces, interfaces are sort of like the most generic and the most um like normally used. Um and so for our situation here, we're just gonna news center cases. Um so this interface is sort of if you've used other languages um it's sort of like obstruct or um addict I think um where you sort of pre define it and then later on you like declare an instance of it. Um so we're going to have an interface, let's say that we name it like animals and then it's going to be sort of, this is the syntax so we have your interface, what it's called and then what is it? And so from here it's just gonna be regular object syntax. So we're going to have an animal, it's going to have a name, it's going to be a strength. Um it's going to have an aid which is going to be a number and it's going to have, I don't know something else. Maybe furry and it's going to be a bullying, right? So whether it's furry or not, I don't know. Um so basically we're defining this interface called animal and it's going to have a name and age and whether or not the animals free, maybe I should say Harry is a better, I don't know. Um or has anyone that's totally not the point. Um and so from here you'll be able to in the future to find like an instance of animal um that will have these properties. This becomes doubly useful when we're doing things like functions. Um and so we'll get into that now if you're not too used to eat just yet. Um I will do a very quick, very brief overview of the arrow syntax that we're going to use, but basically we're going to have um we're going to define a function, it's going to be a const because we're never going to redefine our function. You can technically use let if you want. Um we're going to say my function, we're going to set it equal to, and here's the kind of juicy arrows attacks on the E. S six were just like everybody is using. Um so we have in here is where the parameters are going to be. Um and I like to sort of read it like you're passing these parameters, it's going to take them shove them through this and spit them out. Um It's almost as if it's kind of like telling you where those parameters are going um There are other ways to define functions in javascript and typescript, um but this is sort of like the go to industry standard right now. Yeah. Okay, so when you're defining a function um a lot of the times that function might be called from outside of the file that we're in, so you don't want to have to go to the file that the function is defined in to see what that function does under the hood to figure out, like wait a minute, did this function return a string or didn't return a number and so we don't want to be doing that, we want our lives to sort of be obvious. And so what you'll do is you will define what the types of the inputs or the parameters are and then you'll define what the type of the return value or the output is. Um So to define the parameters, let's say it takes in two parameters called um I don't know name and age were just going to keep sticking with name and age. Um and so here we will basically say like name and you can see there's even a couple of little things here and it says it implicitly has a type of any um technically you can apply the type any too, um any variable. Um It just lets it kind of lets typescript go away and be like, okay sure, you don't care what this is. Um you're generally going to use that because you're usually gonna know but it's it's kind of handy if you're just trying to get to something else real quick and then you'll come back and you'll actually like change it away from any anyway. Um So we're going to have a name just like before it's going to be a string and age is going to be a number. So this is where this sort of redundant, painstaking typing out string number coming up here is actually applicable. Um So down here the function has no idea what this is. We know that a name is probably a strength but the function won't know that. And so we do have to kind of define that for the function and so we have our name, it's going to be a strength at our age, it's going to be a number. Okay. one cool thing to kind of see is let's pretend we were in a different function um when you start to type it and your editor or whatever you're using tricks, autograph. A lot of the time it will over here have okay, well it's going to expect a name and an age and it's going to be a string and a number. Um So that's where it's super useful, right? Like I could cover up um I could cover up this whole area, maybe I could do, I don't know. Um But if you're not looking up here, it's really nice because now we know what to give it. Of course this is saying that it's going to return void. So that's the next thing we have to do is we have to, you have to declare what this function is going to spit out at the end. Um So where we do that um is sort of right after the parameters um we're going to do the exact same colon syntax here and then we're going to say okay, what is this function going to spit out? And so just as if this was sort of if you kind of replace all this little thing um with just before the colon here, then after the colon is just gonna be what type. And so let's say that this spits out, I mean we could even have it spit out an animal. Um But um for simplicity sake we're in um we will have it spit out a strength let's say so yeah, just for reference I was just double checking what it was complaining about um because I'm defining what it's going to return um and the function is obviously not returning anything right now, it's just sort of saying like, hey you're saying it's going to return a string, it's not returning a string. Um If I if I had something returning a string here there and it goes away, so it's sort of nice, that's something that's really nice is that typescript will always kind of be on your side for making sure that you're not writing books. Um So let's say I accidentally wrote number here, even though it's supposed to be a string, It will say whoa, you're supposed to be returning a number here, A string is not a number and you'll be like, oh that's my bad, it's supposed to be returning a string, I'll change this back to a string. Um So so far that was a lot, it was pretty fast um but I I think it's relatively intuitive as you get going. Um I would definitely play around with these um something I have a link over here, this is just a link to the actual docs for typescript, it will have everything that you need. Um If you're like, oh what is the syntax for this? If you want to figure out what interfaces are, what are alternatives, what is the difference between them? Um This is sort of like a really good place to go. You can just command f where you can search or you can just scroll and read um and learn all about the different ways to do types. Um Okay, so this is sort of the point where um if this we're live, I would sort of give you a challenge to kind of get you introduced to these things, so I would suggest doing that anyway, um I will tell you the challenge and then maybe you can pause um and then do it. So let's say that we wanted to define a function. Um So we want to define a function and obviously we want to spell, we want to define a function that takes in a word and the number. Okay, so word probably strength and the number is a number. Um and then we want that function, The function should return or output um a string that contains the word and times. So basically n would be what whatever the number they passed in um and for an example let's say that I would call my function like word repeat or something and I would pass in um john And I would pass in five and so what I would expect this to spit out is a string that says john john john john john that's fine. Great. Yeah. Okay. I should have chosen a smaller number of them so you can do this if you want. You can add spaces in between them in the return value. You don't have to get that fancy basically this is just to get you used to like okay well how do I define a function? Um and I'm going to make sure that it's typed so that we know what it's passing in and we know what it's returning and yeah, so this is where I kind of would give you five minutes, maybe three depending on how comfortable we are. Um Some people might finish early and want to challenge. I usually tell them that uh maybe make the function taken an object that has the key value, pairs of a word and a number in it. Um You can kind of just get crazy and try different things out. Someone tried to do it recursive lee the other day um I don't think that worked out very well, but yeah, so pause the video, take a minute, try and do this. Um I would try and do it just using the things on my screen um and maybe even try and do it without looking at the screen, but also this is absolutely here to help you out if you want any sort of syntactical help or advice. But yeah, okay, I'm going to assume that you have paused and tried it. Um If not, I'm not judging you black, I hope that you did. Um And I hope that it went um semi decently. Maybe you hit a bit of a snag, but honestly that's how I learn. I don't really learn by doing things right, I learned by doing them wrong a lot of the time. Um So I'm going to walk through how I would do this real real quick. Um And then what kind of wrap up. Okay, so um what did I want? I want any function, So we're going to define a function. Um I'm going to just go off of what I called it here, which was word repeat. Um You can call it whatever you want. I'm just going to sort of build up the scaffolding of a basic function. Okay, so I have my function word repeat. It's going to take in a word and a number. Okay so we're going to take in word and we're going to take in num let's say uh now obviously I'm going to have to make these typed so word is going to be extreme and um is going to be a number now, what is it going to spit out? It's going to return a string that contains the word end times. Mhm. Yeah I could have written that a bit better, I hope you kind of understood just from the example at least. Um Okay so we know that it's going to return a string so I might as well just come up here and I'm gonna say okay well this is going to have a return value that is a string. Um It's going to complain just like I said earlier because there's no return value here yet. Okay so until this goes away we know that we're not returning anything which is kind of helpful so the kind of uh process of actually making a string that does it isn't really the point here. Um So I'm going to kind of jump through it a little bit. I'm going to use V. S. Code to auto complete my for loop, it's kind of cheating but um it's fine. Um So I'm going to have a for loop it's going to have I is equal to zero at first and then I it's going to be less than the number that they passed in so if they passed before it's going to run four times um and then let's just have a variable up here called output. How do you spell output There? We are and let's just set it equal to a blank string. And so this is an example of where when I'm actually programming, I'm not going to declare that this is going to be a string here because that's just completely redundant so we don't need to do that anymore. We kind of we got it away, we got away with it earlier. Okay because we have an output that's going to be a string. Um and in our for loop here let's just say okay well each time we loop through, you want to take that output and we want to add on to it plus equals um we want to add on to it the word that they passed in. Um and so this is just going to loop through however many times and go word word, word, word word um It's relatively simple and then at the end here we're gonna again missed out. Um and we're going to return that output. So finally our curly's go away. If I take this out they come back if I put it back they go away. Okay so we get as far as we know this should work. Arlene. So here's where if you're running this in rebel um it's gonna look like this, you can come down here um you can say okay, well I want word repeat um and I'm going to pass in and here even ripple has it going to be a string in a number so I'm going to pass in jimmy, I don't know And I'm going to pass in the number which is going to be six. Okay. And then if we run this we see nothing happens. Which makes sense because as I just realized I'm not actually console logging anything um at any point in here so we could set this equal to a variable and console log it. I'm just going to do it um in line. Um so basically whatever this function spits out is then going to be in this console log So hopefully now when we run it over here we will see a string that has jimmy 12345 and six times. Okay, sure. Kind of a quick recap. We have our three basic variables, strings, numbers and billions. When we're defining a raise, we're going to make sure that these square brackets are here to kind of say this is an array of these things um objects are pretty straightforward. It's basically the same syntax as defining in our object and that's really evident when we're defining an interface. Um so we're going to name the interface and we're going to have all the properties within it um defining a function in here, we're going to have that syntax of the colon followed by the type. Um And then over here we're going to say what the return of the function is. Um And yeah, and so it all kind of culminated into us writing this function. Um I hope that the function worked out for you, um I hope that this sort of was helpful for kind of wrapping your head around the world of typescript, especially coming from javascript. Um It might be intimidating or just kind of annoying at first, but I do promise that through doing this, you will get so used to it that you won't really see an alternative as a good path. Um But yeah, thank you so much for watching. And yeah, I'll see you guys in the next one.