Transcript for:
TypeScript Course Summary

TypeScript is a programming language based on JavaScript that is becoming increasingly popular. In this complete course, Hitesh Chaudhary will teach you everything you need to know to get started with TypeScript. Hitesh is a very popular teacher who has created over 1,000 tutorials. Hey there everyone, Hitesh here, back again with another video, and I know you are pretty excited about this new series that we're going to get started. This series is going to be a little bit fast-paced so that you can understand what TypeScript is. And I totally understand the excitement, the enthusiasm to learn all about TypeScript that you want to have. The right now the entire world is traumed by JavaScript. A lot of people are loving it, a lot of people are hating it, but regardless of the fact, everybody is writing JavaScript. And there are plethora of tutorials available on JavaScript, including mine and I am also determined to add more videos in those tutorial series. But there is new kit in the town known as TypeScript. A lot of people are loving it, those who start writing the TypeScript just claims that I don't want to go back into writing JavaScript. So what's this all fun about TypeScript? Are we missing anything? Not at all. Today we're starting a brand new series on the TypeScript, and eventually as we go further, you will have the full knowledge and full right-table skills so that you can transform from JavaScript to TypeScript. But before going further there, I would like to just give you an introduction what TypeScript is and should you be even writing TypeScript at all on the first place. There is a lot of hurry in the market that I just want to jump into TypeScript. I don't even want to learn JavaScript, but that is not the case, that is not how it should be started. It should be started with JavaScript, and there is a reason behind it. I'll walk you through with that. And I'll also walk you through that why it is important and why even you should be writing JavaScript at the first place or shouldn't be. That is the big question that we're answering. So welcome to the series on the TypeScript, and we will be running this series into a fast-paced mode. I'll be pushing up a lot of videos. So go ahead, buckle up, and let's get started with TypeScript. So TypeScript, obviously you want to learn it, and everybody knows one thing about TypeScript. I'm pretty sure in case you are living unless and until under a rock, you have heard about that if this is a JavaScript, the classic yellow icon, this is a TypeScript. Often called as the TypeScript is a superset of JavaScript. That means everything that you can do in JavaScript that is already available in TypeScript, and a lot more is available to that. But that is a kind of a true statement, but not accurately being contextualized by a lot of people. Yes, you have accurate statement that TypeScript is a superset of JavaScript, but it's not like it is adding more features to JavaScript. No, it doesn't give you more of callbacks. It doesn't give you more of arrow function. It just allows you to write JavaScript in a much precise manner so that your code faces a lot less error in the runtime. If there is any error, it is already being displayed to you while writing the code at the kind of when you're just typing them out in the your favorite editor, maybe VS code or something. That is where we want to just catch those error and find that we shouldn't be doing something like that. So that is all your TypeScript. It is not going to give you a new loop. It is not going to give you a classes or new modules. It is not going to give you anything new. In fact, all the code that you write in the TypeScript is finally compiled into JavaScript. Not only that, even though your codator might be yelling at you with some squiggly line about the TypeScript code, still you are allowed to compile that code in the JavaScript and it might run with errors, but it might run. So there is a strong thing that you need to understand that it's not like TypeScript is the ultimate way of writing the pure JavaScript and is not going to give you any quirky behavior. It might still throw you around off somewhere and that is exactly what we are going to learn in this series. So first, yes, I understand that you know this statement that there is a JavaScript, there is a TypeScript, it encircles the entire JavaScript. In this series, I'll walk you through all the details and depth of the TypeScript, so don't you worry about that, I'll cover that up. But first and foremost, should you be even learning TypeScript? That is the big question. TypeScript is not about reinventing the entire JavaScript language, it is not. It just is asking that you write JavaScript with a little bit more accurate behavior. Don't just do anything, just try to write a JavaScript in a more precise manner so that errors are less. And I honestly would say you shouldn't be using TypeScript. If your project is just too far long and there are in each file, there are just five or ten lines of code. It is not compulsory that every single place you need to write TSX or TS for TypeScript. I've seen a lot of people who use TypeScript, but all the places they use any, which is a keyword, we'll talk about that later on. If you're using TypeScript, you need to use the super power of TypeScript to make your code much more powerful and much more error prone. And if you're using just TypeScript for the fanciness of writing TS, you're probably not using it correctly. After watching this series, you'll be watching TypeScript in a much more powerful manner. So TypeScript is all about TypeSafety. Nothing more. Just this word. And I'll be repeating this word probably a million times in this entire series that what is this TypeSafety? TypeScript is all about TypeSafety, nothing else. So what is this TypeSafety? Let me give you a couple of code examples. So TypeSafety is nothing that JavaScript allows us to do some odd behavior. For example, I can go ahead and just add two with a string of two, which I shouldn't be allowed to do when it gives me an odd result of 22. This is happening because the TypeSafety was missing. On the very first place, it should have stopped me from doing an addition of number with string. Now it doesn't stop you. It tries to do its own behavior, which I've discussed a little bit in my other videos, but let's just say right now, stick here. So this behavior shouldn't be allowed. That is all a mismatching of the type. If you have been consistent with your type, this error shouldn't be there. And TypeScript allows you to just stop this behavior. That's all it does. For example, let's just say you have null. You're allowed to add a two value to the null. And on top of that, there is undefined. And you're allowed to add a two to undefined and get another thing like two and none. Not a number. This is all not the quirky behavior of JavaScript, but rather your way of you haven't been concerned about the types of JavaScript. There is an explanation in the documentation of JavaScript that what behavior is going to kick in or what behavior is going to superpower and power that. But apart from MDN, we haven't read the documentation of JavaScript, which are being the language specification given by ECMAScript. They are all right here. But the idea is I shouldn't be reading that much on the first place. I should be focused on building my application with the type safety. And that is where the TypeScript comes into the picture. So in this series, you're going to be mastering the TypeScript. So subscribe to the channel. And we're going to be walking through, in fact, rolling coasting through this ride of Type Safety with the TypeScript. I hope you're all excited. A lot of videos are coming in. Get subscribed. And let's catch you up in the next video. Hey, there, everyone. I'm Tashir back again with another video. And before we even move further in the TypeScript, even its installation process, I want to make this absolutely clear that what TypeScript is and what it isn't. In this video, I'll focus on what TypeScript is not. And this will help you to understand TypeScript in a better way. And the perspective of the TypeScript is going to change. A lot of people believe that TypeScript is a new programming language, which honestly is not a 100% true statement. There is a little bit difference in understanding the TypeScript. So let's get our vision clear first. And then in the next video, we'll move on the installation part and the environment setup so that we can start writing TypeScript. But before that, let's clear our perspective about what TypeScript is. In order to understand what TypeScript is, you need to understand is the simple statement what TypeScript does for you. The simple idea behind the TypeScript is static checking. That's the only job. And yes, that's the only one job that TypeScript has got for you. The static checking is something which is present in many languages, especially the languages such as Java or maybe even GoLang. A lot of languages are built in with the static checking. And what does the static checking means that whenever you're writing the code, the parser of the language or the entire syntax of the language is constantly being analyzed by the IDE's. But not in the case of JavaScript. Whatever you write is just okay for the JavaScript. And when the code executes in the browser or in the engine like node environment or anything done, then only the errors of JavaScript are being thrown at your face. And at that time, you just say, ah, that's wrong. And you need to rerun the code itself. But it would be really a great help if there is a static checker which checks my code as I try to write it. For example, I'm trying to access an object which is not yet defined. If something can analyze my code and can give me a hint that that object doesn't exist in the object properties, then obviously it's much more easier for me. For example, when we are trying to add a few numbers and then the one of the number is not a number, maybe a string, then if somebody helps me in giving me a squiggly line that, hey, that is not going to work. So that is great for me. And again, the level of the detail that which one is going to stop you from doing something and not stop you, that's all about the static checking. So just to repeat, TypeScript is just for static checking. It just analyze your code and help you to understand that you might be running into a potential error without even running the code and getting the errors at the runtime itself. That's all it does. So I hope you understand that. The whole job of the TypeScript is simply to analyze the code. That's it. That's all it does. Now on top of that, I'll also walk you through with an example as well that it just checks and gives you hint about that, yeah, you might be doing something wrong. But yes, it is still possible that your code might be giving you a squiggly lines or errors and still you may export this entire code into JavaScript and that might run absolutely well. And I'll walk you through with a couple of more missed things, kind of a misheard concepts about TypeScript that, hey, with the TypeScript, you write less code and it does build the JavaScript code for you. So that is way more code. In fact, reverse is the true. In the TypeScript, you write a lot more code compared to JavaScript and sometimes even I have seen 50 lines of code are being compiled into just 10 lines of JavaScript. Yes, but it is worth it. I'll walk you through with that as well. So first, how the development process works. You write all of your code in ts.ts format, which is a simple TypeScript. When you're building components like React or something, I have seen people use a simple extension of.tsx, which is also totally fine. It has nothing to do. It is just a mixture of TypeScript plus the gsx kind of a syntax. So this is kind of a same component thing. Basically, your HTML is baked into the system. I'll walk you through with that as well. But the whole idea behind the TypeScript is you write your TypeScript code and that code is being transpiled into JavaScript. And there are a lot of fancy words here. It has compiled. It is transpiled. We'll work through with that. I'll give you a brief overview of what is the difference between them, what is the meaning of it and how it is working. You can just simply say at this point of time that TypeScript code is being converted into JavaScript. That is a rather safe word to use right now. And then your JavaScript. And one thing, the most important thing to learn and to know for this video is TypeScript is a development tool. Yep. It is a development tool. Your project still runs in JavaScript. The code that you produce or you send to the production is still a pure 100% JavaScript code. So TypeScript is just a layer on top of JavaScript. As I told in the earlier video, it's a super set of JavaScript. But rather, it would be accurate to say that it's a development tool. It helps you to write better code with less problems with a more scalable and maintainable code that is easily understandable and produces and the chances of producing the error is much more less. But it by no means that it's a standalone language in itself. It's something which is a wrapper around the JavaScript. And yes, there are new keywords here like Union and Interface and a whole lot of them. We'll walk through with that. But understand this very important thing that it is honestly a development tool which helps you to write better code. This might be a surprising for a lot of us, but this is how it works. Okay. Giving you some examples on that, we'll be writing a ton of hands of code. We'll be setting up our own environment as well. But I'll walk you through with those. So this is a TypeScript lang.org. A free code environment that is available to all of us. And we can see on the left hand side, we run the TypeScript and there are a lot of versions of it. And on the right hand side, it just produces a JavaScript code. For example, I can just go ahead and say, hey, I want to do a simple console dot log. And I want to just say, I want to print my name or hello world. That's how it got started. And you can see that the JavaScript part that is coming out. It's exactly the same. In fact, let me just go ahead and declare a simple user. So let's just say we are going to call this one as simple user. This is an object. And in this object, there is a property something like a name, which is going to be my name. And let's just say we also have another property, which is age and let's just say age is 10, fictitious, of course. And you can see that this is exactly what is producing. Now, what TypeScript allows you to do if I just let's just say I want to have an variable email. And that email comes from user dot email. Now, notice here, there is a squiggly line. The error was given to me here that, hey, this property doesn't exist. So TypeScript smartly just go through with your code and tells you that email was not available there. But notice here, most important thing here is although this property was not there, but there is nothing which is stopping me to produce the equivalent JavaScript code. Yes, that is the most important thing. In fact, this might be a little bit surprising to you in the initial first look that let's just say if you go ahead and say that I have a simple number one, which is three. And let's just say if we have a number two, which is three. And if I go ahead and say, hey, let's just call this one as some, that is going to be equal to number one. And we're going to go ahead and say number two. The notice here, if I go ahead and do a simple console dot log and I go ahead and say, hey, give me a sum, you might be thinking that JavaScript or TypeScript, especially is going to just just allow you to do these kinds of things. You can see right now, nothing is doing that. If I run this code, the code is transpiled. We get the same things as 33. Yes, there are ways to avoid this. I'll walk you through with that. But here we can see in the playground, it is working fine. So it is very important to understand in depth about TypeScript that what is allowed, what is not allowed, how we can enhance more of Type Safety in our JavaScript code. And that's exactly what we are going to learn in this video. So again, always remember, it's a development tool. It's yes, there are a lot of keywords and everything that is new in this stuff. But it would be rather much more accurate to call it as a development tool instead of just a standalone language. Because this language is too much dependent. In fact, entirely dependent on JavaScript, it just a wrapper around it. So let's go ahead. In the next video, we'll be setting up an environment so that all of us can write some TypeScript on our own environment. And you can just send this up. Let's go ahead and catch up in next video. Hey, there, everyone. Here, back again with another video and welcome to another video in the TypeScript series. Now, I'm a firm believer that if you show people the code and try to explain the concept within the code and the execution of the code, it's much easier to explain. I've tried it out, tested it out with a whole million student and it works nicely. The another consequence is that if you don't try to write the code and instead you just use the pen pencil, which is a great way of learning. But it takes much more time. It requires, let's just say, 40-minute videos or a one hour, 40-minute video. But what I have noticed is take people directly on the code, try to write the code, execute the code and explain the concept just right there. It brings a more functionality to the teaching pedagogy as well as it's much more easier to understand. And that's exactly what we'll be following in this entire series. Instead of just putting you all in the theory of pen and pencil, which is a good way again of teaching this stuff. But I'm a firm believer of taking you onto the code editor as quickly as possible. Let's go ahead and work with that. So in this video, I'll walk you through that how you can install TypeScript on your system and there are a couple of ways how you do it. Now the way how we are going to start with the TypeScript and the way how we use it in the projects are two different installation of the TypeScript. The first one is a global system installed that we're going to use. This will be helpful for you to understand the concepts of TypeScript. But when you're going to use TypeScript in a project, maybe react project or Angular project, they're an additional TypeScript config file is required so that you can address what kind of settings you want, what kind of things you don't want. So there will be a two different installation. First of all, we're going to focus just on the core system-wide installation so that you can create basic files, understand what is the new thing in the TypeScript, how you can understand it. And then we're going to later on move into the project section where we're going to see how we can config the TypeScript settings so that can help us to produce a better code. I hope that is all clear. For this, now let me take you on to my computer screen and walk you through with that. The first thing that we're going to do is obviously create a new folder and we're going to call this one as simply let's just call this one as TypeScript and why not TypeScript YouTube because that's what we're doing up here. Okay, so TypeScript YouTube is here. Inside this also, I would like to create a new folder and let's call this one as zero one. This is getting intro so let's call this one as zero one intro. So this is the folder. We're going to do everything up here. Now before that, we need to install TypeScript. So installation of the TypeScript is pretty super straight forward. Now let me walk you through with that. All you have to do is first open up your terminal and by the way, all these instructions are also mentioned on the TypeScript website. We are going to study that in a minute. Let me open that up. Just give me a second. So let me go ahead and open up the TypeScript. So here it is. Okay, so here it is. The TypeScript website officially and all the things are available here. And we can see that this is online where NPM, there are lots of ways how you can actually go ahead and install that. Let's go on to the download section and here it says that hey, you can install the TypeScript by saying NPM installed TypeScript. This is a way, but we won't be using this one. Rather, we'll be actually installing it globally so that we can use it wherever we like. Once we are done with that global installation, we have understood the basic concept, then in the project, we'll be using the same NPM installed TypeScript as a dev. I told you, this is a development tool. That's why it's usually installed as a dev dependency. So things will make much more sense as we move forward. So get that. It's pretty easy and same. And again, it's exactly same for Mac, Windows, Linux, whatever the system you're using. In case you are on Windows, I highly recommend to use GitBash, which is Vibera Shell or use PowerShell. So there's a shell available known as GitBash. For Windows, I highly recommend people to use this shell. It gives you the same command that I'm using like CD, LS and all Linux friendly commands. Again, nothing much to do, nothing a hard and fast requirement. Now, the very first thing that we need is nodes. So make sure there is a node installed in your system. If you just say node dash V, it should pop up some number. It doesn't really mean that exact same number should come up to you. Any number is fine. If it is giving us an error, then go ahead on to node website and install node. Pretty simple. Next, next, I agree. Click OK. All those kind of stuff should be OK. Node also gives us a utility of NPM. And we can check out what version of NPM node package manager is given to us. And we have to install that as well. Once we're done with this, then we have to simply go ahead and install the TypeScript. And for installation, it's pretty simple. NPM install and we're going to install TypeScript. That's all what we need. Now, this is what we need, but we want to install it globally so that we can use wherever and anywhere we like throughout the system. And that is why the dash G flag works. Now, this is going to work absolutely fine. In case you are on Windows, make sure you right click and open up your GitBash as an administrator. In case you are on Linux or Mac, make sure you append this with pseudo. In some cases, it is required. As soon as you hit pseudo, you need to enter a password and that's it. Let's go ahead and do this. This is going to ask a password. That's it. And mine is already installed. So, it didn't took much time, but this is all what we got. So now, TypeScript is available in our system. And if I just open up this one here, this actually gives us a unique command, which is TSC TypeScript. Now, there are a couple of other ways of installing it with node package executor and a whole bunch of other things. But the focus here is that it gives us an access to the command, which is TSC. This is the whole which is going to allow us to install, not install, but actually execute the TypeScript file. So, I can go ahead and say TSC and I can hit a dash V to find out the version of it. As long as it gives me any number of version, that is totally fine. Throughout this course, we'll be focusing on the core foundation and fundamental of TypeScript. So, any version beyond this or even this version is absolutely fine. In case you're using any previous version, that is also absolutely fine. Nothing should be worried. These are core foundation. These are the things which never change in the language itself. All right. Pretty basic installation, but I have explained each line by line. I hope you appreciate that. If you appreciate that, make sure you hit that subscribe button. I have noticed that 70% of my audience doesn't do a subscribe button. So, go ahead and please hit that out. Okay. Now, this is all done. So, we have a new folder up here. Let's go ahead and fire up a VS code as well. So, we're going to go ahead and say VS code, Visual Studio code. Should be taking just a minute to get started. And this is what we have. This is a previous iOS dev version that is already installed. So, we're going to just remove this. Get started with the intro and there we go. Yes. Of course, I trust this. Okay. Now, in this intro, all we're going to do is write the very basic hello world, but in TypeScript, we'll be able to compile that into JavaScript so that we can see how that works. So, we're going to go ahead and call this one as intro.ts. And again, make sure you write this as TS. You can also write it TSX, but that's for a component level thing when we want to use or install JSX, execute JSX in the same file. If you didn't understand that, that's totally okay. Make sure you write.ts, which is an extension of TypeScript. Now, VS code will try to give you a.ts automatically as a TypeScript. In case you don't have that, go ahead and install some packages for icons and stuff. Pretty, there are plethora of icons available. You can go ahead and look for icons, material icon to what not. Everything is available. Now, all right. Now, let's go ahead and see that how we can actually write some of the code and convert them into JavaScript. So, the classic, let's go ahead and do a console log and let's go ahead and write name. Make sure you write your name. That would be fantastic one. This is a classic code of JavaScript that has nothing to do with the TypeScript at all. Let's go ahead and create a couple of variables. So, we're going to go ahead and say, let's call this one as number or let's go ahead and have a user. So, same example that we have talked through previously. And let's go ahead and say that this is going to have a name. Let's say this is my name and an age that is going to be 10. Pretty good. And let's just say what more we have email. Well, let's just not put email. Let's just have this much only. And further down the road, we also want to have a console log of something. So, let's go ahead and remove this one and say we want to print out user.name. Now, this is a classic JavaScript. Nothing to do, classic TypeScript. Nothing to do with JavaScript. But this thing whole thing cannot be executed at all in the TypeScript format. If you put this into production or any application, it's not going to work. This is where your installation of TSEX or the TypeScript comes into the picture. So, what you can do is you can simply say TSE TypeScript. And once we have this TypeScript, then all we got to do is name the file. In this case, intro.ts. As soon as I hit this enter, notice this has automatically created an intro.js for me. And the code is exactly same. Yes, the spaces were removed and it tries to align it. This is all what TypeScript does. It converts your TypeScript into JavaScript, no matter what project you are using. This is the exact implementation of it. Now, the only advantages, as I told you, right now it's giving us a squiggly line that it says cannot really clear the blocks go variable and all of that. So, that's the basic. We'll go through with a more detail that it should be a let or it should be a const. Whatever it should be, why is it giving us errors and whole those details? We'll study about that in depth. The only advantage that we get is if I go ahead and do an email, it gives me a gain squiggly line that property email does not exist on Type. So, the whole idea behind TypeScript is it saves me from some errors which I will eventually fall into if I'm writing just code JavaScript. And again, I told you one more time. This is just a dev tool. This is a development tool, a wrapper around JavaScript to make your life easier and safer. Now, again, there is nothing which is stopping me to execute this code. If I go ahead and run this file again, this command again, notice it gives me an error, but still the code works. It says user.email. So, yes, there will be errors, but these errors doesn't stop you from producing your JavaScript as well. Again, there are a lot of settings for that as well. So, again, you get the idea how this is being done. One more thing I would like to mention here is on to the playground. So, if I go ahead and click on the playground on the TypeScript website, you will notice that there is a tab which says settings. Now, in the settings, you can see there is a lot of settings that are available for you. And on top of that, there is a TS config. This is the configuration file that we make while creating a React project or another project. In this, there are a lot of options that you want to include JSX or maybe you want to include the ES next module. What is your target? Maybe ES 2017, 2019, ES next, whatever your target. There's a lot of declaration, a lot of output formatting. How you want to make your code pretty fine? Do you want to have an error, not error, strict checking and all of that? Yes, we will understand them when we'll be creating our TS config file for the project, but I just wanted to give a brief overview that it does exist. And you can see a lot of example. One thing that I forgot to mention in the last video is the same thing that a lot of people believe that with the TypeScript, you write less line of code. And you can just click on example. And let's just say you want to have an example of built-in utility types. And you can see that these are so much of a line of code, but ultimately it generates only this much of a line of code. If you remove the comments, you can see this is the only code that we were able to generate in JavaScript. And we are writing so much in TypeScript. So yes, this is the case. We write a lot more code in TypeScript, but it's a safer code. Quite a lot, quite a lot in just one video. So that's it for this video. Let's catch up in the next one and try to get one by one the details and the nitty gritty of the TypeScript. Let's catch up in the next video. Hit that subscribe. Hey there, everyone. They share back again with another video and welcome to the TypeScript series. So in case you are new along from learning from me or in case you have watched other videos, then you probably know this. So whenever I start a series, I go slow in the very beginning. It might feel like it's too slow, but eventually I pick up the pace with the tutorial so that it's easier for everyone to follow. And we are exploring TypeScript and one more big thing. In all of my videos, I encourage a lot of people to learn from documentation. Surely you can just keep on watching my videos, but the ultimate knowledge that I can give you is how to read the documentation. So throughout the series, I'll walk you through that how you can read the documentation can better at the things so that you can learn things on your own. And we'll be also coding along with that. So this is going to be our very first official kind of hello world. And we're going to see what impact TypeScript can add when we write a simple hello world program. Nothing fancy, just getting started, very basics, very slowly. So let me talk you through and let me bring you up on my screen first. So let's first understand about the types. So as I've already mentioned, TypeScript is all about types and we're going to study a whole lot of types. So the obvious question is what are kind of types that are available in the TypeScript. And trust me, there are many, many of the types are available. For example, you'll be saying me talking about numbers and strings and Boolean, but these are not the only types. Yes, they can be divided into primitive type or the other types or modern types. I honestly say that don't do this kind of division between the categories and types. They are all just types and try to picture them through just one screen that all of them are just types. And just to name others, there are null, undefined and there is a special type known as wide. And there's also objects and arrays and tuples and couple of more types as well, which are available in the TypeScript language. And once you understand and master what are the types which are available and how to utilize them, that's all the TypeScript. That is all the TypeScript is all about. But what I have noticed in a lot of code basis that people use TypeScript, but a lot of time this keyword I have found floating around like here and there. If you're using any as a keyword, that means you are intentionally making your code more wonderful or more like a Java scriptish so that we don't have to worry about the types. If there are a situation where you're using any, that means you are not probably not many, not much sure that you should be either using it or not. And to surprise a lot of you, there is even a type known as never an unknown. Yes, these are a special type given to us by the TypeScript. And I would like to walk you through with this documentation. So this is a documentation which talks about the unknown and any and object and void and undefined. There's a lot of them. And if you look at the stable summary, this is an abstract row, what is allowed, what is not allowed and strict checking all of that. Now we'll come back onto this table and chart. We'll understand the meaning of it that how any impacts the code that you're writing or how unknown and object and void define all of this impact. This is your very first look of how to jump into the documentation. So instead of that, let me just click on the get started. And this is what it's saying TS for new program. Or in fact, if you go at the very top of it, you'll find the docs tab. The docs of the TypeScript and even all of the language are designed by different people. So they are very different for all of the other, but they follow some of the specification that this is what the guidelines I'll follow in the documentation. So this is the guideline that we'll be following through in this entire tutorial. And you can see there's a lot of cheat sheets and all these things like decorators, enums are available. We'll be going through with all of them. The first I want to bring your attention is just simply the basics, not the handbook, but the basics. So once you click on the basics, you can notice that there are things available. So if I click on everyday types, you can see there is a primitive type and a lot of tutorial goes through with that, which is good that there are strings and numbers and Boolean. But not only that, if you look a little bit lower down, there is array, there is any, which is notoriously known for not being used. And there is no implicit any, then we have a whole lot of functions and all of them. So JavaScript and TypeScript are closely related. We'll come back onto this one. All I want to you for this tutorial is just go through this. Don't read the example. Just go through how many types actually can you figure out and find out. So on this page, how many types or how many keywords you can find out just let's them in the comment section. That would be really helpful for other people who are coming in. So for example, we have object, we have union and a whole lot of things. Eventually, we'll be covering them up. Don't you worry on that part. Now, once you've gone through with the type, we will be writing some code in this tutorial. One thing more I would like to put a picture in your mind while learning the TypeScript. The first one is situation. So at what situation the TypeScript serves best, although you can design your variable or declare your variable any given time. But imagine to think that TypeScript is helping you out and figuring out what data is about to be processed or what data is about to be coming from any resource or what data your function is going to send out. So just to example, I have taken as a use case scenario here, a function accepts two number. Now, what happens in the regular JavaScript code is once a function accepts the number, then you check the type of these values. And you want to be make sure that these are actually number because I want to perform some operations on that. What TypeScript helps you out is you don't have to explicitly check that hey, if the function which is accepting and what is coming as a data, is it really number? Is it might be a string or it might be a void or nothing might be coming in? So TypeScript allows you to get away from the situation. So extra line of code that you don't have to write. The similar situation is a function returns a string. So obviously the situation that comes in the JavaScript that suppose you're using a function and you're expecting that the data coming out of that function is a string, but that not might be the case. Maybe some other programmer has written this and he might have thrown out a number and that could be a problematic situation. So when you're working with the team and you're using TypeScript, you are absolutely sure that from this function, I always expect that a string is going to come out and that's where when you're working with the team, the TypeScript actually makes a life a lot more easier. Yes, there are a lot of rules and protocols that we have to follow, but this helps us to actually not fall into a lot of such problems. So we're going to first walk through with the very basic syntax in this video. We'll be getting through a read through a couple of errors that we already are having and then we're going to slowly pick up the pace about reading the documentation and learning more about TypeScript. So the syntax is pretty simple. We use let const, whatever the keyword you want to use for declaring your variable, then you simply go ahead and use a variable name. After the variable name, you put a colon and define its type. Now all the types, almost all the types in TypeScript are lowercase. There is no uppercase, there is no camel casing, all lowercase, numbers, strings, whatever you want to name or put a data type on it, then all it's a lowercase. Then optionally, you can pass on a value or can just declare a variable. Let's go ahead and give it a try by writing some of the code because I still believe that writing the code makes much, much more easier things. And also we can see there is some squiggly line already in my code which is not looking good. So we need to learn how we can actually get rid of this error temporarily. And then later on, once we're going to learn about the TypeScript config, it will help us to understand it more. So again, have patience. Okay. So let's go ahead and close this out because I'm not interested in this one. So intro.ts, nope, not interested. Let's go ahead and create another file and let's just call this as variables me.ts. And again, this me is just a fancy word. So don't you worry on that. So let's go ahead and declare a simple variable name that just says hello world. So let's just go ahead and say, hey, I want to have a let and let's call this one as greetings. And in the greetings, we're going to put up a colon and then we're going to write a simple string. And then once I go ahead and do this, I'll optionally pass on a value. Now this alone is a good statement. There is nothing wrong in it. You have created a variable and you have defined that only string type of value can come into it. But optionally, we can also go ahead and put up some value in it. So go ahead and write your name. So I'm going to write mine here. Go ahead and write yours. Once I go ahead and do this, I want to do a simple console log. I can go ahead and simply say, hey, I want to have a greeting just like that greetings. Save this and this works absolutely fine in this case. Now, let me walk you through that this is all good. And we can just go ahead and use a TSC syntax for this. So TSC and this one is variables.tsme. It is obviously going to generate a TSC code. This is all good. And notice here, it doesn't change anything. Also, it gives us a squiggly line which says cannot really clear blocks of variable greetings. What this all is about? We will have a dedicated video on it. Right now to just get rid of this error, we're going to go ahead and say exports, then a colon and that's it. This is going to remove the error temporarily and will give us a piece of mine that, hey, don't worry about these squiggly lines. But I promise you, we'll come back onto this one later on. Right now, this is all good. Now, this alone statement of putting a colon is really, really fundamental to this one. You click on greeting and notice it says that the greetings is a string. This is a piece of mind that yes, I'm declaring a variable which always, no matter what happens, is always going to accept the string. Later on, some other programmer who is working on the same project gets this variable and tried to assign it a number as six. This automatically stops me and saves me an error that, hey, the type number is not assignable to type string because it's a number. You cannot do this. If anybody tries to declare, let's just say a true value into it, it says, hey, that's also not allowed. You should not be doing it. That is what the safety that type script actually gives you. Not only that, if I go ahead and remove this and if I try to put up a dot, you can see all the methods that are being suggested to me like pad ends and all of that. These are string methods. These are not methods which are meant for number. For example, let's just go ahead and declare another variable up here which actually gets a number. So let's just call this one as my num and that number is four or six, whatever that is. And I go back up here and I say, hey, I want to use my num dot and I'm going to use two upper case. You cannot do it. Accidentally, this might happen not from you maybe, but from person who is using your code base and is collaborating with you on the code. It says that, hey, property two upper case does not exist on type number. Not only that, it also allows you to have more safety. For example, there is a greeting and I know that two upper case or two lower case exist in this one and I can go ahead and run this one, but accidentally maybe I'm not using suggestion. Maybe I'm using way more other co-rater and I might have done this lower case and I can tell you I have done this. I have done this. A lot of typos in the past, but typescript actually allows me to give a suggestion that, hey, property two lower case does not exist. Did you mean two lower case? It also helps me to get my indefin method and as you train it more, it actually gets suggestions from your own code base as well. So that is really, really impressive and amazing. So far, we have gone through with the very basic. We'll take it slow and steadily. So right now, all you have to learn is colon and a string. That's how you should be declaring the variable. Now, eventually in the later on videos, you will realize that sometimes we don't even need to just use this colon. It automatically infers the value and stops you doing mischievous, like adding a later on number to the greetings. We will work through in that. But right now, this is all. You have gone through with your very first idea of how a TypeScript works, a little bit intro to the documentation, some assignment that you have to do in the comments section. And I'll catch you up in the next video where we'll explore a little bit more in depth of TypeScript. Let's catch up in the next one. And one more important thing, very, very important thing. You guys forgot to hit that subscribe button. Go ahead and do that. I would be really thankful for that. Let's catch up in the next one. Hey there, everyone. I'm face share back again with another video and welcome to the TypeScript series. Now, through this series, I'd not only want to talk you through that how to write TypeScript, but I also want to get all the best practices that you should be using while using the TypeScript. So we'll be jumping through the documentation. We'll guide you briefly about what is there in it. And this video is not going to be too much intense. We'll just talk about numbers and bullions. We have already talked briefly about the string. And then I'll talk about the type inference, which is mostly should be used, but it is less being used. So let me walk you through with that. So here we are on to the documentation page. And as we scroll up here a little bit, we see that the primitive types that we're discussing, the string which we have already covered, and the rest two are numbers and bullions. So we need to cover them up. Now, these are mostly used as primitive types and string represent the values like this and then the numbers. Now, interesting thing here, which you should get from the documentation directly, not from any YouTuber or from any blog article, but rather from the documentation directly. The JavaScript does not have special runtime value for integers. So there is no equivalent of int and float. And this is usually a lot of time and interview question as well. Do how do we define especially the integers or float in typescript? We don't. We just call them numbers and that's how it is being defined. And that's how the value is inferred. I'll come back onto the inferred part a little bit. So let's write some code and take some example out of it so that we can understand more part of it. Now, we don't need to create a simple new file for this one because this is already very simple and there is nothing much we are doing. Let me just remove this part that we don't need and we'll just go up here. So the two things that we are going to talk about, the first one being simply number. And remember, there is again, there is a little bit more to it. Let me walk you through with the simple example of the typescript. Remember, this is being called as that we have this number, not numbers. There is a special question around it in most of the interviews. Remember, this is a number. Now, how do we define number? It's pretty simple. Let's just say we are defining a user ID. So this is going to be a simple user ID. And that ID simply can be let's just say 3, 3, 4, 4, 6, 6. So this is what we have. In the case of numbers, we're going to go ahead and put an annotation here, colon and then space and then number. This depicts or this annotates that this user ID is number and should always be number. Now, advantage that we get with that is simply when I say user ID and I put up a dot, all the values or all the methods that are available in JavaScript related to numbers, only those values or those methods are being fetched to me. So for example, to exponential, to fix, locale string, all these things, there's nothing much on the numbers in JavaScript. And that's why only these values and numbers are being used. That's the basic. That's the number. And again, it doesn't really matter if you just add a 0.2 or 0.3 after it. It is still going to be the number. That's all. That's all it is. There is not too much of in depth about the numbers. Yes, we'll go through in that later on. Now, apart from this, there is also a Boolean that we have to use. Now, let's just say, for example, you're using some values. Let's just say is logged in. So that is something you want to track. And let's just say user is not logged in. So that is how it goes on false. And then there is something known as Boolean that we have to infer. Now, obviously, you get all the values and methods that are there for the Boolean. So later on, if I go ahead and say is logged in, I put up a dot, then we don't have much on the Boolean. It's just the value of what is the value of this particular variable, true or false. That's all the methods that we have. Now, here I want to bring your attention to something known as type inference. Now, a lot of people, when they get started with TypeScript, they are very much excited about putting up annotation with every single thing numbers and strings and Boolean. But here, what is we are doing as not so good practice? What we are doing here is we're making it too obvious. This is a numbers and just after that, we are putting up an equal sign and putting it as a number. Now, this is too obvious to do. Now, obviously, there is another way of doing and dealing with that thing is, for example, maybe you are not dealing it like that and maybe in the very next line, you put up and say that, hey, now user ID is going to get a value. Let's just say it's some value and a decimal value. This is still not a good practice because you are doing too obvious thing and you are trying to overuse your TypeScript. Don't do that. This is not a good practice at all. There are some places where these values or these annotation can be avoided. You can just simply avoid to have a type. For example, in this case, just a previous case, where we were having this equal sign. Now, in this case, whenever I use number, let's just say I go ahead and say number and I use a dot, not number actually, my bad, the user ID and then I use a dot, let's just say to fix and this is the method that I'm using. Now, if I hover on to the two user ID, it's obviously telling me that it's a number and whenever you are actually defining any number and you are just immediately assigning a value it, TypeScript is smart. TypeScript can actually infer that you are actually trying to put a number in it and you don't need to do this. But hey, what's the point? We were obviously doing the same thing in the JavaScript as well. But no, my friend, there is a difference with it. Here, TypeScript is smart enough to automatically detect that you want to place a number in it. So, that's why the value automatically is going to be assigned. So, it is too redundant to just write a type infer on it and don't you worry, there will be future videos where I'll walk you through where this is compulsory that you should be using it as a good practice and where things where you can actually avoid it. So, in this case, this I prefer as a better code compared to anything else like put up a colon because it is too obvious. Maybe you want to have too much safety, have it, no problem at all. But in this case, TypeScript is already smart enough. It will still detect that it's a number and if you try to do something which is not really great, something like you try to assign a value, it will still give you some errors that hey, you're doing something that you shouldn't be doing. It is a type of string. It is a type of number which I already deduced and you're trying to assign a string onto it. So, yes, all these values still come up it. So, remember, in order to write better code, it's not just always you follow these columns. And I see a lot of people just follow these columns and these types just in the start of the file that hey, everything should be named in file. No, this is not how TypeScript work and this is not the good practice of the TypeScript that should be worked. TypeScript is a little bit more of a complex subject and that's exactly why we are exploring this one up here. Now again, you now you understand about the type inference that just that TypeScript is smart enough to get all the values and if you're just assigning immediately, yes, this is still a TypeScript, you don't need to put column every here and there in the entire TypeScript file. And in order to get output of that, we can simply go ahead up here and simply say TSC variables dot TSC variables me dot TS and this still will guess get us all the values. Remember again, the syntax of colon Boolean is a TypeScript syntax. So, whenever a JavaScript compile file is going to come in, it's never going to be a colon or the value. I hope you get the idea. I hope you got the best practice as well that you shouldn't be doing too much obvious thing. Yes, there is a special place where you put columns and the type of it. I'll walk you through with that. So, now that we have gone through a little bit with the dark invitation along with me, let's go ahead and explore TypeScript a little bit more. In the next video, I hope you have already subscribed. Doesn't feel like really good to again and again asking, but hey, 70% of you is not subscribed. So, go ahead, hit that subscribe and let's catch up in the next video. Hey there, everyone. I'm Ataish here back again with another video and welcome to the TypeScript series. Now, before we move ahead in this video, hit that subscribe because 70% of audience is not subscribed. Anyways, let's move into the any keyword. Now, this is mostly the usual keyword which people use to get away from the syntax of TypeScript. I've seen many people using TypeScript, but still exhaustively using any. This is not a good practice and I'll walk you through from the documentation that it has written there. It is not a good practice. First, let me give you a brief scenario overview that where people actually use it and where you shouldn't be using it. So, let's just say you're trying to declare a variable and you don't know what to place inside this variable. So, you just call it as hero right now. You have no idea right now that this variable is eventually going to turn into a string or a boolean or anything as a matter of fact. What you do after some time, you declare a simple function which calls it as simply get hero and this get hero just returns you a hero. So, let's just say a hero is being returned as a thaw. Now, later on, you decide that hey, I want to have this hero and this hero will get the values from by calling this method as get hero and we run this method. Now, if we go ahead and simply hover over this value, we can see that this is being inferred as any which is really a bad case. You really want to avoid these cases. Now, right now, this TypeScript file has no idea what to infer the value and I'll walk you through the documentation that the official documentation says that when in such situation where TypeScript cannot find out that what value is going to come up later on in the future, it puts that as any which is a kind of a getaway from doing the things and that is exactly happening up here that it is just saying that hey, this is any it could be this could be a simple string right now. Still, it is any but there is nothing which is stopping me to return a true and this is still accepting the value which is not really good case. Maybe just imagine you have declared these values and you are getting these values but there is another developer who is working on the API call and instead of just giving you a string based on which your entirety of a program is dependent, yes, it's returned you a true or maybe just a status code. This is not good. This actually breaks the consistency of the code. So, in this case, we have this a string. So, the ideal case would be remember in the earlier time I told you that in the earlier case, in such scenario, the automatic inference of the values like string and Boolean is not good. In these special scenario, I would love to have the simple string that hey, now please infer the value as a string. So, whenever the values are going to come, whether through an API call or whatever you are doing, it should always be inferred as string. Now, if I go ahead and another programmer who is writing this, now if it goes as and says true, automatically you get an error that hey, it was supposed to be a string but now it is being returned as a Boolean which is not good. So, you shouldn't be doing that. Now, let me walk you through with the documentation because that is the most important part of this video. So, here's the documentation and you can see the documentation. There is any and there is also no implicit any. Yes, the any actually is a gateway and it tells you that any can have actually anything at all that you want to have. So, that whenever you don't want a particular value to cause the type checking. So, that's when you use any. Now, notice this very carefully. Any is not a special type that you are assigning. It's not a string, it's not a Boolean. Any is simply a marker in the TypeScript which just simply says that hey, I don't want to do the type checking for it. Basically, turn off the type checking for that particular value. You don't want that otherwise while you're using TypeScript. The most important line is just here. You usually want to avoid this because any isn't type checked. Use the compiler flag. No implicit any to flag any implicit any as an error. So, one more thing we have learned that there is a setting in the tsh config file that we can go for no implicit any that will allow us to not fall into such thing which is any. So, I hope this video gives you a clarity about when to use any, when not to use any. Yes, there might be one or two cases but really you don't want to use any in any of your code. It is not a good practice. You are avoiding all the strictness that TypeScript brings to your code. So, I hope this video has given you a clarity about any but the most important another thing here is the function shouldn't be defined like this. The function should have more value. So, the stricter check or definition that hey, you cannot return a Boolean value. You should always be returning a string value. So, from the next video onwards, we're going to study about how functions are defined using TypeScript. Let's go ahead and catch up in the next video. Till then, hit that subscribe and I'll catch you up in the next one. Hey there, everyone. I'll be back again with another video and welcome to the TypeScript series. I'm pretty sure that you have already heard about the functions either in JavaScript or TypeScript but I'm pretty sure that a lot of you don't know what should be the mindset behind using the functions in the TypeScript. There are a couple of ways that should always be running in your mind and don't worry, we will not be dragging this topic around for thousand videos. There will be just two videos. This one and the next one and we'll be covering end-to-end functions in that. So, after watching these two videos, you'll be all comfortable with handling any types of functions in TypeScript. So, let's get started. I've created a new file up here which is saying simple console log and let's go ahead and try to create a function. We'll be creating basically three or four functions which will give you eventually the whole idea and the picture and scenario which you should be worried about. First of all, it's really clear that first function that I want, the goal behind it is I want to add a two value to it. So, obviously, I should be taking input as a simple number and let's go ahead and try this out. So, let's just say if I go ahead and say, hey, I want to add two. So, I'll be taking input as number and that's pretty much it. And at the time of returning it, I'm going to go ahead and say, hey, whatever the number you are taking, just go ahead and add two to it. Pretty simple. Nothing wrong in that. Now, if I go ahead and work on with that, if I go ahead and try to add two this, I can go ahead and say, hey, I want to add two to the value five. Nothing wrong in it? Absolutely, they say. But here comes the problem. The problem in the TypeScript. The problem which comes up in the TypeScript and by the way, please excuse my system. It has been heavily loaded for the life classes and a whole lot of other things. So, it might run a little bit slow. So, we have to wait a little bit to see the errors. The notice here, the first important thing is in this add to function, if I hover this, we see any and any is a problem in TypeScript. Whenever there is an inference of what should be the data type, it is usually good in the case of variables, but in the case of functions, not so good. So, in this case, notice here the function add to accept a number which is any, which is problematic. The reason why it is problematic is because I can simply go ahead and come to here number and can I simply go ahead and assign values like two upper case, which I shouldn't be allowed to do, and right now I'm allowed to do so. And even if I run this file because my system is a little bit slow today. So, if I go ahead and run this one, I'm allowed to do so. Although this is creating a problem that hey, this is a duplicate function. So, obviously, this is the error we will talk about later on. Right now, let's go ahead and export this, save this and there we go. So, I can run this code again and this produces a fine JavaScript, no problem at all, but I shouldn't be allowed to do this because if I just go ahead and convert this to into an upper case that becomes a string, not a good idea. So, that is one problem that I'm facing. Another problem that I'm facing is if I go ahead and convert this file like this, it still works. Shouldn't be working there. The whole idea of the TypeScript is to have a stricter type so that we make less mistake and the fellow coder who are working with us makes less mistake. So, in this case, let's go ahead and work on and try to fix that. Now, the fix is really easy. I can go ahead up here and can say that hey, whatever the value you are going for, make sure that the value that comes to you is always going to be the number. Now, automatically TypeScript is giving me a problem that hey, hey, whatever you're trying to do, this is not good, this is not allowed. So, please don't do this, always pass on a number to us and now this kind of a five in the strings is not allowed and go ahead and stop that. Now, since you have written the function definition with the number being accepted like that, I cannot do mischief things like I can go, I cannot go ahead and say hey, you cannot go ahead and say hey to uppercase and go like this. Now, no, you are not allowed to do. Whoever is the creator of this function or designer of the function in your entire group has said that this function needs to take input as a number. So, that is why we are 100% sure that when we add two to it, it is possible in operation. We don't need to do extra check. We don't need to run the conditional that hey, if the number is number then go ahead and do it. Otherwise, return an error message that hey, please pass on the number. No, you are not not supposed to do all of that. So, this is all good. Okay. This is the basics of it. Let's try to wrap this up with one more type of a thing. So, another thing, another function that I want to have is a really a simple method in which I want to just have some strings. So, let's go ahead and have this one. So, let's just say you are you were not aware about the two uppercase methods. So, you want to just go ahead and say I want to have a function which says get upper. So, what it does is convert any string into uppercase values. Similar to that, you go ahead and say, hey, give me a value. I go up here and say, hey, I want to return whatever the value you get. I'm going to go ahead and put a two uppercase onto this one, two uppercase. Now, again, I got no suggestion. First of all, that is bad. Probably my compiler is slow. That could be an acceptable case. But here in this case, since this value, if I go ahead and look onto this one, this is any, any is again wrong. And if I go ahead and say, hey, let's just say get upper. I go up here and say, hey, this upper is going to get a value, something like this. Obviously, this is problematic here. Right now, squiggly lines are there. It is telling me, hey, dude, you're doing wrong. You need to pass on one compulsory argument. So, I can go ahead and pass on four. It's happy. And you know why it is happy. It shouldn't be happy. It should be mad at us. Because the value should always be string. So in this case, the type annotation is really, really strong. I told you in earlier videos, in the case of variables, it's optional. It infers the type pretty nicely. So there is no problem. In the case of function, it is really compulsory. Let's go ahead and move on. And now it gives me a problem that, hey, dude, whatever you are doing with four, no, you shouldn't be doing that. In case you want to convert this in upper case, either pass me on four like this. That is acceptable. That is doable or just pass on like this. That is also doable. That is how you're using. I'll convert that. Okay. Moving on quickly and fastly. Don't want to drag down the tutorial. Okay. Let's just say I create another function, which is going to be simply a sign up. So I'm going to go ahead and say sign up user. So let's just sign up the user. Now, for this one particular one, I'll just define the definition like this. And I want to have a couple of more parameters in this case. At the time of sign up of the user, let's just say I'm going to ask him for the name and I'm going to go ahead and ask him for email and I'm going to ask him for password. Pretty common thing. You have seen this thousand time. Now, what this is particularly bad in this case because I can simply go ahead and say, hey, I'm going to go ahead and have a user sign up. If I go ahead and go like this, obviously it complains that, hey, there are squiggly lines. So that means you have to pass on. But all of these, these are marked again as any. Although there are three parameters this time, but they are being marked as any. So I can go ahead and say, hey, one, two, three. You should be all happy because it's any and that defeats the purpose of having a TypeScript. So in these cases, also individually and this is the syntax. How you do it? This one is a string and this one is also going to be a string. And since everybody is a string, let's change this one. So this is going to be is paid. So just to have a flavor of it, this is going to be a Boolean. So in this case, we are going to go ahead and have a Boolean value. Pretty simple, pretty easy. So this is. Now, right now in our function body, there is nothing in it, but you get the idea. You have watched the JavaScript, the code part and everything. You can write that. This is a series more about focusing on the TypeScript. So now we see the squiggly line complaint, but other guys are not complaining. And this is the one thing I absolutely like about the TypeScript. So fix one that are at the time. This is updated in the recent version of it. So I go ahead and say, hey, you need name. I'm going to go ahead and give you a name, probably my name and say, hey, this is also incorrect. It argument is number, but it shouldn't be a string. So let me go ahead and change this one. So let me go ahead and say, hey, they're at LCO.dev. And this one also needs to be a Boolean. So is it a paid user? Nope, it is freebie. So there we go. Now it is all good and okay. Now one more thing that I want to cover in this video quickly is another method. And then I'll tell you about the problem. So let's go ahead and actually use different kind of function this time and error function. So let's just say we're going to have a simply let and this time log in user. And we can just go ahead and use the error function. The definition remains same. So I won't be writing anything inside the curly braces, but the value which we are worried about is how to take the input. Let's just try to have simply email and is paid. Let's just say these are the things. So I'm going to go ahead and worry about email. Probably in name also. Let's just say name, email. And again is paid. We are using same parameters. Now this is good. This is good. There is no problem here. But let's just say I only want to pass on two values. Obviously these kinds of cases will come up here. So in the name I can go ahead and say, hey, this is going to be a string. The email is going to be a simple string. And the paid is going to be a simple Boolean. But once in text that might confuse you, how can I pass on default values? Let's just say in the case of log in user, I want to use this and I want to simply pass on just two things. Maybe name and email. So name is going to be H. And the email is going to be H at the rate H dot com. I wish I got that domain. But I don't want to pass on other values. Now when I save this one, notice here log in user, it is not giving me any complaints as of now. Let me go ahead and try to run this one. And there we go. I told you, my system is little slow today. But just giving the idea that yes, this is paid is a compulsory thing. It needs to be there. And one way you can have an avoidance of this one is simply by providing a default value. The syntax goes. First you annotate it, colon and then the data type. And then you simply go ahead and say, hey, this is going to be a false by default. And now the system is happy. Not because it is slow. It is truly happy. I can go ahead and run the code. And I can see that, hey, this was all okay. And this is the brief overview of it. And yes, it generates the equivalent of the same exact, almost same code. But notice here, some code was generated a little bit more in the log in user. This is the most important part where we should be focusing a little bit. Now, obviously, this is generating us bar as a keyword. We can update the TS config and learn about that later on. Please ignore that as a moment. And right now, we can see that there is a name, email and is paid. And we are looking for a conditional check. If is paid is void, then it is zero. Otherwise, false, you get the idea. TypeScript helps us to write a little bit of a cleaner code as a stricter code in that case. So this is all about it. But one thing still is remaining, which is, hey, if you look at this example, closely, add two is a number that is great and fine. And maybe we are holding that value and further doing an operation. So for example, let my value that is going to be holding by add two. And I'm expecting that the value is going to be added to two. So seven value. But what instead of this, I go ahead and return not just like that. So let me just comment this out. And I go ahead and return a simple something like, hello, nobody's stopping me doing that. So we need to learn that, okay, this is completely stored and completely fine. And yes, my system is not slow. This actually is allowed right now. So we need to worry about one more thing about the functions, which is, how can I return more accurate value? And that's going to be coming up into the part two of the TypeScript function. Go ahead and hit that subscribe button. I'll catch you up in the next video. Hey there, everyone. It's here. Back again, the other video. And welcome to the TypeScript series. So in this series, we have already discussed a tiny bit about the functions in the last video. And as I promised, this is going to be the final video on the promises. And you will have enough of the knowledge of how to handle functions. Now the TypeScript revolves all around the types and you will be learning a lot about the types as we go further. It's not like just these are the primitive types. These are the types. That's all you go ahead and do with that. It's more about the philosophy of how you use the types where it is necessary, where you can avoid them and all of that. That is what we are going through with this series. Remember, TypeScript is just a superset or a wrapper around the JavaScript that allows you to write better JavaScript. So I hope you have watched the entire series or playlist. And in case you haven't yet, go ahead and hit that subscribe button. And let's go ahead and get started with that. So taking you again on to my computer screen. So this is what we have done in the last video. Now while discussing all of this in the last video, we noticed that we were returning instead of a number just by adding to it, we were returning hello. And this was not giving me any problem at all. And this is a point of concern for me. Especially try to always imagine whenever you're learning TypeScript, always imagine that this is not just you who is writing the code. This is a team of 20 or maybe 30 developers who is writing the entirety of the code. You have defined some function. Maybe somebody wants to add his own functionality of the function. And now if he's going to do such things like return hello, obviously this will break your entire application because there are probably 1000 use cases of this simple method, which are dependent of returning a number to it. But since you changed that and you're returning a string, that can crash your entire application. That is a little bit debug to handle the things in 20 or 30 or maybe 40 developers of a team. So that is why TypeScript is being used in the function. So obviously this is making a problem, but TypeScript is not giving me any error or at all. So that is why we have learned about that at the time of taking the input, we can annotate it with by whatever the type you want to accept. And similarly, you can just put a column and can say that, Hey, this is add to this is supposed to return me a number. Now, as soon as I do this, this will allow me to not do such things, which is just a mischief activity that, Hey, instead of returning a number, why are you returning as simple hello, which is a string? You shouldn't be doing that. So I can comment this out and I can remove this comment and can say that this is happier now, much more happier. This saves me time of time and my team's time to make right and right productive code and make better softwares. Okay. Moving on, let me talk and discuss a little bit more about the functions and then we'll redirect you onto the documentation to understand that yes, there can be more with the functions, but this much of the knowledge is enough. Good enough. Okay. Moving on. So let's just say first and foremost, let's talk about some of the functions which are going to be like this and again, we'll talk about them a little bit later on right now. Just want to give you a brief overview of this. So for example, let's just say there is a simple function which says get value. There is nothing wrong in it. And in this one, you simply say, Hey, give me my valve just like this and this could be anything. Number string doesn't really matter. Let's take our example with the number itself. Now, you're doing some conditional check maybe just with the if condition, something like this. If my valve is greater than five, then I would like to simply go ahead and say, Hey, I would love to return something like true. Maybe there's a use case scenario for you in this one. Otherwise, if that's not the case, you're going to go ahead and say, Hey, return a status code. Maybe you're building a web application which says 200. Okay. Now, in this case, obviously, our first theory is not really applicable because if we go ahead, right now, you can see if you get over on the this one, this says, Hey, this is giving some hint that it can be either a true or can be a string, but we are not implicitly mention explicitly mentioning that it can be as simple. Let's just say if I do head and string, then this gives me a problem. If I go ahead and say, Hey, this is a Boolean, then this gives me a problem. So we haven't yet learned about the type where we can return more than one type. Just want to give you a brief overview that these kinds of scenarios will happen. These are part of functions, but we have to learn a little bit more about TypeScript in order to handle these situations. Not really complex. It's just a union type and we'll discuss on that in a separate video. So just giving you that yes, this could happen. This is one of the case. Okay. Moving on, there are a couple of more things that you can do. For example, let me take another example so that you can take these code files in note one. So let's just say there is simply a hello and this is a simple method or let's just use a arrow function method because I think you would also love to know that if here we can put up a colon and number, what is the syntax of doing the same thing in the arrow functions as well? So this is how our basic arrow function works. We have written that many time. So inside here, we take all the parameters, like for example, you want to take a string as parameter, you can do that. Just after these parentheses, you can put up these colon and can say, Hey, I'll return a best string as well. Now, as soon as I do this, this actually gives me a problem that hey, functions whose declare type is neither void, not any must return a value. So this is giving me a problem that hey, you're not returning me a value. So your code is actually wrong. So in this case, if I go ahead and return even an empty string, this is just working out. So this is the basics of how you do it in an arrow function. I hope you are getting this. I hope you are enjoying this. If you have hit that subscribe and a like would be really awesome. Otherwise, let's continue. There is no problem at all. Okay, one more thing I would like to discuss about this is some values, something like this. So let's just say we have some heroes and you know, what heroes I'm about to use, you know, me, I'm a big Marvel fan and a DC fan also. So let's just say we have a Thor, we are going to go fit Spider-Man and we are also going to go with Iron Man. So we have a list or an array in which there could be numbers, there could be string or something like that. Now, all the great advantage of using the TypeScript is it knows really so much out of the box. For example, this is a common scenario. We do this in like 1000 times in JavaScript. If there is an array, we go ahead and loop through it by using a map. If I go ahead and use a map, I'm actually looping through each of the hero and then I go ahead and use a callback and I can probably say simply, hey, I'm going to return a simple string, something that's going to say hero is hero is and then let's use a variable which is going to be something like this and let's just go ahead and have a hero. So this is a really simple code, nothing magical out of the box. But if I hover over to this hero's and this map function even here, you can notice that this is giving us so much of the definition and advantage. I don't have to call anything. It automatically predicts that hero is going to be type of string because this array is of type of string. But if I go ahead and duplicate this and let's call this one as let's comment out this one and instead of having a thought, let's just go ahead and say that this is one, this is two and this one is three. So TypeScript, all I wanted to show you is TypeScript is smart enough if I hover over this. It automatically changes this hero to a number. So it is aware of the context that is coming up in here. Right now, if I go ahead and comment this one, comment this one, it automatically switches its thing into strings. So the hero is a string in this case. So I can avoid an additional step that, hey, whatever the values that are coming up from this one, I don't have to explicitly annotate that this needs to be always string. Perfect syntax, I can go ahead and work on with that. But as you know, the context switching of the TypeScript is really smart and we can rely on this one. So there is no problem in that. So in this case, it's good. I'm happy with this one. But the one thing which you should be really careful is what is the return type of this method. So in the map, it is expecting that, hey, you're returning up this string here. But instead of this, there might be a case where you want to return in every case too. That is also allowed and that is also valid. That's why the map has such a detailed information that is given to the TypeScript that, hey, what is the value you want to return? In this case, it could be two or it could be a previous value. In this case, especially, I would love to return that what is the type of the value that we are returning in this one. Again, we could do it like this and then we can say, hey, the values that I'm returning is going to be simply a string. There we go. This is much more of a readable and reliable code. So when I go ahead and say, in every case, I'm going to go ahead and do one, it stops me from doing this. So a good practice that we should all follow that, hey, don't do such thing. Yes, you can avoid that input. It will automatically deduce what is coming up from the array. But this is a better syntax, especially for when you're writing the code in the team. So this is a better syntax. This is the basics. Now coming up on to the final part of the function where we actually will move into the documentation. This will actually force us to move into the documentation. So let's just say there is a function we are defining and there are two types of function. The first one is simply saying console error. So the idea behind this method is whatever is being passed to it, you just go ahead and log it to console. So let's go ahead and log it to the console. Obviously, we have to take error message. So let's go ahead and call this one as error message. That is a type of string that is being given to us. And we are just going ahead and saying, hey, just go ahead and print this error message into the console log. A very common scenario, which you do while building the bab application in the initial phase. Now, if I hover this one, it says, hey, the console error, the message it's taking is in the string format. But the call and after this is void. That means it's not returning anything. So yes, this could be the thing. But another, this is not a good practice. Especially if you're using TypeScript, the good practice is to explicitly mention that, hey, whoever is using this function, he knows more about the definition of function that this is returning a void. That means it's not going to return anything ever. So accidentally, it just says that, hey, if I go ahead and say, I'm going to return one as error message now, you shouldn't be doing that. And again, this might look like, hey, that's very easy. It's easy because you're just alone coding right now watching a YouTube video. But imagine when you'll be writing code with along 15 developers or maybe 50 developers alongside with you. Okay, the same thing could be replicated one more type. Another method that you will be handling a lot or writing a lot is handle error. So this handle error, obviously, this is handling the error. This is not going to be returning a void because it handles the error. So let me go ahead and copy some line from the documentation directly because this is something which is coming up from documentation. I'm not making this up. So just like we have all these things in the documentation under the more functions, this is written as never. Some functions never returns a value. Neither it's void because void is means return nothing, but there is never as well, which never returns a value that simply means the function never returns a value. I know this is very close to the void, but this is specially made so that you can handle some kind of error because this is kind of a intentional crash that we are doing to the function for having this. So in these kinds of cases, I can just copy this line and I can go back onto the code and instead of the console logging the things, I can just go ahead and say throw a new error and whatever the error message. I am just passing on. I'm handling this gracefully. So if I go ahead and put this as a void, which is not a good thing. If you want to make your errors more robust and handling part of it, just use never, which is again recommended in the guidelines of the types. If I hover this again, it says the return type is never and error handle is declared, but its value is never read. That's fine. But you get the idea from where this is coming up. Again, I'm not pulling this out from the thin air or out of a hat like a magic. This is mentioned in the documentation. The never type represent value, which are never observed. In the return type, it means that the function throws an exception or terminates execution of the program. So forceful termination of the program never also appears. When TypeScript Remind, there is nothing left in a union. Union will talk about that later on. That's a subject later on. But you get the idea how to read the documentation and how to find out the actual source from where this is coming up. I hope you are enjoying this. The valuable series up here, and again, I'll wrap this all the source code from now onwards. I'll put them into the dashboard as a community session, which is a free segment here at Inuron. You can go ahead and download them. So you can have that. And again, the most important part is not just the source code that I'm giving you. The most important part is the mindset that I'm trying to give you with these videos. So you can write better piece of software. That's it for this one. Let's catch up in the next video. If you really think that just by adding TypeScript, you have removed all the bad behavior of JavaScript. That is not the case, my friend. There are some still odd behaviors, even in TypeScript. Maybe in the future version, they will go away, but still we have a lot of misbehaves of JavaScript still existing in TypeScript. I'll show you one here. Hey there, everyone. Hit the share back again with another video. And let's go ahead and get started with the TypeScript series. Before that, hit that subscribe button and the bell icon as well. I would be really, really happy with that. Now that assuming that you have hit that subscribe icon, come on, guys. 70% of you haven't hit that. Okay, I assume that you have hit that. Now let's go ahead and walk through with the objects. Now again, I won't be consuming too much of the videos like I won't be releasing 14 or 15 videos on just objects on TypeScript. We'll walk through with the most important part of it, enough that you can get started with that. So there will be a couple of videos on object. Let's go ahead and get started with this one and I'll walk you through how objects are there and what are the places where it can misbehaves a little bit and your code might actually get compromised with that. So let's go ahead and walk you through with that. So how does the object works? The objects are really simple. We use them all the time in JavaScript as well. So maybe you want to make an entry in the database. You collect all the values in the object format and you pass on this object to maybe a backend controller. It modifies all the things and adds an entry in the database. That is the most common use case scenario. For example, let's just say I want to create a simple user. So this is how go ahead and create an object of a user and I'll just add more values to it. So for example, if I go ahead and say, hey, this is the name. So whenever I'm adding a value or a user to my database, I'll say, hey, this is a name. Then we got an email. So let's just say hithesh, else you're on dev, another email. And I'll also say that if this is active or not. So I'll say if this is an active account or not, means people are regularly using it. So this is a basic object. And yes, typescript syntax is exactly same and that is where you'll be using it most. But this is not the use case of the object. Designing an object like this doesn't really make sense and you won't be using it too much. The use case of the object is through the functions. You have to actually pass on these objects into a function or you have to return some objects through the function. That is the most common use case that we use while developing any application. So let me walk you through with how these are done. So for example, let's just say we are creating a method which is create user and this is a simple method. Now since this is a forgot the keyword. So function. So this is a very basic method that we have. Now this method expects that you will be passing me some of the user. So the very first syntax is you pass me an object and I'll define that at least give me a name and that name is going to be a type of string and give me another one which is let's just say is active or is Google Auth or what should I do is paid. Okay let's let's go with that and that will be a Boolean. So this is the very basics of it that we have got. Let me just go ahead and move this up. There we go. So this is the most basics of that we have. Now well whatever we return the value we'll discuss on that you can return an object obviously that is the most basic part and the obvious part of it. Now what it allows us when you have a definition like this then the method becomes a tiny bit more secure. So for example when I say hey I want to create a user I want to use that. TypeScript actually stops me for doing that and looks like it is not stopping me probably my system is a little slow. So let's just go ahead and say TSC and I'll say my objects. Let's go ahead and run that and there we go we saw an error that create user cannot be used like this. So let me just go ahead and try that. Hey why are not let's try go back up here and come here. No error threads but you get the idea that this is actually stopping me from doing all these things and how can I actually get rid of this by passing on an object. By the way why this is stopping me to doing so because probably I forgot to export. So actually we can we always have to do we'll come back on to this part that why we are actually doing this because this exporting of the objects is really helpful in this case as well. I will definitely have those values so please cancel that and we'll be exporting that probably this will start giving me the errors. There we go we got the errors. I'll definitely discuss this part as well as we move into the react part or maybe angular part of it that how this actually works will surely take care of that. Now right now the important part is that when we say create user it stops me from doing this so there we go we can go ahead and use an object. Now it's complaining me that hey the object that you have defined that is exactly the same which is I'm expecting from this method to give me but the syntax or the following must have variables are missing or properties. So in this case I have to say name and the name is going to be let's just say I'm creating a user with the name hithesh that is fine but still I'm missing one which is is paid so I'm gonna go ahead and say is paid and we'll be saying this is a free user on the platform. So this is a pretty obvious behavior that we have and this is now probably trying to have my code in a much better way. So this is the most basic of it and you can actually add a lot more things on top of this. Maybe you also want to define another syntax which actually makes people a lot confusing is what happens when a function actually returns an object so that is the most confusing of all. So let's just say you're not creating a user you are creating a course in this time. So let's just call this as create course. Now this is obviously a function so let's go ahead and say function and this is an object. Now this is a return type and there we go and this is actually a definition. There we go. Now this is a bit of a weird syntax we forgot a colon there. Now what this is saying is that hey this is a function name. This is a function parameter where you pass on. This is a return type and this is a definition. So yes there is a lot there is a lot confusing up here. The reason why it's complaining is simply because you have promised that you will return an object and you are not returning anything. So obviously you have to go ahead and return this one. This one is happy now but in case you have a special syntax that I should be returning some things like this. So you can actually go ahead and make it like this. So any course that you are having is going to have a name and the course should have a price again fictitious scenario and this should be a number. Now obviously this will complain this is a better definition of function in case you are having that hey this should return me obviously always and always an object we should have these two properties. So whenever I'm going ahead and returning anything from the function it promotes a good practice and less error that hey you should be returning the name. For example this course name is reactious and the price is going to be let's just say 399 something like that whatever the price is. So this is the basics of it and now you know the syntax and the weirdness. This is the only thing which I have seen a lot of people get confused about that where what happens when an object returns an object. Yes I do agree this is a little bit of a weird syntax because we are parenthesis then colon and then this is an object and the definition and it gets a little bit more confusing when you have the object in this format because it's returning these things and then so these kinds of definition makes people a little bit confusing. Now what is the odd behavior regarding the objects which comes up in the type script okay that is that is something really bad okay let me show you where the bad syntax actually comes up. So notice this that this is a name and this is a it is paid so my function is saying that hey whenever you create a user you give me a name and is paid that is obvious but let's just say while creating a user I also want that email should also be there so I can just go ahead and say hey let's give it an email and the email is going to be h at the rate h.com something like that. Now this is not acceptable and there's a long big thread on the stack overflow by the way on this behavior. So obviously this is not allowed because in the definition we have strictly mentioned that this should be there yes there are ways I'll walk you through in the upcoming videos that are ways how we can actually make this email as optional if you pass then that's good if you don't pass it that's also fine. But what is the odd behavior is that this is an object so I can just cut this out obviously this is complaining. So let's just say I go ahead and say hey let new user we create a variable and we simply assign that as an object. Obviously we do this a lot of time in the JavaScript as well that whatever and from wherever we collect the information like payment information comes from a different model or controller or maybe a Google authentication also gives us some information so all these information are combined an object is being created and whenever we call these kinds of methods we just pass on this value here. So for example a new user is being passed on and you might have noticed this time I was able to pass on much more information than what is expected in the function definition previously it was giving me error but now this is all okay so yes not all weirdness of JavaScript is gone but there is a better way of defining the functions and the methods. We'll learn about that when we'll walk through with the interface and all of that there are the beautiful most beautiful part of how the typeScript will walk through with that. So I hope that now you know some of the weird behavior of this one. This is a common method in case you have watched my morn course or any other backend development we have done this many many time this is still not stopping me to do any bad behavior so that is wrong of typeScript it should stop me but I'll walk you through with the optionals that there are better ways of handling situations like this but I think that's going to come up in the next video so in the meantime hit that subscribe and I'll catch you up in the next video. Hey there everyone a very sure and this is a short video all I want to do in this video is introduce you to the type aliases and give you a moment so that you can read some documentation on your own so that whenever you find out some tutorial who is talking about exactly same thing you can say yeah this is coming up exactly from the documentation as well and again the whole idea behind making the short chunk size bite size videos is so that if you feel you can consume more than one head to time instead of pushing out at 12 hours or 15 hours of content at a one given point of time again let's get started with the type aliases the type aliases is a topic which is really really simple and you don't have to worry about anything at all I'll walk you through with the documentation as well we've already gone through with some of the scenarios which where we can use it and this is all what you'll see if you have watched the previous video this one will just come like a breeze so moving up here you have saw that we can actually create a simple variable which is a user and we can kind of use that as well but in the JavaScript we don't actually create a variables just like this if you want to support anything like that we actually go with a different method let me let me walk you through because coding is actually much easier when I show you by writing the code itself so let's just say our goal is still same we are creating a application in which we onboard a user and user has some of the properties that we want to go through with that and maybe this is not just a one function which uses all the set of properties but there are like probably eight different functions which uses the same of properties now what they do with that properties that's not our concern our idea is that whenever somebody takes up this entirety of eight function whenever they take any parameter they need to get all the information of the user itself that's the whole idea okay so let's go ahead and create that the way how we do it we create a type of it and yes it's a keyword in the TypeScript and we simply go ahead and define a user like that really simple it looks like almost like a constant but this is a type aliased that we go for now once we have this user we can define all the properties that we want to have but we don't define the exact value of it we'd rather define what kind of value is going to come up into that so for example this one is going to be a simple string and not a comma and let's just say email is also coming up that is also a type of string and is active is also there which is going to be a Boolean value so now just assume there are more properties of it and we have actually created a type for it now the advantage of creating a type like this is it could be really a long and lengthy one is whenever there are methods like create user get user details modify the user we want all the information to be passed on so let's go ahead and create a simple function like this and once we have this one this is the definition of it now what I want is if anybody passed me a user it should adhere to the type of user so I can go ahead and say hey there should be a type of user so what we are doing internally is kind of creating the data types here or the types in the TypeScript so just like we write something like a number maybe a number or maybe we can go ahead and write a simple string similarly now we are actually allowed to pass on user now just a site tip yes you can do something weird things like this and you'll see this in some example in tutorial stuff like that hey you can call the string and that string could be you can type alias a string as not string actually my string has a string so wherever you are using now the string type you can go ahead and actually say my string again I don't know why there are so many examples about that on internet I find it weird but yeah it is actually technically allowed so but I won't see a really use case of that that why would you rename this definite default string or boolean or something like that maybe there is a case where entirety if a team don't use boolean word and just use the boole maybe you want to do that again there are use cases for that so now we can see that there is a user and there is a user we are not returning anything so anytime somebody uses a create user he just goes there and say I want to use user he will be complained that hey there is something that you need to pass on one argument that should be of type user so in this case I cannot just go ahead and say hey this is my object it will complain it doesn't match the type of user so you have to give me all the name email and is active so let's just say I give it a name the name is going to be an empty string then it says hey it is an email which is also going to be an empty string and then it says hey give me is active as well which could be true or false if I pass on all the values it is absolutely happy now similar to this we can also say that hey whenever you create this function you obviously should return something and that return type of value should also be user so you get the idea how this is going ahead further that anybody who uses this function this function needs to return that so you have to go ahead and say hey return and then you have to not only return the object you have to actually return all these values so whatever that values are and whatever your logic says you have to return that otherwise it will complain so it's a really good use case of how the type can be used now in the real world scenario whenever let's just say we we are creating a user for our LMS then obviously this is not it there are a lot of things that you have to pass on now what you do with those things totally up to you your logic but this is a common thing which is being used now let me walk you through with the documentation as well because documentation obviously always helps to understand this so into the everyday types if you look for it here on the left hand side there are type aliases in interface yes they are quite confusing almost like same to each other but this is the example that are given in the documentation about type aliases so it's common that we want to use same types more than once just I told you maybe there are eight functions eight functions which are using the same type of user maybe there are 15 values or in the object or the user so in that case it can be really really useful all the internet is filled up with these kinds of example where somebody is trying to create coordinates great example nothing wrong in that so he's creating a type of point and whenever somebody a point is defining you have to pass on x and y coordinate same example let's just say we are sending print coordinate you have to provide PT which is of type point so it is compulsory whenever somebody is using print coordinate he has to pass on all these values and we don't have to again and again make our function definition too lengthy that hey you have to pass on this eight different lines so imagine if this would be point instead of the coordinate into two values it could be let's just say 16 values and in your function what could definition would be look like here really crazy so it's better that in one file we define all these types when then we import them and whenever the function definition comes up we just call them hey you need to pass on a value which should be a point type or maybe a user type or maybe something else so there are a lot of values and yes we haven't yet studied about these all types or a union type and all of that we will do that very soon I highly recommend you at least go ahead and go through with reading this this won't be taking more than two to three minutes to you but you will develop a habit of reading the documentation so I think the type Alice is all done now let's go ahead and move on to next video some quirky behaviors and some real small topics are there I would like to cover them up in the next video let's catch up there all right so in this video we want to study about just three simple thing the first one is a keyword which says read only the second one is just a question mark yes literal question mark and the third one is a use case scenario that you'll be using a lot with the case of type not with just ordinary object this is the most use case scenario so whenever you'll be looking in the project being designed by other person or GitHub repository you're trying to understand the code you'll find these kinds of situations a lot so scenario based let's go ahead and get started it's pretty easy hit that subscribe and then we can move forward yeah this video is powered by AI and till unless you hit the subscribe it doesn't move forward so yeah you have to just kidding let's get started with that so the same example we are into the my objects and let's just go ahead and define a simple user so we have seen that I've commented out all the code that we can actually go ahead and use in a type and this is a type that can be multi-used into a function so maybe anything else that you're defining so let's just say there is a name that is going to come up as a simple string type so name string and you also have email that is also a string type and you also have probably is active so to track that whether user is logging in into three days or maybe whatever the parameter is so in this case now a couple of things that you'll be using is in case you are oops my bad sorry okay so that you'll be using let's just say you are using MongoDB to save this user into database so you want that nobody should actually be able to touch this underscore id which is a common thing in MongoDB so this is a string now at the time of creation obviously you'll be your MongoDB will be creating that but you want that nobody should be able to manipulate that further down the road so you can go ahead and mark this as read only yep that's a keyword you can just put it on to anyone and now you won't be able to change that so that's a pretty simple one really easy one now one thing I would like to mention here which is crucial that notice here this id is a simple string so for string you won't be able to change that for or let me just give you a walkthrough of that let's try to create a simple user for that let's just say there is a function which says create a user and then it says hey just give me a user so when at the time of creating this user let's just say we call this as you which is type of a user and that's basically it so nothing big deal this is a really simple function now whenever there's a you which is obviously a type of user you can access all these values up here or you know what let's not create a function actually let's create a variable because it's easier to show you this example with the variable so let's try with variable so let's just say we call it as my user which is going to be of type user totally fine and now in order to make sure that this is a user type we have to actually assign all these values this is going to complain because it's not able to fulfill all these values so I'm going to go ahead and say hey let's give it an underscore id which should be a type of string so let's just say this is 123 for whatever that is also we have to provide a name let's just go ahead and say this is h mr h and then we have email which can also be h at the rate h.com I wish I would have that email and still complaining because one more parameter or one more property needs to be there which is is active let's just say this is not an active user okay false and what is still your issue so we have id name email and a string why is it complaining it says false is not assignable to type my bad should be saying that this is a Boolean okay honest mistake there all right so we have gone through with this now what we can do is I can just go ahead and say hey my user is about to change its email so we can access the email and I can say hey now your new email is something like h at the rate gmail.com you're totally allowed to do so but in case you want to access something like my user dot underscore id you should not be allowed to change that so you if you just try to sign anything to it then obviously it will complain that this was marked as read only you should not be doing this so this is one of the use case of whenever there is a read only keyword that is coming up but maybe you also want to have some of the things like user has registered by UPI or maybe some credit card details so obviously we know not every person has credit card so we are going to say credit card details this is going to be a simple number now obviously not all the user bad number there we go so we obviously know that not all users are going to have credit card details we also allow some users to come on our website and have free access to the platform so this could be marked as optional so all you have to do is come up and put up a question mark here now this will not complain if you pass on that detail that's great it will be utilized otherwise you can just put a question mark yes I do agree when you first time are learning about the typescript this question mark before the colon is a little bit weird syntax but over the time it will get over so this is the really easy use case that we have in the card details and all of that so you get the idea this will not allow you to complain and by the way a little bit more to surprise you not surprise you actually give you more in depth of the detail let me comment this out so that we can successfully actually compile this into typescript so that will give you a lot idea so TSC this one is my objects and if I go ahead and run this this creates an object file but I hope you can see that now we are exporting so much so we are exporting ES module IDs there and all of these details are there notice here there is nothing which is depicting in the JavaScript that hey you are allowed to modify this idea or not but the moment I uncomment this code now this is giving me an error now notice typescript will stop me from doing a lot of things in my object notice here there is nothing still and we have we are working just on the properties or the config file of the typescript that will allow me even in the future it will allow me to stop producing that code but there is nothing in the JavaScript which actually stops you that so this is a pure function or a feature of the typescript itself so just make sure you remember that part okay now one more thing I would like to mention since we are talking about the credit cards so this is a scenario will build just based on the credit card so there are something known as or there is something known as mix and match of these types so let's just say we have a type and first thing that you want to have is a card number so let's just say you define that hey card should have a number and this is how I'm going to store the number so you just say give me a number or I'll say yeah number is number is actually keyword so let's call this one as a card number all the work is here and this is going to be a string it couldn't be anything and then also you know that if you are storing the card details the card number alone is not enough there is card date as well let's assume that somebody storing that date or I'll call this as card date just to be sure that is also being stored in a string format so there are many cases where you want to simply store this card number card detail or card date but you also realize there is a CVV number so yes this is a fictitious scenario making up because there's just one detail it's easier to explain but in real world use cases there is this is too much a big of a type that you have created so you save a lot of time so in that case you can go ahead and say that hey I'm creating a new type and all you have to do in this type is you can mix and match of the two above so let's just say we are saying this as card details so obviously now we have to compile this card details with all the things so card numbers expiry date CVV all is coming up I know these two are above defined so I don't have to redefine the things I can go ahead and say that hey this will be off type being created from the card number and then I can use an M person sign to combine them together M person is to use all of them together not just or like get this one or get that one and is for combining all the things so combine card number and also combine card date and also I want to give one more because we didn't caught up with the CVV so I'll just put up an end and create an object here we'll say that give me a CVV which will be of type number so now if I go ahead and create any variable or maybe any object using card details I have to adhere with all the values up here so this is really really easy and again right now you're looking it from the perspective hey there's just one value here there's not big deal I could have defined it but imagine the scenario where project is coming up from a long list of coders they've already created couple of types which are doing absolutely great you just want to utilize them yes I do agree this object is a little bit overkill not a good practice at all nobody would advise you to do such things on the go it looks very hacky but just wanted to make a use case this up till here is definitely a use case where you define a new type based on the combination of previous two type so remember both examples are here the first one is a good example the first two where you use existing types which defines another third type by using the existing functionality there is also a hacky way of doing the things which is not a good practice but still we can do it if we want to so that's it a really simple way of handling the situations up here and nothing much of a big deal so now you know a little bit more about the type script than you know before starting the video so for that hit that subscribe button and let's catch up in the next video arrays in typescript don't have much but yes behind the scene there is a little bit more to the arrays and if you look and come up here into the arrays you can see that's it that's all the arrays are about in the type script really short really simple paragraph that we have on the array but there is a little bit more of syntax that we can discuss and we just need one video to understand arrays in type script and this is that video so hit that subscribe button and let's go ahead and move forward to understand arrays in type script really simple just two types of syntax and pretty much basic let's go ahead and get started with that I'm pretty sure you have hit that subscribe I'm very sure you have promised that at least I hope so anyways let's go ahead and get started with that let me minimize this and I have created a new file of course call it as my array.ts and let's go ahead and try to create an array so one of my favorite thing to do with the arrays is have a lot of superheroes so let's just say if we have a lot of superheroes this is the syntax how we go ahead and do that now I've seen a lot of people who go ahead and go like this that this is an array and okay maybe I've gone through this if I hover this this says hey this is superheroes which is an array of type never that's interesting what happens when I try to go ahead and push some values into this one so if I go ahead and say hey let's just push a superhero into this one and let's just call this one as a let's push in spider man spider it gives me an error that says hey you are not supposed to do that you're not allowed to that the string is not an assignable to parameter type never that's interesting so remember I we discussed a little bit about the never in the past so never is something which is supposed to never execute or end the things it's it's really one another use case of never so this is not how you should be defining it so always just like we were able to put up a colon and number we should be actually defining it like this but this will still give you an error because now you have mentioned that hey no matter what happens this superhero is a type of array but an empty array it should always be empty because this is what the definition is saying of your Superman of your superheroes it says again a string is not a type it should be never again so the way how we define it is simply saying the super heroes is going to be of type of a string array yes that's the basics in text and yes that's that's all to the array you can go ahead and say hey this could be a number this could be a string yes there is also a type where you can define that it can have both numbers and string will discuss that later on there's a separate video for that but you get the idea you get the point this is how you need to define it and now you can push any values to it really simple really basic we can have more of this let's just say instead of superheroes we want to have something like superheroes or maybe something like a hero power where we define all the numbers this can be a simple number and I can just go ahead and say I would like to add hero power and in that I would like to push on some numbers so two is absolutely fine so this is the very basic syntax of how you do it but there is also one more way which you'll find in a lot of code basis that that is also being written let's duplicate that let's comment this out so another way of defining this exact same thing and again there is no good there is no bad in this case they define and represent exactly the same syntax behind the scene the working is exactly same there is no like efficient way or bad way this syntax of declaration is really simple you can go ahead and say array then in the diamond brackets you can just go ahead and define number or any other data type that you have for example it could be string it could be number whatever you like to have this is all the simple basics of it now it's not like you can have the numbers this is where the type actually comes up really handy for example if we have a type of user you can go ahead in my say that my user has a name which is a type of string and also say that this is is active so our user in the database is defined of just two values which is a number a string and a boolean and not just numbers and the string you can actually define it as simple boolean as well and you can say that hey I want to have all users so let's just go ahead and define a simple const call this as all users because a lot of user about to come now just like we define something like an array of numbers or a numbers array and initialize it with the empty value you can also go ahead and use something like user now it is very obvious that whoever the value is going to come up or whatever the value want to push into this array at line number 10 all you got to do is add the data type which follows this which is a type so let's try to push that so we'll be saying that all users let's push a value to this one if I go ahead and push it like the empty one empty string if I try to push that save this this obviously will give me error at the runtime right now sometimes system is slow so it doesn't give me that values so let's go ahead and say hey we want to push an array into this one this is going to give us a value which is not really good so let's try to have this one and again we need to pass on an object I'm pretty sure this will give me an error as soon as possible so there we go now we got there so empty objects are not allowed because this needs to kind of follow the protocol not that's a correct word protocol but this is actually this should be a type user that's all I'm saying so user has two property the name which is which can be an empty and is active that can be simply a true true if I can write that so there we go now we are able to push the values into it so really simple there's nothing much too complex about it just two types how you can define them really go ahead and do that now also there is one more way that you should know about it because maybe you're using some ml models to it and there is some complex error type so in that you are defining numbers or numbers because when you take a picture the picture is actually an array of all the rows and values from Python or some stuff that you actually work on with so in that case say let's just say you have a number of array and then further down you also want to have an array then you can go ahead and just define an array just like this and further down I can go ahead and come up some values something like this so this is a coordinate or maybe a simple pixel values how much RGB values are there so let's just say 255 comma 255 comma 255 so yes that is string the way value how you can add it if I try to add a string it will complain that hey that's not the data type string is not a string should not be there it is supposed to be an array of array so this is the syntax just remember that it's really easy numbers and then we can have array inside the array so really basic and simple as we will deal up more with the array just like you are now feeling more comfortable with the with the simple variables and a little bit push values you will feel more comfortable with the arrays as we go further but this is it this is really the basic as you can see into the documentation as well there is nothing too much to define about it and if I go ahead at the top if I go ahead and search for array there's array there is a generic object type the array type and there is a read only array type as well so if I go ahead and look for this one the array type we can see that this is all the arrays of type string and we can have the arrays something like that pop and push the values and numbers and there is also a read only array that you can define so values read only array type of string will definitely go through with these kinds of things later on just wanted to make sure that there is nothing too much in the array just the basics is here and I think this video is good enough to get you up and running and started with type script and arrays in type script let's catch up in the next video hey there everyone they share back again the other video and welcome to another video of the typescript series we are trying to aggressively move into the typescript world and I'm trying my best to push as many videos as I possibly can so another video in the typescript series in this video will be talking a bit about the union type and I really am not looking forward in the series that I just go ahead give you what is union type and that's it I really want you to write better code in the JavaScript and that's the whole idea of the typescript series so I also try to do some of the examples that we use in the production and that can help you to write better JavaScript code with more contextual understanding some people don't like it some people just say hey give us the syntax and that's it for that you could have read any article or documentation but this is the real knowledge a lot of people don't like it probably they haven't written any production level code but again this is the way how you should learn with a contextual understanding and by the way I've also got a new mic after thinking a lot I ordered it I am pretty sure those who are hearing it in headphones or probably in a good speakers can easily notify and understand the difference that we have moved from last video to this one great one so here we go we have got a new file which is my union.ts union is a really one of a fantastic thing in the typescript which allows you to be into a situation where you are not pretty sure what type of data is going to come in it might be a number it might be a string but you are not sure it can be either of the two now instead of using any I it is highly highly recommend that you try to use union type union is like a combination of two or three or more types of data that you can include into a variable or an array and whatever that is and this is the only video you need to watch about the union I haven't broken down this video into five different videos it just one single video it will help you to understand a lot of context and yes it will help you to avoid any into your type script code so let's go ahead and work on with that that how it actually works and yes some of the examples are just code based assuming that you're building any game or maybe a banking application in JavaScript so let's just say if we have a simple score this is how it goes and you're saying that my score is going to be 33 that's fine nothing bad nothing bad no big deal but you are not sure that whether this is always going to be a number or it might be some of the cases that it might be a string as well I don't know why but it can be possible so in that case so far we have been going through and put up an annotation that hey we want it to be a simple number all the time when you do this this is all fine but you can use a pipe sign which is just above your enter key on the right side and you can use a string as well now it is recommended that you try to keep it very strict as much as strict as possible because there is nothing that is stopping you to put up more data type or in fact list down all the possible boot data type that is available in the type script but use it wisely use it carefully it can allow you to do such things which can be really useful for example here if I go ahead and say hey this score is going to be now 44 that is totally allowed no problem at all it can also allow you to do some things like score is going to be 55 but this time is a string 55 if I go ahead and do that no problem at all if I go ahead and remove this and I save this yep there is a problem there is a squiggly line here that says hey whatever you are trying to do this is not good so you shouldn't be doing that but again this is how the basics of it work hi I noticed that 70% of you haven't subscribed to my channel it would be really a great motivation for me if you hit that subscribe button so go ahead hit that and now let's carry on with the video now this is not just the basics of it you can actually use this boolean type or this union type not boolean union type with your own custom derived data types as well for example you are building an application which has a multiple hierarchy of user and admin and you want to define a strict type for that so for example let's just say we have a type of user that we are defining and user always comes with a name that is going to be a string and apart from this we will be having of let's just say an ID which is going to be a number no problem at all let's go ahead and duplicate this code as well oops commandy come on didn't install the shortcut for that probably not okay so this is going to be an admin so let's go ahead and say this is an admin but instead of having a name this admin has a user name now it could be string it could be another data type but whatever that is it's totally allowed to have this this is a type that you have defined it's not a literal type that we see like numbers and boolean this is a type that you have defined so we have two types now let's go ahead and create a variable for or maybe an object whatever you like to call this one let's just say I am defining my name as a simple user but it could also be on some days an admin or maybe on eventual future it could be admin we can go ahead and simply say that we can go ahead and say that hey you since you are a user you'll be having a name so let's just say name is going to be my name and you should also have an ID which is number so let's just say this is your ID so there is no problem no problem at all but eventually in the future I can go ahead and say that hey now with ish is going to act as an admin so you should have a user name instead of this so I'm totally allowed to just redefine the things for example I can go ahead and say now I have a user name maybe an hc and I also have an ID maybe I'm using a same ID for some purpose so 334 this is totally out and typescript is not giving you any problem for that but on the other hand if you go ahead and try to remove that it is cannot or can never be an admin then obviously we see that there could be an error here but if I go ahead and hit the command Z that it can be admin or can have multiple types of data then it is really really useful now this kind of a thing could be really really useful for writing the functions because sometimes there are situation that function either accepts multiple values or sometimes returns multiple values so the syntax remains same we have discussed quite a lot about function but let's just go ahead and have a simple more discussion about it let's just say this is get dbid so you want to get some database values or some database id from here and don't know somebody is passing you an id there is more like calculated id in the database that you are storing so this could be a simple number that somebody is passing you but it could also be a string so there could be multiple ways of how the things can go up here now in this case if somebody gives me and I do a simple console log and I say that dbid is and then I simply go ahead and use this and I say hey just print id and here we are making some API calls and you're doing a complex application and something this is totally allowed this is all good there is nothing wrong in this one and when we use this one this method now get dbid I can go ahead and pass on a three here or I can go ahead and pass on a three just like this it is accepting all the values but the problem the problem here comes up with something when you try to do some manipulation with this one so let me go ahead and comment this out first copy this and comment this out and we'll actually go up here and paste this up now notice here what I am I will try to do is I'll remove this one and the above one I've kept for your purposes so that you can see what is happening but let's just say I take this id and I just apply a two upper or two lower case lower case like this why the squiggly line that is the point why a squiggly line because I have told you this is a string if I go ahead and remove the number squiggly line goes away but if I go ahead and put up a number and the fun part about the typescript is it knows so much so it if you hover this up it says property two lower case doesn't exist on type string and number so it is treating it is treating it not just as a number or as just a string it is treating it as a new data type that could eventually end up into a number or a string so both of them are a possible use case if you remove a number then it's fine that hey these kinds of methods do exist but you need to do a really strong check because right now notice here the parameter id could be string could be number could be really a problematic so if I go ahead and say that hey I'll just cut this out I'll first verify that what is happening so I'm going to go ahead and say use an if clause that if id or the type of id is equals to let's just say a string then I go ahead and do this then no squiggly line and if I go ahead and say id dot maybe what what the values of or I can just go ahead and say id plus two so it is totally allowed because it's a number so it says cannot be applied to type string so I've already checked it for string but it could be a number here so I need to verify that whether this is actually a number so we can perform the operations so here the squiggly line goes away and we can check it out similarly that it could be a number and then in case of the number then go ahead and perform the numbers operation but in case of this is how the lower cases then go ahead and just use that so really the same line of code but if you go up here the id here is or if I hover on this one notice here it just says now it is 100% string it's not maybe because you have put up an if condition and based on the if condition I'm 100% sure that if you are reaching this line number 30 that means you're already verified an id is 100% a string here but if I go ahead and try to put it up as number then it knows that this kind of a block is going to get enter only in the case when the id is actually a number so you get the idea that how this is being done needs to be a narrowing down of what the number type is that is basically your union narrowing and again there's there could be a lot of discussion around it but you get the point that you need to check it and verify the type if you're writing a better code in the functions of this one so really a vague example of how to get the id's but you get the point of how the union type is there it's not just simply a word that hey just add a pipe and do it it's more about how you implement those pipe in your code now with these unions we also can actually have a small discussion about the arrays because this is where actually it becomes a lot more fun so for example let's just say or let me just go ahead be a const is fine so let's just say we have a data and in that data we have seen that already if you want to have all the numbers so we can just simply say hey we do have number and this is going to be number of array or array of numbers and then we simply go ahead and say that hey I'll add up a values like I'll be adding one two three and let's just say I add a value of a four then it's a problematic because you cannot have strings because it's a array defined only for numbers so this is definitely not allowed you cannot do this and if I go ahead and say that hey this is going to be a string the numbers are not allowed you have to wrap each number with the string so then it is allowed but and let's just call this one as data to but if you want to have both of them then it's an interesting one so data three I don't want string I want numbers as well so I'm going to go ahead and say hey pipe and number and you see no error here like there is a smaller but I'll walk you through what this is this is a classic mistake that a lot of new typescript developer does because this is now saying that hey this can be either a string or a number so notice here a lot of people come up here and say that hey this and this removes the error this is a classic mistake this is a classic mistake the interpretation in terms of arrays in typescript this is is that it can be either all the numbers or can either all the strings so it cannot be a mixed match of let's just say three this is still not allowed this is not allowed so it can either be all numbers or all string the syntax or the way how you do it is actually you remove this and you wrap this up inside a parenthesis just like that and there we go now you can have both types in your array you can have strings and you can have number as well or probably you can add more as well maybe for some crazy reason you want to have all the values as Boolean as well let me just go ahead and award wrap this there we go now you can go ahead and add even a true whatever you like again this is a very very not thing to do but yeah a lot of people does that and also I've noticed a lot of people just when these kinds of situation happen they just go ahead and do any which is not going to give you any error but the whole idea of using the typescript is not just that here you remove all this quickly lines it's about how you're actually making your types more strict that is the goal behind that so I hope you remember that and there's also one more classic situation let me walk you through that you can actually allow some of the numbers to be very strict something like there's a pie and you want that it should always be 3.14 and then you try to allocate it a value of you can only allow to have a 3.14 so later on if you just try to have a value of a 3.14 5 or maybe something it's not allowed so this is a literal type of assignment that yes this should only have this value or something like this this is not a useful case let me give you a useful case scenario where this could be really really useful maybe you're designing an application for an aeroplane so let's just say there's a seat a lot a lot mint and you want to have only three types of value to be coming into this one so you can go ahead and say there's going to be an aisle or it can be a middle or it can be a window so this is really helpful and useful case scenario so later on if somebody goes at head and says seat allotment is going to be aisle that is fine but if somebody try to overwrite that with a seat allotment of let's just say somebody's giving you a crew seat which is specifically meant only for crew then it's not going to allow so yes there are use cases that it can be only three types really fast really quick can make your application really secure and less prone of the error so you get the idea how this is being used yes we can have a little bit more discussion about the union we can go further but I think all these use cases will help you to write bear code into the JavaScript or TypeScript let's go ahead and catch up in the next video hey there everyone if they share back again another video and welcome to the typescript series so now let's move into the typescript segment which is available only in typescript and not in in the JavaScript world and this is known as tuples and tuples there are a lot of names which people call it I usually call it as tuples and yes this is almost similar that is available in other languages that you might have heard and seen such as python but here this is not that much well implemented and that is the reason why I wanted to talk a bit about tuples in this video they are great they're fantastic I'll tell you a special use case where it can be used and I'll also tell you where you should not be using it and where you should be cautiously using it because there's a good thread in the stack overflow which you should really keep an eye on which points out some of the not so good things about the tuples and you should be worried about that so first let's see what tuples is and in broad category it's just an array a kind of a specialized array that is given to us by typescript with some restrictions on to it so let's go ahead and catch up with that one so let's just say there is a simple user that you want to create so how we do that we go ahead and say hey this is going to be a user and maybe this user is going to be a type of string an array our array of string and let's just call this one and let's initialize this one as simply saying this one is going to be actually simple like that or just a string both are same so this is okay this is no problem at all but let's just say you want that it should be a string and a number and a Boolean but in a very precise order that is the most important thing in a precise order you don't want that right now if I go ahead and do this this is obviously problematic because it's just a string and if I go ahead and say that hey it can be either string or a number but an array so I go ahead wrap this up and I say and say that hey this can be a string or it can be a number number there we go now I can go ahead and say hc and comma one that is fine but I also can go ahead and say one comma at see that is also fine but there are cases there are special situation where you want a specific thing into your array to be pushed on maybe that's an usually that's a usually an API call because the API structure data is always in a very specific format if something comes up first in the narrate that always needs to come up at the zeroth position and something that needs to come up at second position that always comes like this so there is no restriction right now in front of us and as you know this type script is all about putting more restriction in front of us or on top of that so let's go ahead and duplicate that so I'm going to go ahead and come on let's go ahead and duplicate that not like that looks like I'm forgetting the shortcuts okay alright there we go so the one way of doing that is actually converting that into us into a tuple so let me go ahead and do that and how we do that you can go ahead and simply previously we're writing everything outside of the array now if I go ahead and say that hey this is going to be a string and then it's going to be a number and then probably it's a Boolean so this is all what we have as a user as of now why are you yelling it's a redeclaration yeah probably because in my other files also I'm writing a lot of users so let's call this one as t user or small t user for tuple user and we're exporting why are you yelling at me no worries we'll be saying hey you are t user so it's never being read so that's fine now let's go ahead and try to declare that so we're going to go ahead and say hey t user and how can I add value to it I can go ahead and say the first element should be strings okay let's just say let's a first user or first value in the array string then we can go ahead and put up a number let's try one three one any random number and then I'm going to go ahead and say true so these are the three values that I've added up here it still is having an issue and again my pad come on let's okay now all good so now notice here there is a strong pattern here that says string then a number and then a Boolean so I cannot reverse this order I cannot just go ahead and say hey true is the first element then we are going to put up some number and then I'm going to put up a string here this is this is not why the tuple is there tuple is to make sure that even not just what is inside the array even the order of the array really matters in the case of tuples and especially very helpful in the case of API calls or maybe there is some database array which in which the specific order is there maybe some likes are there into your array and each of these likes are being inserted based on when somebody like so in that case you can go ahead and use that I know very vague example but yes tuple is all about restricting you so that you have an order of the data okay let me go ahead and walk you through so let me first fix this so there we go this is all happy and another case where you can use it a classic example which you'll find everywhere is RGB because that actually makes a lot of sense in case you want to have an RGB then this needs to be a number obviously we have something like 255 255 255 so all the three values should be number we don't expect that there should be fourth number probably for an alpha or the opacity you are not bothered about you want strictly like that so if you define a type like this then obviously you have to go ahead and have 255 and let's just say 123 and then 112 so this is a guarantee that always these numbers are going to be there for example somebody puts an opacity and say that hey we want an opacity of 0.5 then this is not allowed because this will say hey this is not how it is declared this shouldn't be like that and if you remove this you can see all happy now so one of the example up here but it's not like it's all easy and all useful and as I told you you can you don't have to just put up a reference just like this you can define a type like this as well for example we have already studied type quite a lot so let's just say you're going for a user and that user you say that always comes up with certain thing like there is an ID and there's an email that comes up so now you have defined anything who is following or is a type of user needs to be exactly like a tuple or tuple and there it's going to be a simple number and a string always and always it is compulsory so for example let's just say we go ahead and say this is a new user which is a type of user and if we are going to follow this if the type is being defined then we cannot just go ahead and add anything into this there should be an ID and there should be an email so let's call this one as example at google.com so this is really important you cannot just go ahead and say that hey this is going to be a true no you are following a type here which is tuple and this is not a lot but there is something really wrong about the tuples so for example if I go ahead and use this one this is absolutely fine I can even go ahead and change this one so new user and I can just go ahead and say hey at first position of course I cannot go ahead and do something like this that at first position there can be a number not allowed to but make sure you are cautious about that that you can actually override that so yes this is totally happening depends on what version of typescript you are using so you can actually manually put some restriction via your code but right now there is nothing which is stopping me to override these values so it's not a guarantee that the values will never change it will change you can change it and that's it the other thing which is really controversial about the this entire thing is let me go ahead and comment this out or we can actually leave it no problem I can actually go ahead and say new user and if you notice it carefully just in array it just in array with the restriction that first value should be number second value should be string or you can say zero value first value you get the idea since this is an array I'm actually allowed to use all the methods of an array and now I can go ahead and say true and you might have obviously noticed it that new new user is now not following the protocol that we assigned it and by the term protocol I mean to say that what restriction we put up we what kind of a guarantee we put up with the tuples here that hey it should be number then a string and nothing else but with these methods I'm actually allowed to do so not great not great but I can actually show you something really interesting up here so there's a nice article here on the JavaScript section of the stack overflow so TypeScript array push method can't catch a tuple type of array and it's really long ago one year 11 month not long in terms of a programming language career but in terms of what what is this and this is a good question somebody try to rephrase it nicely that tuples are known for their length and where the elements may have a value so when you say number and string it is guarantee that you'll have only two length with first number at zero position will be number and a string but you can use push and push was just an example I used here you can use unshaved shift and that messes up everything and even there's a link to an article that hey how this is going on this was closed by Microsoft that hey this is how it is that's a great read if you try and give your five minutes of your valuable time then it's a really great thing to read about why this happens and all of that so really there's a lock and there's a great answer about the read only's and stuff as well but as a matter of fact yes this is all there but the fact is that still this is possible so make sure if you're using TypeScript and you are using tuples and are too much reliant on that this is not just this is something that can happen to your code base so I think this is all a good overview of the tuples and I think you will be cautious about that and let's catch up in the next video hey did everyone face your back again the other video and welcome to the TypeScript series and in this video we are going to talk about enams some people like to call it with its full name I'm not going to do it I always love to call it as just enams the full name is just math full I just love to call it as enams let me know in the comment section what is the full version name of the enams and how do we call it I would be really happy to see that how many people actually can put down a comment in this one okay moving ahead enams really crazy really awesome and I'll tell you the reason why I called them a little bit crazy at the end of the video so let's go ahead and create a new file and talk about them really simple there is nothing too much and this video is more than enough for you to understand why there should be enams and why is it helpful so let's just go ahead and say enams my enams.ts a new file is there and let's go ahead and do that now why enams exist now enams exist that there are certain times when you want to restrict somebody's choice or with the values that are offered here for example in an e-commerce application somebody is putting up an order so you want to really restrict the order status here so order can be in the wish list or it can be delivered it can be shipped it can be returned there are a lot of things similarly in case of plane ticket booking especially the aeroplane there are only three types of seats which are regularly available so aisle middle and window you don't want to assign them crew tickets or something else like that there can be thousands of cases like that the whole idea is how to restrict the user's choice in one easy ways to simply declare some constant so some something like I would love to do is I'll just say aisle I'll call this one as zero I'm going to go ahead and simply have an constant with the middle and that's going to be one and then I can go ahead and say this one is window and that is going to be two so there is nothing wrong with this and in later on case if you have a simple if-else statement you can just say if the let's just say there is a variable there is a seat and that seat is going to be simply you can go ahead and check up that if that is equals to aisle or something like that you can go ahead and do that yes of course this variable doesn't exist but you get the idea that how this is being done you can evaluate to either zero or something like that you can go ahead and say that hey I'm going to evaluate for zero something like this but what if somebody changes this variable not a good idea to be honest this is not a good code I guess there could be constant but in the case where you want to have three restrictive options in that case enums actually serves you really well and declaring the enum is really simple you go ahead and put up an enum and then we're going to go ahead and put up a simple seat choice really simple and then we're going to just put up the seat choice for example there is going to be an aisle there is going to be a middle and there is going to be a window now anybody who wants to use it can actually use it let's just say we go ahead and create a variable that hey this variable is a seat choice so let's just say that HC seat you're trying to refine or give me a seat from this one so I don't have to actually go ahead and do this I can just go ahead and say hey seat choice and I say dot and only three options are available this makes my code a bit more reliable so like that and maybe later on there is an international flight so there could be four seats in the one so I don't know what to call the fourth one but let's just say we call this one as fourth so I have to do nothing I and immediately I have moved my flight into the international one and I can put up a dot and all these options are given to me so there could be a lot of database cases where you want to provide more options maybe you're designing a navigation bar or a menu bar in that you want to have more options whatever you want to do you can actually go ahead and do that now the most important part with this one is how you can have this one now is you notice when I hover this one it says it's an enum member and the seat choice dot aisle is having a value of zero and this is by default and there are a lot of ways and notice this carefully there are a lot of ways how you can define this one default is always the first value gets zero then the subsequent value gets an increment number so this means if I don't like that hey I don't want to start with zero maybe there is some special code in my aeroplane that I don't want to call it zero I want to call it as 10 you can go ahead and do that now automatically for whatever reason you are evaluating it this is 10 and obviously the next value is 11 then 12 and then the 13 so this is totally allowed and you can go ahead and do that maybe you want to get started with any number like that so for some reason the middle is now 22 yes that is totally allowed it's not like you always have to go into the increasing order but notice here window always get 23 and this get 24 so you get the idea that you can actually put up a strict number and rest of the values will follow up or maybe you don't want to call this one as like this so you want to call this one as 44 maybe whatever the reason is so you get the idea how this is being done let me go ahead and remove this and another way of how you can do it is you can actually put up some values so for example you don't want to call it as I'll you literally want to call this one as I'll so you can go ahead and do that now as soon as I do this and notice here it says that hey enum must have an initializer why is it having an issue shouldn't be having an issue no worries it just is asking for a value so now we are moving ahead since we have actually mentioned that it's not numbered numbers are automatically being calculated now I need to go ahead and put up values for all of this one because I've I've broken the pattern that it's not there again I should be consistent and this one also needs to be window and window and this one and again it's not really compulsory that you put up all the values as you can put up hey this is zero so again the once you start putting up the numbers not the numbers the strings as a value then you can you always have to go ahead and provide values for all of them but surprisingly I'll let me show you one more interesting stuff I'm pretty sure that might be bothering you a little bit let's just say I just want to say that that is I'll but this one is three notice here this one says hey that is four and again a comma and this one automatically goes five so these are a couple of ways of how you can define that there is a lot of ways how you can read the documentation and find out that hey you can assign numbers and strings and all of that now the good thing about this is how the values are interpreted previously we saw that aisle is always interpreted as in a number value zero but what would be the inside the value of hc seat that is the most important in this case it would be a little string so if I hover this one notice here or in this one this one is obviously a type of seat but if I go up here this is a literal value of aisle and I can match that up with anything that I like so this is the most important thing about the enum really simple you can define functions around it you can define constants around it variables whatever you want to do it the most important part is of this one how to define them now there's a little bit more to it this is a little bit crazy thing to have it so let's go ahead and this is a great example so we're going to just copy this one and we'll save it so that you can have a reference around it and let me open up my chrome so let's just go ahead and paste it because it is also equally important that we see that what kind of code is being produced when we write this kind of typescript into the javascript just we can actually compile that at any given part of time but this is rather easier so you can see as soon as I declare this enum and if he is being designed or being created for me and if you don't know about if he go ahead and watch my playlist of javascript it's still one of the most valuable series on the internet and notice here this is an if he immediately invoked function is executed here and it gives me a seat choice notice here a lot of code is being generated for me and then I'm able to allow to get this one a lot of people don't like it and that's why you're going to see a lot of discussion around it on the GitHub of typescript as well as on the stack overflow and one solution that is being given is just use const and once you actually do this this doesn't generate too much of the code because see a lot of people don't like the typescript generates too much insane amount of crazy code for the javascript because sometimes maybe you want to directly jump into javascript fix some stuff that script is great but sometimes it's not that perfect it's not matured at some cases in that cases having too much of crazy javascript code is not good for you so in that case you can just put a const before the enum and this will not generate a leak crazy code this will just generate whatever is necessary for example in the case of aisle if I go ahead and just say call it as to the values being assigned as to here and if I go ahead and put it aisle that aisle is a constant being created so yes although you are using this one and you will be given options of choosing from restricted options but the final javascript code that is being generated for you is still a really clear and simple so again the moto behind having a typescript is having a restriction while writing the code but the code that is being produced by the javascript should be clean and beautiful and that is why there's a lot of discussion and a healthy discussion around the community which is good and which is not and I think now you're capable enough to take a participation in that that whether you like this iffy style of code and what is this the previous style of code we're declaring the constant so and again don't forget to put down the comment section the question that I asked you in the earlier of the start of the video and that's it now you know a lot about the enums and let's go ahead and catch up in the next video hope you have already hit that subscribe let's catch up in next one hey there everyone face here back again with another video and in this video we'll talk about interfaces in type script now interfaces are pretty cool in type script and yes I would 100 percent agree they sound exactly similar to type that we have already studied in the type script so they almost are identical and that is why it is required at least two or maybe three videos to finally understand where the interfaces are and why these are being so much used into the world of type script now before we move forward make sure you hit that subscribe button as well as forward these playlist entirely into your whatsapp group into your college group so that everybody can take advantage that would be really really beneficial for me and you pull of us let's move ahead and talk about interfaces let me take you on to my screen we have created a new file my interface dot ts and yes you'll find a lot of similarities between that so yes I do understand that part and we'll take care of what is the differences between them the worst part and all of that but right now let's go ahead and just talk about the interface so yes it starts with the keyword interface and let's just say let's try to assume a scenario you're creating a new user and this user has some of the properties like maybe email maybe a user ID maybe there is a Google login maybe maybe there is a database ID as well and you're trying to start a trial for this user for whatever the services you are you are actually selling and also you want to give him some discount code as well so this much of the scenario will help us to get an entire overview of how things are going to be there so I think that's a good scenario to understand the interfaces bit by bit and pieces by pieces so moving further let's just say we call this one as simply user feel free to call it whatever you like and we have a user so let's just say user starts with an email that is going to be a simple string and we'll be saying that you should also have a user ID and that will be a number all right and yes I do agree you might be saying hey let's go ahead and create a type of this and then call this like that and yep that also exists and that also works but we're not here for type we'll go through the differences between them in the next video but right now let's just jump back into interface that yes now interface is more like a scenario or kind of a like interface doesn't have those nitty gritty and details of how it will work but these are basic overview of that whenever you're creating a user these are the fill which are compulsory these are the methods which are compulsory now how you implement them that is so totally up to you but interface yes loosely you can say it's more like a class but yeah lose form of class very broad overview a very superficial view it will ask you it will force you that there should be a method the name should be the same but it doesn't say what should you do inside it it just has a basic protocol things that hey this is I expect this is of what is supposed to do but it helps a lot in the code and especially in the long and a really bulky code that this helps a lot so let's try to create a user so let's just say we create a user hiddesh and let's just define that that this is going to be a type of user as soon as I do this this creates a problem that hey hiddesh should be a type of user empty parenthesis nope that's not going to work because you are missing up email and the user id so if I go ahead and say email id is going to be let's just say h at the rate h dot com and of course we need a user id that will be to to one one whatever that is okay this is great this is really valid maybe let's just say user is also trying to log in from the Google and he does have a Google ID so we'll be saying Google ID Google token whatever that is but I'm not sure it might be not as compulsory there is a email and password login as well so you can obviously use these fields which we have used in the past as well so this is now optional you pass it great you don't pass it nobody is going to stop you and there are also read only fields which we have already seen in the past so read only can be something like db id so there is a database id you don't want to change it it should be number it's not optional so obviously you have to fill it so we're we're going to say that db id and that one will be a number so I'll be saying to do yeah that that's a database id now the advantage of the read only is same as what we have studied in the past hope you have watched that video so for example if I go ahead and say email that email is going to be let's just say I changed my mind and I say it's going to be h at the rate hc.com I wish I would have that domain but if I go ahead and try to manipulate any of the read only values for example db id and change it from two to two three three it's not allowed you get the idea this is really basics we have seen this and done this in the past as well now what makes interfaces really interesting is the definition of the functions and there are a couple of ways how you actually define it let's start with the trial user so we're going to say there is a start trial and you want to provide a method for that so start trial and there are a couple of ways how you define the method the first one is the boring one I don't like it much second one I like more so the first method is you define a name and then you say hey this is going to be a method there can be return type of void or string whatever that is let's start with a string so now as soon as you create a user type of hitesh you need to provide a method here as well that needs to be there so let's just go ahead and say start trial something like this and this needs to be a method that is compulsory you can now just go ahead and say hey for because it's it's not allowed it will pop you that hey when we are creating this this needs to be a function which returns a string as well so it's really easy to define that so what we can do is we can just go ahead put up a colon and say hey this is going to be a method and there we go now only compulsory part on to us is to return a string so we'll be saying something like trial started that's it and that's pretty much it that's all it is right now and yes of course there could be more logic inside it but this series is not about logic building this is more about getting friendly with the type script now there is another way of doing this which is something that I like more because it's much more clear to understand I'll be saying let's just say trial and what you can do in this one is you can just put up parentheses just here and this makes more clarity actually to me that this is not going to be anything this is going to be always in method and then after that you define what type of data it is going to return it might return nothing it might return any badly any but you can just go ahead and say string now if I go ahead and try to return something like to it will say hey what are you doing you shouldn't be doing that you should be returning a string so yeah that is one of the way this is my favorite way but again let me know in the comment section which is your favorite way maybe you like it more this is more something that is making sense to you now last but not the least is remaining is the discount code so let's just say user wants to get a coupon so we're going to say get coupon these days it's a very sales tech to keep world so get coupon and coupon should have a name so let's just say we are saying coupon name and that name is going to be in the string and the return type is going to be a number number there we go now obviously we have to put up this method now get coupon and there is something really interesting in this one which type strip allows you to do is first let's get coupon and then again this should be a method which is going to return a number so let's just say we are going to go ahead and say return 10 because you get a 10% off but notice here right now you're saying hey you should take a parameter of string right now it's saying hey user dot get coupon so it should be a method so right now it's not popping us anything but in in technicality you should be providing a name which is a compulsory one you should always get that and I'm pretty sure by doing a little bit of the tweak settings and stuff it will yell at us now interestingly you should always provide a coupon name and let me show you something interesting I can just go ahead and say name and then I can provide something like this there we go with a stand something like this and this is allowed this is totally loud you don't need to match this name with whatever the name you are providing it is just a reference that hey you are providing a coupon name which should be a string and you should always provide that that is the whole idea you can go ahead and provide a value as well which should be a number and now it is expecting that there should be two values that you should pass on here now right now it is not giving you anything but you can just go ahead and see off and if I go ahead and try to put up something like string like this notice here it says hey you're not allowed to do so you can totally avoid it or if you're passing it up let's just say you have to give a number so that is 10 because it's a 10% off so you get the idea that how this is being done and again these are all compulsory parameters that we're passing on right now and this gives a brief idea of how to define interface again use cases always helps us to get things more readable but again interface is not done yet we need to have a little bit more discussion about interface you can easily get it confused with the types but yes these things makes it a little bit more powerful and one thing to note here one thing very important to note here strut tile is a method which returns a string it doesn't force me that how you are starting the trial and it is also making me compulsory that whenever you're using this hitage creating that there should be a method strut trial and it should return a string no matter what logic you put up I really don't care so this interface is always like an like an interface like for example your operating system is an interface for hardware it doesn't allow you that when you click a button how does it happen you don't know and you don't care about it you just know if I click on this something happens if I double click on a folder it opens up how it does behind the scene what methods are being called you don't care so that is an interface and that is exactly the same interface in the typescript as well let's go ahead and catch up in next video hey there everyone face here back again with another video and let's continue our discussion for the interface in the last video we saw the interfaces and yes we found a lot of similarity between interfaces and the type as well but the method that we are having here is a lot more difference we haven't discussed them earlier but this makes interface a little bit unique as well and in terms of more uniqueness interface also comes with an extension and some people like to call with fancy words like you can reopen the interface and all that that's nothing it's just adding more properties into this let me walk you through it will make all of the sense of what is reopening of the interfaces really not a big fan of the word reopening the interfaces it's just adding more values to the interface itself so let me walk you through so for example in the last video we worked on really having giving this user an email user ID Google ID read only IDs and couple of methods as well but later on maybe this is not something that you have defined maybe this is a library that you are bringing in from a GitHub or maybe somebody else has written a package and you like this package a lot but there was only one thing missing that this interface doesn't have and a simple this has a Google ID but this doesn't have a GitHub login ID maybe so you want to give that so in that case you can just go have and again this usually doesn't happen like this like once you are writing interface after that this is something that is stored in some files and these are file being brought by other developers or maybe other libraries so you can go ahead and just find out where that interface is and you can actually go ahead and write this user again it is totally allowed and now here we can say that I want a GitHub ID or GitHub token as well so I'm going to go ahead and say give me a GitHub token and that will be a string now with this you have you can also make this optional in case you want to but let's just say this is compulsory for us we are taking an input from the GitHub now all I have to do is make sure I add one more property so I can go ahead and say I want to have a GitHub token and that token is going to be a string so I'm going to say let's just say GitHub and of course with a comma so this is all good and you realize that yeah you don't have to touch this entire thing but you also get the entire functionality in your variable or a constant that you have declared up here so this is why a lot of people love it and during the interviews if there is a TypeScript specific interview people like to call it as reopening of the interface yeah I found it a bit mouthful as well but I think that's great now when advantage also that you get with the interface is inheritance that is something really great so for example you want to create an interface and you know that you want to call it as admin now obviously can go ahead and define the admin whatever you like maybe you like a role or something but one great thing about the admin is you can just go ahead and say extends and extends extends is a keyword and then you can use and you can say that hey I'm going to go ahead and extend it with the user so immediate you get all the properties that are there for admin but you also have that so you can now go ahead and call this one as admin and yes that will also work but since it's an admin there should be some role as well and it can be simply a string then you have to add it but maybe you are defining a role and there are some literal values you have a literal value of admin maybe you have a TA maybe you have something what else maybe a learner learner come on if I can type that that would be great okay learners so now you have to obviously give a role as well too if you are extending this so let's just say we have a role and in this case since this is a literal value I can just just go ahead and say admin this will not be correct this needs to be exact value then it will be correct so you get the idea how you can have it and by the way you can just put up a comma and you can just have another interface if you like that you can go ahead and call that we don't have another but you get the idea how this is being done really super simple super easy and that makes the whole of the interface so you can extend it you can inheritance it you can reopen and inject the values into it but also word of caution if your interface is you are naming it make sure any package or library that you have installed don't have that interface that you'll be messing it up entirely so make sure you don't do that and again I would like to bring in the documentation of the typescript as well so this is the small documentation and yes they also bring down this question that what's the difference between type LSS interface there's nothing too much I highly recommend you to read this paragraph up here so here they make interface and here they make type it says extending the interface goes like this you can simply say extends and then provide the name here that's fine in the case of type we have already studied it that there's an M person and then you go with this veered way which I'm not a big fan that's how you do it and if you want to add a new field you can open this up anytime and do it and the type cannot be changed after being created this will obviously give an error so these are coming up directly from official documentation and this is where you should be trusting the most official documentation so I hope you get the brief idea of how these things are being done and I think now you have an entire knowledge about interface and again read a little bit more of the documentation they will give you more idea but throughout the documentation you'll find this point x and y yep there are great examples but I think more realistic example could help you to understand a little bit more so that's all about interfaces and let's catch up in the next video hey there everyone they share back again with another video and welcome to another video in the typescript series in this video we have so far we have already gone through with the basics of typescript how it works the basics idea how to generate a JavaScript file with it but now it's time that we move a little bit one step closer towards how it is being written in the production and there's not too much of drastic difference it just a setup and setup depends on are you using react angular view whatever there you are using anywhere you're using a writing typescript a JavaScript that's the same place where you can use typescript as well now again if you are if you have been into so far of the video series and you're still asking me that hey there is it going to be a series about typescript for react or typescript for view my friend you need to watch this series again typescript is not for react or view or angular is just a whole ecosystem similarly like if you ask me that hey JavaScript is it meant for react only or is it meant for jQuery only I would say you don't understand JavaScript if you're asking that the JavaScript is only used in react similarly if you ask typescript is only being used in angular or react that means you don't understand typescript still so go ahead watch the video again and I have already cleared the mindset of it in this video we'll be creating a similar typescript scenario where we'll see that how probably in the production you can write typescript and maybe you're creating a basic application with just includes JavaScript itself but you don't want to write core JavaScript you want to write more of a polished and protected JavaScript that's where the typescript comes in so we'll watch through with that scenario and maybe later on we'll see that how this can be introduced with react and other types that you can introduce so let's go ahead and try to string this up and we'll be going with typescript YouTube let's go into zero three and we'll be calling it as pure TS that not a great name but pure pure TS that would be great okay let's go ahead and open this up now the way how you do it is actually we have already installed typescript so TSC is already there so we need to actually initialize it and this is the first time that you are using a typescript like this so make sure you actually are following along with me this is a setup really super easy but make sure you go ahead and follow this up we have already got TSC which is a typescript compiler for us which is globally installed in this case so dash dash in it and you can see there are a lot of options available the one that we are going for is dash dash in it what this does is it creates a simple typescript config file in case you're using typescript with react or something and you're using pre boiler template for that it gives you a lot of options like that if I open up this TS config you can see that there's a lot of options for compiler projects what to disable what is the target right now it says ES 2016 and there are a lot of ES versions that you can target a library there's a whole lot of options we are going to talk about some of them what is your root directory what is your output directory and JavaScript what to allow what to emit what does the output file or output directory looks like there is a lot and as you can see there is a strict there's a lot of options and there could be a dedicated video just for these options and by the way these are the same options that you find on the typescript website so if I open up this typescript website and I go at the very top of it and I say the playground so these options actually are just here so when we say TS config yep these are exactly all the options that are available to us so yep these are the options we will probably talk about them in some other video right now just generating a TS config is good enough really we have not done anything it's just a TSC dash dash in it so really simple and really basic now obviously I want to start a node project here so I'm going to go ahead and say npm in it and I'm going to put up a dash y so that it doesn't ask me too many of the questions so it generates a node package.json file again remember TS config.json is for TS config typescript configuration and package.json is for basically install any node package manager or npm or something like that we're going to create a couple of files so that we can actually work with that so we're going to go ahead and say index.html it's really simple to fill this up so we're going to go ahead put up an exclamation hit the tab it just fulfills everything that we need and here we're going to go ahead and load a script file and we'll be saying now what happens is you can directly go ahead and mention your type script file but what happens in the case of production is actually you have two folders so let me go ahead and say mkdir the first one is source and the second one is dist so dist is a short form for distribution these are the two folders that you usually find now source is where you write your code this is a kind of a common standard throughout all the projects whether that's angular or react or anything and distribution is something which gets on to the production and that is being served to the end user so here into the source we can just right click and create a new file and we can just go ahead and say hey I want to create a new file into the source this is going to be index.ts because that's where you write typescript and the distribution is where automatically the index.js is being created you can go ahead and manually create that or we can just go ahead and create a new file something like index.js usually you don't create it it is automatically being generated so we'll be working on that so this is the file index.js which you have to link up so all you have to do is create a script inside the body and we say that hey go into the distribution and index.js this is where all of your code is going to come in now technically you never ever write anything inside this test index.js this is supposed to be generated but this is the index.html where you actually point towards this file and rest everything that happens into your into your web page happens through the typescript itself but who is telling typescript that hey compile this file and produce it inside the distribution folder inside the index.js right now nobody nobody is telling that typescript that hey go ahead and do that so we have to go into the ts config and tell it that hey this is how it needs to be done and if you just go ahead at the very top and you keep on scrolling you you see there's a lot of things up here but there is something known as output directory if you scroll a little bit around line number 52 or just search for it this is where the output directory is being mentioned that hey where is your output directory hit control slash or command slash if you're on the Mac and this will uncomment this one so this will say that hey where should the output of this file and this should go up and we're going to mention that hey my output is going to go into the dist file here and I can just go ahead and say slash dist and I can actually go ahead and say dot slash it should be there suggestions are not there but anyways you get the idea how this is the dist is going to come up here now so far how we have configured is it's going to scan the entire directory here wherever the ts config is from there all of the directories the distribution the source everything will be scanned up and we'll search for any ts file it will be combined and wherever the compilation happens after that the final output directory is going to be dot slash dist where the index.js or whatever the name of our file is the same name file will be created yes there could be a lot of more options but we'll just go for this one as of now okay all right let's go ahead and now try to use some of the options so for example in this one we're going to go ahead and say hey I want to write some console dot log because that's how we start and we're going to say type script is here now as soon as I save this notice here there's nothing so we need to compile this type script file so let's go ahead and do that I can go ahead and say TSC and then I can go into the source and then I can say index and I can run this and this obviously creates everything inside the index.js itself this is not what we want we wanted to compile it a little bit better so we're going to go ahead and remove this this is definitely not something that I want I want index directory to be created inside the index.js so I'm going to right click and delete this one because this is not what I want now apart from this there is something known as with the TSC there are a lot of options here there's one option dash w which says I want you to run into the watch mode so this is going to keep on running the things and there is any change in the type script this is going to just keep on watching it and notice here now the console dot log comes here so there are a couple of ways when you compile it with that it doesn't look for the TSC on fig but when you actually put it into the watch mode then it keeps on watching and also watch it based on the TSC on fig Jason and try to run all these things there so this is right now our best friend yes there are a lot more configuration options we'll talk about them but right now this does my job now just to prove a little bit more to the point I'll stop this one I'm going to go ahead and right click and delete this file even which is in my distribution folder I'll move it to the trash we don't have that file now I have still a type script file which says console dot log type script is here still something like that and I go ahead and run it into a watch mode and it starts compiling it gives me index.js file which uses a strict and gives me a console dot log so that is great now all I have to do is start this index.html so I have to use some server for that so that it loads it up because right now if I open this up there is nothing wrong I can go ahead and open this up no problem at all but there's a difference between just double clicking opening up file and calling it as like a server running so that everything that's there runs on the local host so there are a lot of packages for that there is no shortage of packages I'll close this one and that is why we have installed this package.json so let's go ahead you can use node mon that is little heavy but still we'll do the job and there's also npm install there is something known as light dash server and yeah that is my extension actually helps me to find out if there is a package available for that or not and that actually automatically loads up your index.html you can go ahead and I click on this index.html by the way this is another way you can just do that or you can just right click and open it with the live server so both of the options are there live server or light server whatever you want to use let's just open this in the live server first and there we go this is live server if I open up this into inspect and into the console there we go I see that TypeScript is still here that is going to load up but another way which a lot of people love to do that I think this live server is still good enough that is again an extension you have to install but in case you don't want to for some reason then you can go ahead and say that hey into this package.json I can have a simple start script and here you can just go ahead and say hey I want to start light server now they will do the exact same stuff so you don't have to worry there we go all right so now all we have to do is in this case we are not going to be running it through the index.html so I'm going to right click and say stop live server and now the live server is stopped so that I can run the live light server ah mouthful confusing as well I can go ahead and say npm start and that also does the same thing it just opens up local or set 3000 previous one opened at up 55 000 but again the same thing whatever suits you whatever you think is the best one just go ahead and use that they both does the same job they both does the same job and in case you don't want to install any packages light server or something like that go ahead and just install an extension by the way this is how I installed it I just go ahead come up here and I say live server by rhythmic day live server seems like I am offline seems like my network is should be working on that shouldn't be like that okay when offline please check probably there is something wrong in my network connection but yeah this is the one so live server this is the one by rhythmic day that I used again repeating this again if you are using the live server just come up on to index.page link up your JS file right click and open with live server in case you don't like for some reason a live server you can use light server in that case you have to move into package.json and I have to say npm install light server create a start script and there we go and apart from this we will be opening up a new terminal and we will be saying hey TSC just go ahead and keep on running into the watch mode so that whenever I make any changes in TypeScript you first and come and consult to tsconfig.json and then whatever I write here you just go ahead and just follow that so if I go ahead and put up a duplicate I'm going to duplicate that come on looks like I forgot copy that paste that so TypeScript is here and we're going to say TypeScript is amazing save that I prefer not to use light server I don't think that's necessary I think I'll just go ahead and say right click and open with live server I think that is much more awesome and I don't need to install any packages so I'll just right click and say inspect and I'll say console and yeah everything is coming up one more thing I would like to do here is inside this head I would like to open up a style because I know this is painful and we'll be saying the entire body should have a styling which is going to be background color is going to be let's try a little bit of the grayish I think let's let's go ahead and use 313131 so save that and yep I know you're much more happier now so dark mode is is the way how to go forward so you get the idea how to do this this is a basic set of of how we can do it surely in the upcoming files we'll talk more about how the TS config works but right now we'll still talk more about the TypeScript and then we'll talk about the TypeScript configuration so I think now you're equipped perfectly to actually put up a TypeScript into production how this is being done surely there are more settings but this is a good start so hit that subscribe for that and let's catch up in the next one hey there everyone hit a share and welcome back to another video in the series of TypeScript hope you're enjoying this series it's late well over one o'clock in the night still all pumped up to make more videos so in the last video we saw that how we can simply put up a server of TypeScript and we can actually keep on generating the files in the JavaScript and we have set up almost like a production grade not exactly but very near to the production grade server where we can write TypeScript now through that server now previously we've been writing just the alone TypeScript file but from this moment onwards we'll be start writing things as TypeScript and we'll be learning classes with them surely we can go ahead and run these classes via the previous method as well you can just create an ordinary file and go ahead we do that there is no problem at all but I just wanted to show you that yes this is also another way so we'll be just closing all the files so index.html don't need package.json.tsconfig don't need index.js definitely we'll be needing that because we'll be creating some of the files so we're going to go ahead and let me also close this one because we don't need it right now so how do we create classes in TypeScript now the syntax is almost similar but there are some subtleties which helps you to avoid some of the like fallthroughs where you can fall eventually so let me walk you through it's really simple easy the keyword is same class and let's just say we are creating the same user that we have been trying to create so far with this course so there we go that's it and let's just say you want to create a constructor just like we do in the JavaScript classes so we do have this constructor and you can take any parameter into this one so for example you might want to take email and you also want to take name into this constructor then we simply go ahead and say hey this dot email is going to be email and apart from this this dot name is going to be name so this is classic JavaScript so far at least but this is not TypeScript and that's why you see a lot of squiggly lines up here on the email and all of that but this is yes a valid JavaScript there is nothing wrong with that so far but what helps you in the TypeScript part is obviously the types of the data and that's why TypeScript exists types for that so you have to clearly mention that hey email is going to be off type string and the name also maybe it's a number but in this case that's a string but again we have discussed a whole lot about the types and this is now the syntax familiarization but this is still complaining and you might want to just go up here and say hey this is going to be a string but this doesn't actually solve the problem it says hey this is not the property email does not exist on type so in order to avoid this kind of thing this is not the syntax which is given in the documentation of TypeScript the way how they recommend is to actually make sure that TypeScript is aware of the email in advance so this is really simple you just go ahead and say hey there could be an email which is going to be a simple type of string and there can also be a name which can be of any type but in this case we are going for the string so these two values will come up and when we take these values from a constructor it just says hey just take these values and fill them up into this line number two email so this dot email means I'm referring to the email which is mentioned at line number two so this is really simple that's how you do it now creating a syntax or creating an object from this class is really simple so for example you go ahead and create a hitage and that's going to be simply a new let's go ahead and user obviously this is not correct because we have to compulsory type that needs to come in the first one being email not email email and that email is going to be type of string if I can write that email yeah that's correct and let us say h at the rate h dot com and then there is a name as well which will come up as a page so let me go ahead and world wrap this first so world wrap there we go so we've got this really basic one which is coming up and the most important part is since this is a constructor you don't have to say actually this name and email so this is something that you don't have to do you just have to provide the string the two strings that you can have and really we can just go ahead remove this one and this part as well and this will be all happy now there we go so really simple absolute basics that's how you do it now I will come back on to couple of stuff but first I want to show you the index.js so this is how the index.js this produces almost the same code and we can see in the typescript right now it's not reloading the browser but yeah a typescript is watching the file save and if I save this one again not here if I save this one it watches that and just produce the code so we can see that almost same kind of code is being produced here there is nothing magical and it's working exactly same but in the typescript world this is something which is preventing some of the off usage of the thing it always says that hey there should always be a string and we guarantee that this is all going to come up as a string this is already a string and that's why you are able to pass this up here so that's really really nice okay couple of more things that can come up maybe there is more parameter like for example there is a city and that city is going to be a string but you are not taking string come on string there we go and now notice here this city is giving you a problem that hey I user dot city string has no initializer so obviously if you are making a city and you're marking this up as a string then it needs an initializer because it's not a field we are taking in constructor I can mark this as totally empty now if you pass it on that's great if you don't pass it on it will not be worrying about that you can definitely go ahead and access that so I can go ahead and say user not user actually hithesh dot city and I can just access that it will have a value here but again I don't have to worry and also it also prevents me to add something like to into this one that hey you cannot actually add to into the city because it's a string so that's a little bit of the avoidance which actually doesn't happen at the case of java script so if I go ahead and add that as my city so I just say I add japor as my city then obviously you can go ahead and work on with that but there is nothing which is stopping me to come on here and if I go ahead and reload that there is nothing right now but I can go ahead and say not user actually hithesh dot city and I can go ahead and point it as three so yes that's really bad shouldn't be doing that but in the test script there's in the java script there is no control I can even come up here and can change it to something like hithesh dot city and I can make it for there is nothing which is stopping me but as soon as I save this this will be overwritten as soon as I save my type script so that's a safety concern I come up here save this and probably I need to write some lines so maybe I'll just change it to Delhi because the entire file is being produced if I save this yep as you can see this is gone now so whatever overwritten things that I've done in the type script they actually produce and render a new java script and new this type script helps me to avoid any things like that okay apart from this maybe you want to get a city as probably read only then obviously it will not allow you to change the city always and always going to be blank or maybe you want it to be always as japor great city but obviously some people might want to change it so in this case it says up nope you're not allowed to do so because it's a read only and that is the property we have already studied it in the past so again if I save this notice here nothing stopping me because the configuration is there that's why I'm allowed to serve but type scripts stopping me and you can configure it using ts config that if there is something wrong or there's something error don't even produce the java script code so that is what the powerful thing is but again you get the idea I'll comment this out you get the idea how it is really easy to write typescript classes pretty easy nothing too much of a heavy centric load here and let's discuss a little bit more about the classes but in the next video let's catch up there hit that subscribe hey there everyone face here back again the other video and welcome to the classic studio again and we're going to continue our typescript series in this video so the traveling is going to be less so expect more videos and we're going to continue the typescript series already we have covered a great in depth of the typescript now only a few topics are left which are mostly used and that is something which is likely a little bit common in the java script world as well as we have some shortcuts and some tricks with the typescript with some type safety as well so we have already gone through till the classes we have gone through with the basic overview of it in this video I'll show you some of the modifier keywords especially we're going to be focusing two out of the three which is public and private yes there is a one more we're going to discuss about that later on and we're going to discuss some of the shortcuts that you're going to find in other people's code one of the best way to learn programming is to look at the source code what other people has written in the same language and to understand how is it happening it's not about understanding the logic behind it it's more about understanding the syntax and the shortcuts and the file structure that they have followed so that is a good practice so anyways let's get started and let's talk something about the classes and the type modifiers in the typescript so let me walk you through so this is the example in case you have followed along with the series this is the example that we have been taking around and we have the typescript in our watch mode so that is also we have discussed quite in depth so this is a user class we have email and the name and we also learned about some of the modifiers like read only which can only be read and you can not actually set them up this actually gave us a bit of an error so if I go ahead and uncomment this this gives us as quickly line it says you cannot assign that we've already gone through with these modifiers really easy now one of the strangest syntax that we have studied is the constructor in the constructor we have these emails and name and we have to say this dot emails so that we can have already some of the emails being marked and these values can go up there now there are a couple of more things that we can actually go ahead now for example some reason you want the city to be not accessible here at all like right now if I want to access I can go ahead and remove this and I'm totally allowed to access it I'm not allowed to set it because it's read only but I'm allowed to access it for some reason you don't want it to be accessible to anyone so there we can go ahead and say we can have it as private and once you have this private it is marked as hey you cannot use because it's a private marked and it's only accessible within the class so for example if I want to access it somewhat like here I can go ahead and do it so I can go ahead and say this dot city I'm totally allowed to use that here because it's in the class and this class could be into a separate file is itself that is totally allowed for you now this also makes a conclusion that we also have another keyword lying around which is public so all these things which you haven't marked including name are automatically marked in the typescript world as public there is one more modifier we're going to talk about them in later on video right now we want to focus on this only now this is the basic you should always remember everything that you don't mark is public and if you really want to mark this this is a private now one strange thing that comes around with the private is let me just go ahead and remove this private from here and mark it up here you can mark it on anyone that's no problem at all but the problem is that this public and private thing is actually available in JavaScript as well so let me go ahead and say name it's not accessible but you could have also done that by simply saying something like this and this is a classic JavaScript and say this this is declared but never being read so this is something we already have as a private and there's a great debate in the typescript world that should we use this syntax or we should use a private something like that I found that the keyword private makes much more sense because it's much more clear much more easier to understand I prefer this way and in fact all the code that I've written is personally also has this modified keyword instead of that hash the only difference is the hash is actually a JavaScript world and the private is a typescript world there is no such thing as private in the JavaScript world so that is one thing you should always remember and should be aware of it now one more shortcut I would like to mention here because you should know about it now this whole thing is really clumsy and really big and the production grade code you will find less of these classes being declared like that I'll show you a shortcut way I'll duplicate this one and I'm going to go ahead and comment this out so what you're going to see that most of the professional people who write these code don't go like that maybe let's just go ahead and remove this they actually go ahead and use these modifiers and actually use them up here so what you can do is you can mark them as public you can make them public private whatever you like I want to make all of them public so I'm going to go ahead and say public and this actually produces the same code so that is why you'll see a lot of professional people actually write it this way and sometimes they actually write it like this and this so it's it means it's same just a syntactic highlighting syntactic sugar is there so yes a lot of people does that and you can see that this actually produces the same code this dot email and this dot a lot of people who write JavaScript hate actually to write these things this dot that this dot that so they love typescript because of the simple reason like this and you can actually if you have to make something read only then this is the syntax but maybe there's something more in the private you can go ahead and do that as a private as well so we're going to say private and what else is maybe user ID that is going to be of type strings so you can go ahead and do that as soon as I save this you'll notice that this user ID is there but since there is nothing which we are marking it as private or something we are totally allowed to use that so that's the basics and again there is a syntax it says constructor you need to pass on user ID as well if I go ahead and comment this out this is all happy now so you get the idea there's one more keyword there are a couple of more things we have to learn about this private method so that we are going to talk about in the next video let's catch up hey there everyone face here back again another video and in this video we're going to talk about getters and setters and they're almost exactly same as we see them in the JavaScript world in the typescript world they are also same but with some of the interesting thing and these interesting things are usually being asked in interviews when you mention that yes I do have an expertise in typescript as well so let's take an example let's move on to the system take an example of that and nothing too much to be worried about it's really easy so we already got this city so something like that and there could be a lot of use cases of these getters and setters one common let's just try out and again these are some of the basic examples that I'm going through let's just even design a method which says get apple email so maybe you're designing a software for apple and it doesn't throw away the email directly it gives you the random email or some email based on that so you can go ahead and provide a getters like that so get apple email in case you want to make a getter of that you just annotate it with a get keyword and that's it you make it as a getter and that's all now this get apple email is going to return a string and we're going to go ahead and annotate that so it doesn't do automatically things for us and notice you're right now it says a getter accessor must return a value so let's go ahead and return a value we're going to go ahead and say hey I want to return a simple string and that string is going to say something like apple and then we're going to use a dollar sign like that and we're going to say this dot email so you just append the existing email with the apple keyword in front of it maybe you don't want to do this maybe you want to generate a completely random email for that totally up to you totally your decision just want to make sure that this is now a getter and let's also do some setter example and show you something really interesting which is a kind of a gotcha moment for all the people who are getting started with the typescript so for example let's just say I come here and I design a private property here so this private property is going to be something like let's just say a course count so we're going to go ahead and say underscore course count and we're going to get started with a course count of one so whenever a user registered on your website he always gets at least one course maybe an introductory course on javascript or whatever that courses we always get started with that now this is already private that means I cannot access this outside of this class we have seen that already in the last video so that is all but you also want to design some getters and setters for this property so that if anybody wants to access this they are allowed to access it but not directly via that method which is a getter and also if somebody wants to manipulate that method it doesn't allow it to directly set that value we want to have some setters for it so let's go ahead and try and see that how we can actually do this really simple first and foremost we're going to design a simple getter for that so if somebody wants to access a course count we're going to provide a method just like that and we're going to say that this is going to return you a number okay all right really simple and all we're going to do in this one is we're going to say this dot underscore course count now this is a really basic getter that we have designed but there could be a more complex logic involved that for example you might want to check whether there's a unique ID or token is there in the user session and don't only we are going to return him back the course count there could be a lot more complex logic we are not worried about that we're focusing on the syntax in the series and all the hidden details similarly just like we have a getter we could have a setter as well and something interesting about the setter or voice obviously it starts with the set keyword and then we're going to go ahead and say that this is going to a course count but this time obviously you want to update it with some value so somebody is going to give you a course number and here comes the interesting part now this is not going to return anything so I'll say that hey this is a wide and just like that and or is here this says pop up that a setter accessor cannot have a return type of annotation so this is something which is an interview question that whenever you're making a setter so you cannot actually make it a wide you cannot make it other data type as well like number or anything no this is not allowed typescript simply wants you to have nothing here so this is a perfect setter okay because setter is accessing this property or whatever the property are mentioning it and setting some values on that so for example somebody is giving you so you want to have a simple if and else check statement so that if the course num is less than or equal to one we don't want to do anything because that's a default value so in that case maybe you want to throw a new error something like that and you want to say something like this give him an error that course count should be more than one so that's a basic error otherwise if that's not the case you might want to do more check or something but we all we're going to do is in this case is simply this dot underscore course count is going to get updated with whatever the course number you're designing so this could be any logic as complex as you want maybe also want to check whether the user who is updating the course count has purchased or not whatever that use case is what we are worried about is simply to have a getters and setter important part is in the setters there should be nothing that is the return type that is the basic now also one more thing which we didn't discuss in the last video we saw that there could be private properties similar to that there could be private methods as well it is very obvious but still wanted to cover this topic so let's just say you want to have a private method let's just call this as delete token so let's just see we have a delete token right now it does nothing but maybe for some reason we'll have a console log and it says token deleted so for some reason you want to only access this method why the class only so now if you go at here and try to access this method which is very obvious that if I want to say delete delete token this is not allowed because this is a private property and only accessible within the class very obvious we already know this one so this was just basic now this is a really basic let me summarize this getters and setters are pretty common just like you use them in JavaScript get is used to get any property it doesn't mean that you always have to get a private property maybe you want to get a public property why some method by adding some additional logic that is also totally valid and you can actually use that but in most use cases these properties are being accessed or these getters and setters are designed so that any private method can be exposed outside but with some additional logic or additional you can say some restrictions that you want to put up so that is why it is being used and it doesn't really mean that always there should be a getter that needs to be a setter as well sometimes maybe you want to just have an exposed property don't want anybody to set it up that is also the case so there could be one there could be both and in the setters the most important part is that there is no return type even if you try to put up something like void a JavaScript a TypeScript will yell at you and you should not be doing that in case somebody asks you in the interview yep that is the case that is how TypeScript is designed so that is all your getters and setters in the TypeScript really easy very accessible and let's go ahead and catch up in the next video hey there everyone face your back again another video and in the last video we saw about the public and private which are access modifiers yes there could be a lot of fancy names about keywords and stuff but the real reason why we call them as public private and there is another one which we are going to discuss in this video these are access modifier they limits your ability that can you access those properties or how you can access them maybe yes maybe no or maybe why a restricted ways and that's why we call them as access modifier so we have already seen that there is an access modifier so we have gone through with this one so there is a private one had a lot of discussion around it and when there is nothing written it that means by default it will be public you can explicitly mention that to get more clarity on the code but there is one more use case so what we're going to do is we're going to shrink down all these methods we are not worried about them so let's just say we again actually shrink the constructor as well okay now we can see that this is all good now there is a lot of time use cases about inheritance we have declared a class but you also want to use these classes as a parent for another class because a lot of functionality is already written and you want to just add a tiny bit of functionality into those classes in such cases inheritance is used so how do we do that in the typescript it's really simple let's just say we have a class of user and we want to create a subuser from that or maybe there is a family member in the user who also use your course access so something like that so we can go ahead and say this is going to be a subuser and since you've already defined all the functionality all you can do is use the keyword which is extends and this is going to inherit the parent class so you just mentioned the parent class so in this case that's a user so by default whenever you're going to create an object or instantiate the object with the subuser it actually acquires all the properties here but there's a problem it cannot acquire the property which is mentioned as private because remember in the last video we discussed that private when you mention the keyword private it can only be accessed within the class not outside the class so public is accessible in this class as well as outside or creating an object there is it is also accessible so what we can do here is we can go ahead and create something like is family so let's just say a family is also using this so this is going to be a simple Boolean and we're going to mark this as true so now we have a new property which is is family and that can also be accessed let's just you define a method which is going to manipulate this underscore course count so we're going to go ahead and work on with that so let's go ahead and try this out we're going to go ahead and say what should we name this one as change course course count there we go and this is going to be really simple method all it does is anybody calls that it just changes the course count so we can go ahead and say this dot underscore course count and we change it to four for some reason I don't know what the reason we are able to change that the notice here it says a property underscore course count is private and only accessible within the class I am a big fan of how these errors actually comes on the VS code especially with the TypeScript no match for that and the moment we change it up from private to another keyword we can actually go ahead and we have the public we have a private and we have a protected so we're going to go ahead and say protected the moment I say protected this simply means that this wherever you place it in this property or wherever this will be accessible in this class as well as in any class which inherits this class it will not still be available outside of this you cannot access it directly like hithesh dot something like that you cannot do that but here now it is accessible and yes that is your protected another type of access modifier there is no need to go and dig deep it further just remember wherever there is marked as protected it can be used in the same class as well as any class which inherits task that's all that's all you need to know let's go ahead and catch up in next video hey there everyone very sheer back again the other video and in this video I want to bring your attention towards interface again now that we have classes we can actually talk about interfaces now especially for the web developers it is little bit tricky to understand interfaces and they seem like why they do even exist there is no implementation of that there is no advantage of that but let me tell you something from my experience into working of ios development now this is exactly the same concept they kind of borrow it from the Swift or probably objectives objective C as well this is similar concept now in the world of ios app development there are a lot of protocols we the interface we call them in the TypeScript but in the world of ios development we call them as protocols now these protocols don't have the definitions they have just some protocols that if you want to do certain things you have to do this way and that is the only way you want to do it now these kinds of things are similar in interfaces so let me tell you the same example we are building a mobile app which uses the camera just theory again they which uses a camera and we want to implement that kind of a scenario in our application so let me walk you through with the same example of ios development into the world of TypeScript and it is so much easier to understand this way so let me walk you through so moving on to our i have created a new file which is second dot ts i'm going to go ahead and remove this one up here still in the watch mode so that's fine so let's just go ahead and say we want to define an interface now this interface says that just go ahead and take photo okay that's same now in this while taking the photo i think that there should be a couple of things that should be defined for example there should be a camera mode and this camera mode could be a string maybe there's a front camera maybe there's a back camera but whoever is designing a class that you can take a photo from your web application should always implement that these are the bare minimum basics we'll add couple of more properties similar to this for example we'll have a filter this filter is also going to be a string and maybe there is a burst mode burst mode or just burst photo burst and we're going to say this should be number and this is not it there could be more methods or functions and there could be a lot more right now we're going to get started with this much only so this is an interface now in your entire application no matter how or who is building it if anybody wants to create a feature of taking photos should always and always follow this interface how about that so let's just say an application comes up and it's an open source project that you're building up you have designed and everything is being worked out and let's just say somebody is building a fictitious Instagram so we're going to go ahead and say Instagram now as soon as Instagram says that I want to implement a protocol or an interface of take photo the notice here what happens this is the reason why interface exists it gives me an error and the errors are also precise that it is incorrectly implementing the interface that means hey if you want to take photo there are certain number of things that should always be there so if you are inheriting me not inheriting me it's basically implementing my protocol or my interfaces that means hey this is missing all these properties this should be there to take photos so let's go ahead and do that so how we can do that we can simply design a constructor and we can take all these properties just like that so there we go constructor is there now here I'm going to go ahead and say I'll take all of them in public you can take them in private as well know such a big deal but I'll say that hey I want to have a camera mode and that camera mode is going to be a string and we'll also take one more which is again going to be public the next one is filter filter that is also going to be a string and I'll also take one more so we're going to go ahead and say public and this one is a bus so we are taking five photos 10 photos in just a click how how much that is now if I go ahead and say this one is also a string notice it implements that hey you shouldn't be doing that burst is always a number it needs to be a number so as soon as I do this there we go now you're perfectly following a protocol to take the photo now what you do with those photos or how you take the photos that is not defined in my interface interface is something which never involves the definition it always in clients that these are must have things in order to have it let me go ahead and show you one more thing another class comes up and that class is YouTube it also wants to take photos it's going to come up with implements and we're going to say that hey we also want to take photo there we go now again same error same problem I'm going to go ahead and copy this constructor here as well but in the world of YouTube I'm not happy with this I want to have more information for example I want to take a simple public and I'm going to go ahead and say you know what we also upload short which is a type of string so you can go ahead and use this it's not going to complain that if you are doing more than what is necessary that is allowed but you cannot do less than what is necessary up there so this is basic now let's just say another interface comes up and it says interface and stories are getting popular everywhere so we are implementing an interface that says story whoever wants to utilize a story in their application should have a method that says create a story just like that and it should return something maybe a string maybe a number maybe wide whatever makes sense to you you can go ahead and return that now the thing is that if YouTube wants to implement take photo as well as wants to implement a story it cannot do it directly it has to adhere with the rules that are being provided so here it says hey you need to create this method so this actually needs to have a method with the exact same name create story so we're going to go ahead and say create story now what this create story does we really don't care it can simply go ahead and log the values that a story story was created or whatever that is now you can define it much more better that it can return some like photos or something if the for if the story is being created or maybe a video needs to be returned yes we can go ahead and implement that but this is the main how you provide an interface a guideline is provided in the TypeScript but if you want to do certain things this needs to and if you go ahead and change this like for example if this is a create story this gives a problem no no you cannot do this this bring consistency entire teenager code and that's what TypeScript is all about getting less error having more consistency in the JavaScript and that's why we use it I hope this class was interesting and if this was interesting hit that subscribe button and I'm going to catch you up in the next video hey there everyone if they share back again with another video and in this video we're going to talk about abstract classes in TypeScript I hope you're enjoying the TypeScript series if you're enjoying that go ahead share this out hit that like button subscribe if case this is something you want to consider and please do so your support because these content videos gets already very less attention it's your help that can help me to get more attention to these content videos which actually deliver some knowledge rather than just meta videos videos about videos anyways let's go ahead and talk about abstract classes in these in this particular video in order to understand abstract classes it is important that you understand interface first so by any chance the last video got skipped out from you about the interfaces go ahead watch that first then come back again now we will have a small comparison because in the TypeScript world and in the interviews as well interviews love to ask you about hey what's the use of these abstract classes if the interfaces are available and they are very very similar we're going to not only understand the difference but we'll have a very basic easier use case and just like you always know it's going to be super easy to understand there's just one classic difference you point that out you absolutely nail it down also we're going to understand the use case so let's go ahead and move on to the computer I'm going to go ahead and comment out the second dot TS because we actually worked on this already I've created a new file abstract class dot TS it's absolutely empty just created so that we can save some time about it and let's go ahead and try this out so what we're going to do is in the last one we actually worked on the interface and then the interface was implemented by any class remember the word implements this is only used for interface and the easier way to remember is interface implement so both start with size so yeah that's the easy way to remember now let's go ahead and try to create an abstract class and see how does it work so we're going to go ahead and create a class and we're going to call this one as take photo just like the same class that we created earlier so this is really simple I cannot go ahead and create something like this I cannot go ahead and copy this piece of code and just place it up here this is not a valid code so you notice it already in the very first this is not really an interface so this is not allowed I cannot have just the mention of these properties in order to mention them obviously know that I need to have a constructor we're going to go ahead and have a constructor just like this this time we'll use only the two of the properties that's easier one and we'll be using the shortcut for that so we'll be saying hey public give me a camera mode that is going to be a string and apart from this also hey public give me what should I have filter yeah filter is fine that is also a string string so this is okay completely okay as a class now let's just say if I want to use this class into my some another class so what I'll I'll be doing I'll be saying something like this class and let's just say Instagram is now it does it cannot implement it but it can extend it so this is the first difference between the keywords this is like having an inheritance here all right let's go ahead and use this take photo and we can go ahead and do this no problem at all now for a moment I would like to comment this out and first since we have created a class let's create an object from it so I can go ahead and say const I can go ahead and name it as hitesh that is going to be having a new and we can go ahead and say take photo this is completely valid and let's go ahead why is it having an issue cannot really clear blocks hitesh okay all right I need to change my name I'll call myself as hc that would be great and it says take photo let me go ahead and save this why is it having an issue with the take photo okay all right camera mode was not provided I get that so I'll be saying providing two strings into this one so the first one is going to be let's just say test second one is also going to be test and now it is all happy so this is completely allowed completely valid the problem actually starts the moment you declare this class as abstract the moment you declare it abstract now no new object can be created from this class and obviously it makes sense it makes no sense that hey we are creating a class we are not able to create any object from it's what's the point of having a class and that's exactly what the abstract classes is known for in the world of abstract classes these are almost like blueprint yes we have a blueprint like interface but in the abstract classes they are exactly the blueprint you cannot create an object from it it's the responsibility of the class who is extending it it's the responsibility that hey create object from this class so if I go ahead and move this code here to make easier we can go ahead and use instagram here and that is totally valid you can create object from the class who is inheriting it but that's the whole idea okay that's the first difference I think you got this one but this is not all there is a lot a little bit more to it we have also seen that in the interface we can create these method definitions so let's go ahead and try to create a method definition in fact I'll just copy this and we'll have this one all I just have a different one we want to have a different method we want to call it as get sapia sapia did I wrote it correct nope there yeah this is what this one is correct so we want to have a simple get sapia and I'll just say that hey this doesn't return anything this is just a void now notice here I say that hey this is get sapia it says function implementation is missing or not immediately followed this can be done if you just go ahead and call this one as abstract you can go ahead and say that hey this is abstract method that means I'm not going to provide you definition this is just a method I don't know how anybody is going to implement it but they need to implement it otherwise they're not following this abstract class so I have to go ahead and follow this one first I'll just go ahead and show you one more common way you're going to see a lot of code just like that so just like this and here while creating the constructor I'll just comment this out for a minute so that you can see what's happening so in the constructor I'll take couple of properties so I'll say hey public I want to take camera mode camera mode that is going to come up as string let's have a comma move to the next line and this one also much more readable I'll also take public I'll be saying hey give me a filter as well which is going to be a string and since this is a additional or advanced class inherited class this also takes burst photo so we're going to go ahead and say burst which is going to be a number number this is going to create a problem in your case because if you want to take a constructor like this you have to actually use a keyword super in which you have to pass on all the required values so required values are camera mode so let's go ahead and pass on this camera mode directly here and I'll also pass on filter so this is a common syntax you're going to see that's why I have introduced this to you all right so this is all good now let's come back on to the part where we were discussing about these abstract so Sapia obviously not implemented so you have to implement it so all have to come up here and say hey I'm implementing a get Sapia I don't know what this is doing this don't have to return anything so we're going to just do a console log and I'll say Sapia okay Sapia there we go so you saw that how we can do it now you might have noticed that in the interface also we can define these things so what's the point of having these abstract classes in addition to that what you can do is let's just say these days reels are really really popular they're getting very popular so I want to say get real time I want to define the method and this method is going to return you a number and then further down we will do some complex calculation and after doing a lot of calculation we're going to go ahead and say hey we are returning eight or whatever the number is you get the idea how we are doing it so notice here this doesn't give me any problem here this is the power of abstract classes and this is something that makes them still in the in the realm of the script otherwise everything else is being done by the implement and this interfaces so this is what it makes something new I can go ahead and create an object just like this and that is fine it needs another value the value is let's just say three and now I can go ahead and say hey Etsy wants to get real time I can go ahead and use this and that's totally allowed and valid and in fact I can go ahead and overwrite this method as well if I want to so that is totally allowed as well because it's just a class and it has that feature so this is what's something that makes abstract classes so again going through with the summary of it you can make abstract classes abstract classes cannot create their object on their own but they help to define the class who are inheriting them get a better structure of their classes and some compulsory thing that you have to put if you want to put up some method that are compulsory lead to there you can make those methods are abstract as well in case you want to give them some feature by default by giving them the methods you can go ahead and do that these classes can actually overwrite these methods as well but if you want them that hey this should be like this only always then use the abstract method so I hope you got this one pretty interesting discussion about the abstract classes I hope you have enjoyed this if you have enjoyed this hit the subscribe button and I'm going to catch you up in the next video hey there everyone they share back again with another video and in this video we're continuing our typescript series and we are moving ahead on to one of the another really important topic which is known as generics I personally love generics when I'm writing a lot of production level code because generics is one such things which makes your components reusable and by the time component I mean to say all of your functions even your arrays are generics behind the scene so it is really important that you understand also it is also important that you don't pick up the word whenever I say component it doesn't means it always have to be a react component or tailwind component component is a broader term it simply means there is a chunk of something it can be a tailwind chunk it can be a reaction it can be just a function so understand that point now let's go ahead and move forward into understanding the generics I'll first walk you through with the documentation part because it's important that we all learn how to read the documentation and find out some of the example which floats around all the web but these examples actually come from the documentation and after that we'll understand a bit of the array and we'll design a couple of these generic methods and we'll understand what kind of problem they're trying to solve so without a further deal let's go ahead and move on to the documentation part so here I'm on to the web page of the typescript where official documentation happens and on the left you can easily find the generics really easy to find there is nothing much you can see just the type manipulation generics just there so as we can see up here a generics are a major part and also notice the vocabulary that they also use is building components that not only have well-defined and consistent APIs but are reusable and again API is something that you can ignore right now which is just an example they're trying to give here so component is something which is capable of doing something more than it was original design and almost all languages have them C sharp Java so if there's a lot of languages which actually support these generics a pretty common thing these days but it was such a ground breaking at the earlier days now there's a nice example we'll recreate these examples but notice here what they're trying to show you in these examples so it says without generics we would either have to give identify identity function a specific type so what they're doing here is they have created an identity function and they're providing an argument which is a type of number and which also returns the number when you do a return of arg which is whatever you're passing into that method it returns you the number so this is obvious we have been doing this but if we want to design this function such a way that if it takes string it also returns a string so we have to say that arg string then the return type is a string and when you return the string so we have to define the function for each data type Julian string number and if you want to bypass that you want to design a function such a way that whatever the data type you actually send it it also returns that data type so one way or one common thing which comes to mind is always hey let's use any which is not a good idea always it's such a breakthrough that you always want to get away from the things using any here we can definitely use any but it actually removes some of the information from the from the argument that you're passing for example I can accept any argument and return any but what if I give you input as number and you return me back as a string it will still work so this is not something that we want so in that case this type actually comes up which has these angular brackets and this is something which denotes the generic type and there is a lot that we can discuss about generic we'll come back onto the documentation a little bit later but right now let's go ahead and open up VS code show here is my VS code and let's go ahead and create a new file into the source and we're going to call this one as my generics dot TS of course and let's go ahead and see that what kind of problem we are facing and how actually this problem is not really big and already being solved by something so let's just say if I go ahead and create an array and notice here there are a couple of ways how you can create array we have already seen it once but this is a common way of creating array but we have also seen that you can go ahead and create an array like this and then using these angular brackets you can mention that this array is going to have a value number and we can store this into anything like for example this could be a score of any game that you're playing so this is scored like this and not that there we go and we have defined its type and now we can say that this is right now empty but eventually things will come out into the definition so this is one of the way and again we can actually go ahead and further improve it we can go ahead and design the arrays something like this so you get the idea there is a string as well and we can go ahead and store this into let's just say we are going to have some names so these values can be also like this so you get the idea that generics is not something that we are designing in the language they are already in the language in fact most of the language do support arrays with different numbers and different strings so yes this was already existing there we just didn't talked about it now we're going to go ahead and talk about it and we're going to design the method version by version so that we can reach there and understand what is the use case of that so I'll keep them here so that you can have just for the reference so let's use the same example we're going to have identity identity and we're going to call this one as identity one because we're going to create multiple identities here so let's first understand what is the challenge that let's just say I want to create an identity such that it accepts either a number or maybe a Boolean as well so we have already seen that we can go ahead and do this we can go ahead and define the type as let's just say Boolean is there and we can use this or and we can go ahead and say you might be having a number as well and in the return type also we can go ahead and say that we can have something like we are going to return a Boolean or that can return as a number or a string whatever you like so this is perfectly valid code and I can go ahead and say return a value now there's a lot of confusion here so if I go ahead and say return well it can be either a number or it can either be a Boolean I can go ahead and do the check whether the type of the value is Boolean then go ahead return a Boolean if the type of number is a number go ahead return a number we have seen that kind of example in the past but this doesn't actually cut through the problem that we are facing it doesn't work for a string surely we can go ahead and use or and how many odds you are going to use there now we saw in the documentation that we have identity to let's just say and here we saw that we can take a value and that can be any which is really a horrible keyword it is therefore escaping some of the tricky situation but it shouldn't be used much and we can go ahead and use any and we can go ahead and say I want to return this value again the problem remains same TypeScript has no idea what the value is comprised of and the definition or the information about the type is gone in this case so we can go ahead and see that yeah this identity to is eat also not working so let's move on to the version which actually is the topic so which is going to be identity three and in the identity three what we are doing is we first go ahead and put angular bracket now this is super important for the syntax and we go ahead and define a type here now once we define a type here into the identity three then we can go ahead and take the parameter and this is a little bit weird syntax I'll give you on that no escape from that part no sugar coating there and we can go ahead and say this value is going to be of a certain type and the return is going to be also of type okay now interestingly what is going to happen after this one is now you can go ahead and return and return this value now the difference between the one where we say value of any is this could be anything and this also could be anything so we can take any type of value return any type of value take number as input return as a string not a big not a good idea now but when you say mention the type it actually says hey this is almost like any I am ready to accept numbers I am ready to accept string whatever you like so how is it different from any because once you actually pass on anything that value type is logged yes for the reference or understanding purpose this is easier to understand so whenever I give number as an input this is hey the number is the input type that is coming up so the value you are accepting is going to be of number but the return type automatically becomes a number so that is the advantage of using this for example if I go ahead and say hey I want to use identity three and while the identity three I'm going to go ahead and pass on a number three here the notice here as I say it says hey the value that you are giving me is three and it is going to return as three value but if I go ahead and wrap this up as a string it automatically converts that hey you are taking three as an input but I'll return you as three as a string so that is the advantage of it if I go ahead and say hey this is going to be a fish then you go ahead and check it out by hovering it says hey it is giving me a string I'll return you a string not only that you can go ahead and say that hey I want to go ahead and give you a true value and it is going to give you a boolean as a back so you are locking that value that is the most important aspect of it and this is something that you're going to see less this function definition type like this how most people like to define it is a bit of a shortcut one so I'm going to go ahead and say hey this is identity four and then you go ahead and see angular bracket a t capital version and then whatever the parameter you take for example value you go ahead and define the type as t and then the return type is also going to be t and we're going to go ahead and say hey let's just return a t not t a valve there we go now this again is exactly same as line number 12 to 14 this is exactly a replica of line number 18 to 20 the only difference is calling it as identity three or four now this is shortcut it doesn't mean it always have to be types or t you can call it as simply as h every places that's also totally valid but it needs to be referenced the same letter that you're using or a word that you are using so this is really basic you're going to see them a lot being there now the advantage of this identity four or something like this having this data type is you can actually define your own types and can pass on into this one it's generic anything can be passed on to it this one so for example let's just say we define an interface of this bottle so we're going to go ahead and say hey bottle interface bottle there we go and your bottle can have anything that you want for example it will it is going to have a brand which is going to be a string and also let's just say type there are a lot of types of bottle this is a gym bottle so type as gym and not gym actually this is again let's just say a number I don't know why the type should be anything like that but this is it now you can go ahead and use this function exactly like this so we can say hey I want to use identity four and I'm going to go ahead and pass you a type of bottle so I can go ahead and say that hey just like I was able to use and pass on this three I can go ahead and say I'll be using a bottle and then I'll pass you on you and object like that so this is totally valid of course I'm not passing an object which is missing the parameters of bottle and brand and type which you can actually do that if you're following around the series but this is a way this is a syntax how I can pass on now the data types that we saw here are actually the default ones like the old fashioned numbers a string you can directly pass on them but if you are trying to create your own then you have to use this syntax this is really little bit weird but yeah eventually you'll get a get a hold of it and this is so as you can see genetics actually solves a great deal and is really reusable and we can use them a lot let's go back up here onto the documentation so this is exactly what they have mentioned in the documentation that you can have the identity and can pass on my string up here and working with the generic type variables this is how they actually go ahead and work on with that we have already gone through with these and we'll definitely discuss a little bit more about the generic but to be honest this is only the meat part of generic as you work through with the react or angular you'll find that we use them a lot and sometimes methods are defined this way so let's keep this short I hope you have understood the basic core concept why genetics exist and how we can use them and let's go ahead and catch up in next video hey there everyone face here back again with another video and in this video I would like to discuss and extend the discussion about the generics in the type square now generics are really simple but for a beginner who have never seen them especially in the type script the syntax with different data types can be little bit confusing especially when it comes to array and how the array return type works so I would like to bring you on to the documentation of type script we'll give you some reference example from here and then we'll move on to the code part and we'll walk you through that how the arrays works as well as a small brief introduction about how the arrow functions can be used so far we have been creating functions in the type script just using the function keyword but that's not all you can actually go ahead and use your arrow functions and I'll show you the syntax for that in case for those people who are confused about it so moving back on to the documentation we opened it up in the last video as well we see that just above here we can see that this is all what we have discussed that the property length and all of that so this is all good now here the examples in the documentation are referring that you cannot just use a dot length on any of the parameter because it's not a guarantee that it's always going to be an array it could be string it could be just a number and on number we don't have the property of dot length so this is all what it is saying an interesting part comes up here on this part where we are taking input parameter as an array so this is one type how you can take input parameter as an array and this is also at type how you can take input parameter now both of them are exactly same we have seen that in the last video that there are a couple of ways how we can define arrays and the second one is also a type and the first one is also a type but when you actually go ahead and try to build this it can be a little bit confusing at some of the situation let me walk you through with so let me take you to the code part and we are going to define the almost exactly same this example up here so let me move to the code part all right so first what we're going to do is we're going to learn that how we can create or take an input as an array and what could be the possible cases of when we are returning some values so let's just say we're going to create a method which says get search products any you're searching a product doing an API call and through that things are coming in so we are going to define this as a generic so obviously this is the first part of how you define generic this is a template this is how you write it just like you write arrays with the square brackets this is how you define genetics so far we haven't defined what types of input we are taking what type of return type we are taking this is just basics this is how you define it with an angular bracket and t then comes up is the parenthesis and in this you define that what data type you're expecting in this one so let's just say somebody is giving us a product or a list of IDs whatever you want to take that's that's sort of just a generic name and then I'm going to go ahead and say that hey I am taking t as an input but this is not an ordinary input I'm taking array as an input now if I go back on to the documentation part we have seen that this is how you take types as an array but I can also go ahead and use this array type as well so both are exactly same now here's the interesting part the return type is also t and let's go ahead and try to return something now there could be a many cases that what you want to return maybe this is a search result you want to return the search index so in that case I would love to return a three which is not correct in this case because remember I told you this actually locks the value whatever the value are taking as an input so if I return that same type of value as an output this is not correct if you want to do something like this you obviously should have done something like the return value is going to be number which is an index but in the case where you want to have the t then you have to return the product itself and again remember this is an array so I have to say that hey whatever the products are coming up into that one value should be there there could be now three value so you're returning the third index which is fourth value so this is totally valid and totally fine but remember you have to think from a broader perspective this could be easier for a lot of experience programmer but this could be little tricky for somebody who is just getting started with types kids so remember the return type is the value that you're taking is an array of t types so the return value here I'm mentioning is t so that should be one of the value from that array okay got it okay let's go ahead and make this a little bit better so what we're going to do is we do some do some database operations and then we go ahead and define a value so we go ahead and say my index is three maybe after returning a lot of complex operations a method calling this comes up so we go ahead and call this one as my index so you get the idea how this is being designed so this part is all clear now how we can convert this exact same function into an arrow function because this is where the syntax comes up and this is where when you see or read other people's code on the GitHub you might find some things confusing so let's go ahead and clear that up so what we're going to do is we're going to call this one as simply const and we're going to call this one as get more mode get more search products yes you can pick up any name that you like now here we go ahead and define this so what is the syntax for defining a generics in a arrow function method it's really simple you first go ahead and define your t just like this remember this is an indication that this is going to come up as a generic so just like here we did the generic this is exactly what we do here after that we put a parenthesis any arguments are there or not then we provide a return type and then we go ahead and write our definition so before the definition this goes like this there we go so this is the basic syntax of how we define the arrow function this is little bit new otherwise if I go ahead and remove this this is a classic arrow function we have seen this many many times so in this case we are going to go ahead and say that hey this is a generic arrow method this is where we take the reference and after the colon we define the data type and then we go ahead and put an arrow function and the definition really simple nothing much so here also we want to define exactly same so we're going to go ahead and say hey products and we want to take products as an array so this can be of any type of array and the return type is going to be t it could be number but in this case I want to replicate the exact examples so we go ahead and do that we go ahead and say do some database operations and then we go ahead and say my index and this time the index is going to be let's just say four we are we are feeling very creative there and we go ahead and say return and then we go ahead and say hey products this time we're going to be returning my index again so get the idea this is easier but you have to look through the big picture up here so again if I go ahead and remove this one this is a regular function it could take numbers so I can go ahead and say hey this is numbers array and I'm going to return a number obviously I have to tweak the definition according to that but you get the point at how this is being done so really simple you have to look through the genetics as like yes this is also a data type and this which is a strange looking thing is a syntactical sugar okay so this is the basics what they have tried to define and once you are taking the input as an array then obviously through the arguments you can use the array properties which are available to them like length and all these things so further down we have generic types as well so they also walk you through that how you can create generic types which we've already seen and all of that so we'll talk about that a little bit later but this is the most important thing now one last thing before we close this video you're going to see a lot of code bases like this and this is not going to produce any error now this comma is there to mention that this is not an ordinary tag like h1 tag or a p tag this is a generic and this is a common syntax you're going to find this a lot especially people who are working with react they like to use these generics and they put this a comma here to mention that this is not a JSX syntax but rather a syntax for generic so keep that in mind you'll see this comma quite a lot in the code basis if you're reading other people's code so that's it for this video if you're enjoying this series hit that subscribe share the series this is really important when the value content comes up we need motivation that people are sharing the entire playlist and series so that we can come up with more that's it for this one let's catch up in next one hey there everyone if I share back again the other video and this is one more video in the generic topic now yes generic is a bit longer off at topic as well as it is being used a lot and kind of a new for a lot of JavaScript developers that's why I'm taking my time to explain this all in depth and we can find out all the nuisance that it can probably create while understanding it if you're watching this video directly go ahead and watch last two videos because that are foundational base of the generics this video will not make much more sense if you haven't watched them so moving further so we have a small topic remaining up which is definitely one of the major one is classes that we are going to cover in this video but we'll cover more over the syntax part of it and some of the use cases of it but rather one more part that is being shown up here let me walk you through with the documentation it says using the type parameters in generic constraint this is something really important you need to understand the mindset behind this instead of just focusing on the syntax or memorizing it or something just understand why does it actually belong here on the very first place so let's try to understand the confusing documentation first and then I'll give you a simpler and easier example on to this one so it says you can declare a type parameter that is constrained by another type parameter okay got it for example we hear we'd like to get a property from an object given its name we like to ensure that we are not accidentally grabbing a property that doesn't exist on object so this time the developer is a little bit panning that I really want to have objects and nothing which looks like object or is not an actual object so here we say is get property and it's having a type and the key extends to the key of type so what this is doing so we can actually use an extends keyword and you can make sure the extends allows you to have a specific type of this one is this data as well now yes there could be a question that if we are that much panic why can we just say that this value that is coming up we can mention the type as object yeah actually you can do that there are a lot of ways of doing the things and this is what makes people a lot of confusing so instead of going through with the confusing documentation let me take you on to the code screen and show you that how this could be achieved so coming back on to our first example that we discussed that we want to create something like this where there is a function which takes two values that could be any values Boolean number or anything we don't want to use this syntax so that's where generics actually helps us so let's go ahead and say that this is another function feel free to name it anything much better than what I'm trying to do up here but we want to create a generic this time we'll take two inputs so you guessed it right this can be T and this could be you so UVN number of values that you can provide us as many as you wish to have now further this this is my type where I'll take the parameter and this is my return type so I'll say that what return type we want to have a return type of maybe an object so I'll just say an object just like this so right now returning not returning any object that is fine but important part is what I'm taking as an input so this is my T as a generic and I'll take just you so right now I'm not doing anything and all I'm doing here is I want to return this so how I'm returning this I'm going ahead say that this is going to be my value once I'm going to go ahead and say val 1 which is of type T and I'm also going to go ahead and say val 2 2 which is going to be of type you and at the time of return I'm returning this object don't know why but I'm actually returning them both of them so value 1 separated by comma and value 2 so this is something which is a syntax you have learned new that there could be T there could be you there could be V as many as you would like to take as an input this is fine but there is something in this that let's just say for example you want to use this method so I'll just say that this is a function another function sorry this is another function and in the another function I want to say that hey this could be 3 and this could be a 4 but in a string format this is now expecting the values and it is taking them while you that's why the generic values exist but there could be a situation where you can go ahead and say hey this is going to be extends and we're going to go ahead and extend the number now it gives us a problem that hey strings are not allowed this could be a number or any type of number if I go ahead and say that hey this could be 3 or this could be 4.6 yes this is allowed because this is a number but again this defeats the point of having the generic yes you agree I would agree on that part but where this could be used first I hope you got this much and then I'll show you a real world use case scenario where this extends actually matters a lot so I go ahead back on to the documentation and I see that yes this is what exactly we are trying to do with the help of extends keyword but this is a bit of a complex example so it's not easier to understand so this is exactly I hope now by looking at this one you see that yeah this is making a little bit sense not much maybe but this is making a little bit sense okay let's go back onto the code part and show you something more interesting now let's just say this method is defined and there is an interface so let's define the interface let's call this one as database and this is a database interface there is a connection string into it which is a type of string and string if I can write that and there is also a username which is also a string there is also a password that is also a string so maybe you're defining a custom method in which you want to take that you could be anything but it should be a type of database so in that case you can actually rely that hey anything could come up here or I want to define a generic which actually go ahead and say extends database so in that ways you are although defining very generic but you are still restricting it that it should be a type of database yes there could be another way of handling this exact same situation but since time script offers us a lot of options I want to show you all the options and now obviously I have to go up here provide an object this object needs to have all the values like connection username and password you get the idea and yes you get also the idea that we could have directly said that this value should be of type database that also exists that can be there just wanted to show you couple of use cases maybe this might be useful in the complex thing that you are designing so wanted to introduce you with all the situations okay now there is one more thing up here which I wanted to first discuss in the documentation which is the last topic we'll be discussing about generic surely there could be more but you can also define class types in genetics so notice here they are creating a couple of functions here just like that it's fine but there is a class here which says B keeper then there is a zookeeper then there is a animal which B extends the animal there is a there's a lot of going on in this example and what they're trying to do is create an instance and all of that so yeah a lot of stuff not to really create example what they could have given in the classes and I'm pretty sure somebody might have written a better log on to this one let me take you on to this one so here what we're going to do is we're going to take an example of selling a courses and quizzes so these are two sellable items that you can sell and you want to create a class in which there could be a quiz there could be a course and you want to create some methods which work for both of them because both of them are sellable so let's go ahead and try this out so let's just say there is an interface and let's call this one as quiz now quiz is not that much complex it has a name which is a type of string and maybe there is a type as well there are a lot of types of quiz a quizzes for IIT quizzes for coding there could be a lot so this is one sellable there could be another interface where we could have the course and course is a little bit more complex maybe there is a name obviously there is also an author involved in the course just like books these days courses are authored and there is also a subject don't know why but there is a subject in the course not in the quiz and now you want to create a class which is not going to be one shot all it's not going to be class which will solve all of your problems but there could be a case where I can create a class which can handle some of these common cases let me show you by an example so I go ahead and say call this one as a class which is going to be sellable sellable yeah if that is correct or as a spelling I want to take that in this class I'm creating a genetic class the moment you see genetic function or anything like that these square bra these angular brackets and the t or any keyword there is a sign that this is a genetic class this is a genetic function and in that class you can take any type of values up here for example I just go ahead and say hey I want to create a public card which is available to everyone this is going to take the same type but an array of that and will initialize it with an empty one you get you see where I'm going with this one so now I have this card which is a type of t whatever the t I'm taking and it's an array of that so I'm not saying that this is going to be a class which handles all the courses array or all the quizzes array or maybe later on you decide to have bundles as well so whatever you are thinking it can actually go ahead and work on with that now it's not a one-shot all but you can define some method like add to cart and this method maybe may take a lot of products so we are going to call this one as products products come on if I can write that and these products are going to be of type t you get the point and now I'm going to add these products so I'll just say this dot cart dot push and inside that we are pushing up this product so let's go ahead and say products or product would be better product you get the idea so this is a generic class which can handle any type of object that you can pass it on and can do operations on that remember in this class we are taking t as generic here so it's not limited to just quiz and courses there could be more or you can design more and I'm not with this you should take this statement that I'm not saying that this class is going to be one rocket for all this is not a bullet this is not a silver bullet which will handle all the cases but maybe maybe you can define certain classes which handles quizzes nicely certain classes which handles courses nicely but there could be could be one of the genetic class which might handle the common use cases in both of them and maybe also a future proof where you add more products which are sellable can handle those things as well so yes it actually helps you to write bigger code for a bigger projects in a much smoother way and much organized way so yes there's a lot of things we have learned about genetics I hope you have enjoyed this one if you enjoyed this hit that subscribe button and I'm going to surely catch you up in the next video hey there everyone face here back again the other video and in this video we're going to take a little bit of a different approach now whenever we are learning about programming or maybe building any stuff we usually think about the topics as these are the problem this is how we are going to get solution for example in the arrays we cannot store multiple values in variables so we use arrays in order to loop through the values we use loops but there are some examples with which are business case logics and there is no problem or solution kind of approach in them these are general cautionary stuff that you should know about it and I'll walk you through with some of the documentation and some of the use case example we'll be referencing directly from the documentation so that in case you need further information you can refer to these documentation so without a further deal let's go ahead and get started with that so we'll start with the typescript documentation directly from here and here if you closely look at this we have almost covered a lot here in fact almost all chunk has been covered the basics every day but there is also one thing known as narrowing this is marked here because there's a key important difference and this is something which is useful quite a lot if you click on this now this is where you try to narrow down what kind of a type or data type you are having in your variable for example it could be number it could be string there could be lot more the problem actually comes up is finding the type of the variable so let me just go ahead and show you by clicking on the inspect and it's not a problem for type script it's actually a classic JavaScript issues and yes even on their website also sometimes these stuff happens so nobody's so if I go ahead and use of use this type of and I just go ahead and say I want to type of one I know that this is a number if I go ahead and use a string I go ahead and it simply shows me that this is a string the problem actually comes up when you try to give it an array so if I go ahead and give it an array of numbers it gives me an object which can be little bit troublesome and problematic in that matter of case now also you'll notice that this type of is actually challenging in programming if you go ahead and use the empty string then also it gives you a string but again the literal null values are also objects so yes there's a little bit trick involved in the JavaScript and this is not something which is problem this is something that is the behavior of JavaScript and you should be aware of it and why we are talking about this so much up here let me show you with a code example that will actually make much more sense so in the detection dot TS we are going to be learning about some of the cases where you might want to be extra cautious and that's the whole video is all about so let's just go ahead and say hey this is my function I'm going to go ahead and say detect types and type would be great and I'm saying that the value comes up now this value could be a number or it could be a string now based on this if I go ahead and say hey I want to return the val dot to a lower case I'm not allowed to do so because right now there is no mechanism to 100% guarantee that this is an actual string where I can use this method this could be any right now because it could be a number it could be a string so right now the val is in kind of a state where it could be anything but again we can go ahead and write cases in fact we have learned about these cases that I can go ahead and use the statement that if the type of type of val is actually a number then I can go ahead or maybe let's just say we are going to go ahead and stick with the same example if it is a string then I can go ahead and say val dot to lower case so this is the value I want to use in this case this there is no problem the problem actually starts to come that you have checked the type and you have also checked you have said that hey this is going to return let's just say val dot value of there is not too much of the number so but I can go ahead and say a plus 3 so this is also totally valid so right now cannot be applied to a string because if it is here it should be number but still this is saying that hey we haven't checked it so probably want to check it out we have to make a similar case and we can go ahead and say return and then we can go ahead and say if this comes up here we can go ahead and say val plus 3 this should be all good now it is returning so it will reach to this point of code only and only the case when it is 100% sure it is number but there could be more things there could be more things here checked for this one but what about the case where it could be a number array so that is where the problem actually comes to start so I'll just not do it here but this is not something where you have to keep on checking for each one of them you have to be very cautious in writing the business case that there could be a number of arrays but we cannot go ahead and check that as an array we have to check that as an object so this is the most important case now there is also a similar case I'll just create another function and again these are all cautionary tales so make sure you pay attention on the caution not what could be the solution there could be a lot of business solution so for example this is a common case where we say provide ID provide ID why are you having issues implementation is missing okay no problem where somebody gives you an ID and that ID is a type of string and we go ahead and write the definition and we go ahead and say that if the ID is there or not so this is a common example where we want to find certain elements from the database and maybe there is no ID being provided in that method so in that case this could be a string but this could also be a null and again this is a cautionary tale so this is something that you might be doing quite a lot of time in your regular code so you can go ahead and say if there is no ID that means it is null so in that case we can go ahead and say something like a console log that says please provide ID and we can go ahead and return the method here and if this is all good then we can go ahead and say that hey we did some classic database operation and after that we are returning ID with two lower case or something like that you get the idea that how this is being done now this is something not magical and this is not something which is related to TypeScript this is a simple code that you have been writing quite a lot in JavaScript but this is a code which is appreciated and even being highly considered that you should be writing because here this could be null and this could be string the reason for showing this is just like you're considering this as a null and you get extra cautious similar to here you should be extra cautious about the data type that is multiple in the format so make sure you treat null as anything like as a string or a number and you provide extra cautious here now there's one great example in the documentation let me show you that so where is that example and let me go ahead yeah here it is so notice here they give you a lot of similar example that it could be string and numbers and whatnot and you could also use the type of and all these things the thing which will catch your attention is notice they call this type of as a type guard so yes another fancy name for interviews but it is nothing more than that if you'll read the entire documentation which I have gone through line by line this is all they are saying just use the type of for making an extra guard about what type of variable is coming up instead of calling it as type of they call it as type guard another fancy name nothing more than that so this is all what they have now they also provide this one example here which you should also attention and this is all same JavaScript in case you watch my videos these are truthy values and falsey values they are not literal false but they produce the result now there is this example here I would like to actually borrow this example and we'll show you that so we'll copy this and we'll study this example this is something really interesting everybody should pay attention to this one so don't do this yes we are aware of that the notice here let's understand this example so it says print all where strings could be a string could be a string array and could be null also so three cases are there and we are checking that if the strings are there that means it is not null that means yeah obviously so this case is being taken care of and if the type of the string is an object when we just saw that array also results into as a type of object so okay that part is also covered and we're looping through it so no big deal else if the type is just as a general string then we just cancel log it and you might be saying yeah that's okay we have covered for the string we have covered for the string as an array and we have covered for the null that's great but what is the case that we haven't covered is an empty string and empty string is a little bit cautionary thing notice here this is the empty string and these are truthy and falsey values so this is exactly what they're mentioning here that the strings is truthy this at least prevents us from the dread errors like this but we haven't covered all the cases we haven't covered where the cases are that when the value is nothing and this is not gonna break our code but this is kind of a business case where you should be covering the case if the string value is totally empty so this is all they want to show you in the documentation again reading and understanding from the documentation could be a little bit boring but this is what is going to make your foundation absolutely amazing in the world of TypeScript there's a little bit more to this narrowing and there is nothing much like too much you haven't seen anything this is just a general discussion in which I think you should take part in it but in case this sounds boring to you welcome to the programming and reading from the documentation so that's it for this video let's catch up in the next one hey there everyone they share back again with another video and in this video we're still continuing the topic of type narrowing still in our TypeScript series and as we saw in the last video there are a couple of ways how we can specifically find the types but there are a couple of use cases mention in the documentation which are specifically meant for the flow that you actually follow in the TypeScript let me walk you through because the documentation has one such great example so we are still in the narrowing which we studied in the last video so you can see there is an equality of narrowing there's an inoperator narrowing and quite bunch of them now this inoperator is not something which is exclusive to TypeScript only it's easily available in TypeScript as well in fact we use this quite a lot now they mentioned this quite a number of times that the inoperator TypeScript take this into account as a way to narrow down the potential type and we can use this not just with the basics of objects because in the all JavaScript example you're going to see that this is being used to find out whether that property or key value pair in the key is available in that object or not so this is usually the use case we go ahead and check this out if swim in animals so we can see that this if it is available in animal or not but I'll give you a more better example that is actually make that makes sense in the TypeScript for example so let me show you as a really simple interface if you're working in TypeScript you'll be using like hundreds of interface left and right let's just say we have an interface of user and the user obviously is going to have a name and then you are also going to have an email which is also going to be a string all right this is a really basic interface then we go ahead and create another interface and this is admin interface now we also know that admin interface is almost same as the user it has a name it has an email which is also going to be a string but it has another Boolean property which is admin which is a simple Boolean now this is really basic and somehow you're creating a function so let's just say there is a function and you check out whether is admin or not now in this case let's just say a value is being passed on or an account is being passed on and you know that this account can be of type user or can be of type admin so there could be both of them and now all you got to do is check this whether this is admin or not now this is something really really tricky as of now because I cannot go ahead and say that hey this account if it is having a property of dot is admin it's not going to allow me to return this I cannot go ahead and go ahead and say hey return this because right now it says a property is admin doesn't exist on user it only exists on admin so I have to make sure that hundred percent this is admin and if this is admin I can actually verify that using pretty easily by the same operator we studied here so let me walk you through so notice here the in operator it actually helps you to narrow down which interface it is it could be used for the regular objects as well but in the world of typescript you're going to see that this is more use case scenario for such interface let me walk you through with the code remaining the code I'm pretty sure you have already walked through with that which is really simple so I can go ahead and check whether this is admin which is a property only available in that so I can just go ahead and say in and I can check whether is the same is admin is available in the admin so I'm going to go ahead and say admin is in account so there we go if this property exist in this account then only we are going to go ahead and say return and we're going to go ahead and say is admin so this is going to return us the property if it is true or not and all of that and we cannot actually go ahead and append that account dot is admin that would be better okay and otherwise we can return just a false so this is a much better code and if it has reached here notice here the account automatically changes that it is 100% admin because we're going to only follow or fall through into this if if a statement only because of this in statement which actually verifies whether this property and remember I should actually change this name here is admin or is admin account something would be better because otherwise it would be really confusing okay so this is a function which says is admin account and the account comes up as an interface and this could be any type of interface can be a user could be an admin and we are narrowing it using the in property and there is nothing too much to discuss there and if we are 100% narrowing it then we are making sure because this property is admin only exists if the interface type is a fragment so this actually validates and further boils down and narrows down the things on to that so let me walk you through so this is exactly what the examples are saying up the example that we have taken up is much more precise and clear but that's it that's all it is there to discuss about the in operator narrowing let's catch up in the next video hey did everyone wish here back again with another video and in this video we're going to be talking about the two more topics which are again belongs to the same category of type narrowing and the first one is easy the second one takes a couple of minutes to actually adjust but it's also easy not to worry I'm here everything is going to be easy so not to worry on that part I hope you're enjoying the series if yours do share it up with all of your friends and hit that subscribe in case you want to okay let's go ahead and talk about the two more type of how we can narrow down the type this entire portion of the series is about how we can go into the more preciseness of the type so that we can take better action and that's what the type script is all about getting the types all narrowed down so let me walk you through with the documentation again and these all examples that we'll be talking through some portion of these examples come from the documentation but I have modified them a little bit for the easier understanding but yes the source is always documentation so the next in the line is the instance of so this is how further down you can narrow down the things and they just do mention the prototype and all of that but the idea is the focus of your attention should be on anything that is or that can be constructed with the new keyword that's where this instance of actually comes into the picture so this is a common keyword it's something that is obviously there so you can just go ahead and check out anything is X is an instant of date so anything just you can use new keyword like we create a lot of classes we can also create arrays with the new keyword we can create objects with the new keyword all of that that can be find out I'll just borrow this code into the codeator so I can just show you a little bit more so we have gone through with this one so this is an instance of now again in the value they say is hey this is a parameter and all that will just get rid of that because we don't need this parameter we don't need this part let's let's adjust this code a little bit so it's easier to understand and there we go all right so what this function is doing it's a log value now notice here this X can be a date or can be a string so how can we find a date because remember date can be easily created any type of variable can be created just by saying new and then we create a date just like that a new date is being created similar to that you can actually go ahead and create an array like this so anything that uses this queue new keyword is there and this keyword instance of is almost like not literally but almost like type of type of checks you for the default types instance of check you whether this object was an instance of some class or maybe some something like that so here we checked whether the X is an instance of date so it just returns a true if that returns a true we are able to further narrow it down now notice here if I come up here we are 100 percent sure that X is going to be date in this case and in the other case it's going to be string so yes this is also a valuable keyword where the type of doesn't really cut through there you can check whether this is instance of and again remember from the docs it can only be used where there is a new keyword that there is a potential of having a new keyword so this is easy part now coming up one of the part which is little bit tricky which is the type predicates okay this is where TypeScript has nothing to do it's a bit of a logical flaw not flaw I wouldn't say but a logical kind of a flow that goes through and which sometimes matches and it introduces a new set of keyword let me show you and again we are going to be using the same example that is given up here pet fish and all of that so we'll just just going to literally line by line write this keyword but then we're only going to write this much and then to understand it we are going to use our own functions okay but first let's go ahead and use this one so we're going to go ahead and say function and this function there we go and this function we're going to say get food there we go and before we actually go ahead and define this get food and stuff we need to actually have a fish so again this is all coming up from the documentation not making anything up so there we go so this is a fish and we're defining a type of it which is going to be like this and we're going to say that hey you are going to have a method of swim and this is going to be a method like that this is not going to return anything so we're going to go ahead and say wide so this is really simple we're going to go ahead and put a semicolon duplicate that this is not a fish this is a bird and bird don't swim they actually fly so we're going to have a fly method now we have two types just like we had interface we could have type again both the same values and based on this now we can use an example that was given to us in documentation so we're going to go ahead and create a method which says is fish so obviously just like we had method like is admin this is a method which is going to validate whether the input value was given is a fish or not really simple it could be any variable well whatever you want to say it could be either a fish or it could be a bird so these are two values now what we want that this function should return us a true or false value now how they do it in the documentation is a little bit of a typecasting pet as fish and all of that so let me walk you through so what they do is first they say that pet let's cast this as fish so just like that let's wrap this up inside a parenthesis once we actually do this then they try to check the method so fish has a method of dot swim and if that method exists that means it cannot be unidentified so we're going to say if that is not equal to undefined did I say unidentified I mean to say undefined okay so what we're going to do is we're going to simply go ahead and say return there all right so really simple yet a little bit more of the code that is involved but here we are saying pet is a fish if it has a method of dot swim that is not undefined then true it is a fish so that is exactly what they're doing and they're exactly saying like this but things actually change a little bit so let's try to use this this much so far we have got the code from the documentation but let's try to implement that so further down the road I try to get some food for the fish so let's go ahead and get some food for the fish and I know that the food is different for fish and for birds so pet is going to be type of either fish that might come or it could be a bird all right now since I have the access of this method which is is fish I can use an if-and-else condition here I can go ahead and simply say is fish which is a method available to me and I can pass on this pet here okay so far no problem and if that is the case then here if I go on to line 66 I'm 100% sure that whatever the value of the pet comes up that has already being identified for true for the fish case now let's go ahead and say that if this is the case then we're going to return as a fish food and if not then obviously it is a bird so we're going to go ahead and return this is a bird food I don't know what to call a fish and but I'll also say this pet here now in theory if we have defined it so well and we have done this so much this is coming up directly from the documentation by the time we reach line 66 the pet should be identified as truly as fish and on the line 69 it should be identified truly as bird but that is not the case if I hover over this pet it is still confused type script is still confused whether this is a fish or a bird here also goes same that it is a fish or a bird so still the value or the type of the value is not being identified although it is not giving us any error it will still work as it is fine but this method is truly not behaving because what this method is returning is a true and false value which is a Boolean in the in the case so returning a Boolean that is fine notice here it is returning a Boolean it is not returning me a type of fish or a bird okay so what does the documentation says documentation says that you can use pet is fish so you can instead of returning a Boolean you can use the syntax of pet is fish that means you are type costing it as a particular type for example I can come up here since here on the line number 60 I'm 100 percent sure that if this returns as true then I'm sure the return type is fish and again you have to use a colon here my bad there we go so this is a bit of a new syntax but now you get the idea the true value returning Boolean is not going to cut through in this special case but if you go ahead and return the type which could be fish or anything else in your case is now a guarantee that we are returning truly not as true but actually as a fish when I come here now we are identifying that we are returning a fish or we are returning a bird yes this is a little bit of a weird syntax but this is fantastic how they have implemented it mind boggling but really really I absolutely love that how they have defined it yes the documentation is also almost like that but I have just tried to break it down this one is not so great explanatory I've just modified this example but again everything is coming from the documentation we don't learn anything from elsewhere it's just documentation so I hope you have enjoyed this one I'm super happy that you are hit that subscribe button and let's catch up in the next one hey dear everyone face your back again with another video and in this video we're going to talk about the final the final steps of the tight narrowing now this final step is broken down into two steps the first one which is absolutely bad I don't like it I don't appreciate it the second one is really something that makes sense so we're going to refer to the documentation we will be using the code example from the documentation but I have modified them again a little bit because it's easier when I am actually modifying them the code that is written here it's making sense it's great but I can make it a little bit easier so why not why do wait for it so let me walk you through that how this actually works so the two we are going to talk about actually they are mentioned as three in the documentation but these are actually just the two topping the first one is discriminated unions really mouthful and the second one is actually in a mix the never type and exhaustive checkness they actually kind of make sense when you talk about them together talking about them separately I was not going to make sense so let's first see what is this discriminated union so they're making a lot of examples so notice here only thing you should mention or notice here is that they are using shapes circles and square we are also going to use that but not like this I have made a better example and then we are going to go through with that I will take you back on to this never type in case you remember I briefly touched about the types when we're discussing that yes there is a never type as well you'd never want to use that this is the place where you want to use it but never want to be available to you in any code so this is the point where we actually talk about them and then this exhaustive checking we will come on to this exact same example almost same example up here so let's start with discriminated union just forget about it even exists I'll show you the concept that is actually much better and let me open a VS code here it is all right so this is all we can actually just talk about this in the detection only so we're going to go ahead and get started so what this first discriminated union really bad word what they are talking about is let's just say we have an interface we call this one as circle and we actually kind of have find out that in order to use any other way we have to actually know these interfaces well in advance for example in this interface I have to know all the properties to find out whether it's a user or not I also need to be well aware of the properties available in admin that there is an is admin so that I can check whether is in or instance off or something like that so what they are saying in the documentation is you can mention a property as the name as kind and you can name this as literal circle just like that and similarly you can have an interface and we can have a square and here also you can mention the exact same property and you can mention this as a square you get that where this is going on so have the property exact same name in all of your interface and then you can check that whether this is dot kind of square or dot kind of circle so not a big fan kind of a hacky way this could be a best practice at the best but having them in the documentation that doesn't feel really good so let's continue with this one so let's just say we are having this circle so obviously circle will have a radius or radii whatever you like to call that that will be a number but in the case of square it will have a side which will be a number now with this I would also like to declare another interface which will be let's just call this one as rectangle rectangle there we go okay in the rectangle obviously they mention that hey this is a good practice if you mention a kind of rectangle rectangle there would be and rectangle will have two sides so let's call this one as length which will be a number and will also have width which will also be a number so so far so good no problem at all and yes we kind of forget it that we can have a mention of kind in each one of them by the way it's not really compulsory that you say it kind you can say that a property find whatever makes sense to you and that's that is it that is it my friend that is it your discriminated unions they say that hey use the kind here the example here is actually a little bit shaky in this but you get the idea with my example I think it's much more easier that you can have a kind for all of them so yeah that's basically it that's your first topic yes and let's try to use this otherwise it will not make much sense so let's just say we are having first let's have a type here otherwise what we are going to check along so we're going to say that hey I am creating a shape that shape is going to be either a circle or is going to be a square there we go now we can create a function we're going to call this one as get true shape any arbitrary name is a good one here okay in this one we're going to say that hey a shape is going to come in which is going to be of type shape just like that and we can evaluate so the way how the first method says that you should be evaluating is by simply taking this shape and we know that each of this shape is going to have a value of kind and we can match it for anything for example I can match it for circle notice how well the auto suggestion now comes up because of this kind which is kind of a good we can go ahead and return a math dot pi so pi r square is the formula so we can go ahead and say shape now we are very sure that this is actually shape is a circle so notice here and I can go ahead and find out the radius and I can pi r square there we go so that's basically it and if this is not the case then I'm sure that if I move to line number 97 then it is a square so I can go ahead and return simply shape and notice here as I say dot it says side so side shape dot side whatever formula works for you so this is the implementation of the first method that we have used but there's also one more thing if you read the documentation this never type and exhaustive check so what does it do and how does it work so the basic idea is let's just say you're creating a function and this one is going to be get area and this also takes a shape which will be of type shape there we go now the idea is you do exhaustive switch and case check for this one so you can use a statement of switch yes that's available and I can just check the shape dot kind just like we do for the ratings we build a lot of applications together in the courses so rating dot five star two star one star all of that similar kind of a star so let's just say we have a case where this is a circle so we can go ahead and say I want to return albados some code don't want to write this again all right so there we go and this is it so we're going to go ahead and return this let's go ahead and say I am having a case of square and this should be indented a bit there we go and if that is the case I'm going to go ahead and return again we'll borrow a little bit of the code copy this and paste it up here okay this is good this is fine but what there could be some more cases so for example we are doing an exhaustive check here and that is working absolutely fine because we are having only two cases now this next step is a precautionary step for making sure that your code is future proof if you remember we defined a rectangle as well but we only checked for square and circle but there could be a case in future where now this is available for rectangle as well now this you can relate to something let's just say you have defined you are working with the payment gateways for stripe or maybe a razor pay or wherever you like now there are a couple of status in the payments maybe it has been captured it has been refunded it has been initiated but there is also a payment status which later on was introduced known as authorized you didn't worked out for that now you have created an interface for it and you have make sure this is it now if you'll go up here you'll notice that hey what this is this is obviously falling apart so this particular code is not working out and also on top of this this here seems like we are working through it but there is now another thing another case where we should be checking which we are not checking so I'm going to go ahead and come in this out for a minute now this is working out but we need an extra case for this one let me show you what the documentation says about it it says that you should always have a default case which should be of type never on to whatever the shape you are defining and you should return that now since this is made as a type of never which should never be used that is why this is important and trivial to have this is known as the never type so yeah this is all exactly they are mentioning up here so they are saying that hey you also have a case of defaults okay not case is actually default there we go so in the default what we're going to do is we're going to create a constant it could be any name so this could be default for shape it doesn't really mean this variable could be anything because it's a type of never so technically it should never be used and we're going to go ahead and define a shape on that and then we're going to go ahead and say return underscore default for shape and why are you yelling it's not assignable to type never so that is exactly why this is meant and right now this is giving me a problem because I'm not checking for all the exhaustive cases and this is exactly what you want because if a new type or interface is being defined and that is also being used you want your code to yell at you that hey you're doing something wrong there should be something where you should be checking so for example if I come up here and if I go ahead and do a check of the case now notice here I check for a rectangle case and I return shape dot length multiplied by shape dot width and notice here now this code is not running not acting and that is why the type never is never going to be assigned as a shape so that is why it is all happy and yes this is all a good practice so this is what I liked the discriminator type yeah okay but this never type is a really good check I can directly see the use cases not just for the payment gateway but for a lot of variety of checks because code always keeps on evolving you have new types keeps on coming new situations keep on coming and this makes me always happy that there is a default method which should never supposed to be running instead of just relying hey it will never run this is a nice checker I like this much so this is the end of all the values all the narrowing down that we can have so all the important ones I have discussed more you have now learned that how we can read from documentation so you can go ahead and do it so hit that subscribe button and that's it for this one let's go ahead and catch up in next one hey there everyone with this year back again with another video and welcome to the final official end of the type script series it is very important that you start a series but is it it is equally important that you end up a series as well start of the journey is important so is the end otherwise it's all just a tutorial hell now you have enough knowledge with yourself with this type of series that you can go ahead and implement type script in any production grade application or can start playing around with that in react angular or anything like that if you have reached so far I'm pretty sure you have learned this the type script is not associated with angular or react or anything else is just is a strong sense of writing production grade JavaScript which is probably less error prone and give you more strong types so that the chances of creating the errors are minimized that's all the type script is now apart from this let me walk you through I have also added the GitHub repository here on this so that anybody who is watching can actually go ahead and just learn this one and this is the official page type script youtube 22 so this is entirely it probably I missed typed it let me just go ahead and correct that so this is now it's all correct it was just showing me half of that so this is all the link that you should have otherwise just go on to my GitHub repository and you can just find it pretty easily it's super easy just go on to the repose and you can search for it and you'll find it at the top all the source code are mentioned up here now with this let me also mention this that there are probably a couple of topics that I might not have covered might have slipped out here and there in the crack but the most important part is if you have watched the concept of this entire series it was not just to teach about the type script but also to introduce you how to learn from the documentation I have explicitly chosen those example which are from the documentation so that you get an idea and sense of how to read from documentation so that if some topic is missing you can directly go ahead and read from there otherwise just let me know on my Instagram and I'm super active there and I'll try my best to add those topics into this series if they are sounding a little tough for you but how long you're going to be keep on asking for the videos go ahead and try it out on the documentation first and if it doesn't work out let me know I'm always here to help you out with that now go ahead and build some amazing stuff that is the most important part of brushing up your type script I'll try my best in the future so that I can come up with some projects that include TypeScript and together we can brush up some of our knowledge as well as I can teach you some of the production grade stuff of how to use TypeScript this was all it was an amazing ride I learned a so much about the TypeScript as well as bit more about the foundation of teaching as well as creating better thumbnails that the one thing I learned from the entirety of the series now one small request from my side that please go ahead if possible share the series the tutorial series where we teach something don't get that much of attention we don't get that much of the views and again it's it takes a little bit stress on the channel as well that we're pushing the series which are not taking much views so your small share or from your colleague from your college friends in your watch tab group in your discord channel in your telegram channel would be super helpful if that is possible from your side otherwise fantastic series I learned a lot about it I hope you have enjoyed a lot in that keep on supporting me I'll try to push more series like this and yes this was really fun thank you so much and we're gonna surely catch up in another such series