Learn TypeScript – Full Tutorial

Aug 15, 2023

Learn TypeScript – Full Tutorial

Learn how to program with TypeScript in this full course for beginners. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript provides better error checking than JavaScript. This is because TypeScript uses a static type system, which means that the type of a variable is checked before the code is executed.

💻 GitHub Repo: https://github.com/hiteshchoudhary/ty…

✏️ Hitesh Choudhary created this course. Check out his channel: / hiteshchoudharydotcom

⭐️ Contents ⭐️
⌨️ (0:00:00) Why to learn TypeScript
⌨️ (0:07:08) TypeScript is not what you think
⌨️ (0:15:25) How to install TypeScript
⌨️ (0:27:33) Your first intro to TypeScript docs
⌨️ (0:39:21) Number, boolean, and type inference
⌨️ (0:39:21) Number, boolean, and type inference
⌨️ (0:46:52) Don’t use ANY
⌨️ (0:51:30) Do you really know functions
⌨️ (1:02:55) A better way to write function
⌨️ (1:15:38) Bad behavior of objects
⌨️ (1:25:14) Type Aliases
⌨️ (1:32:28) READONLY and optional
⌨️ (1:42:13) Array
⌨️ (1:50:03) Union Types in TS
⌨️ (2:04:46) Tuples
⌨️ (2:14:33) Enums
⌨️ (2:24:03) interface
⌨️ (2:33:52) Interface vs Type
⌨️ (2:39:08) How to setup Typescript for real projects
⌨️ (2:53:44) Classes
⌨️ (3:02:06) Private Public
⌨️ (3:08:12) Getters and Setters
⌨️ (3:15:25) Protected
⌨️ (3:19:34) Why Interface is important
⌨️ (3:26:05) Abstract class
⌨️ (3:35:36) Generics
⌨️ (3:47:58) Generics in Array and Arrow functions
⌨️ (3:56:07) Generic Classes
⌨️ (4:07:16) Type Narrowing
⌨️ (4:17:04) The in operator narrowing
⌨️ (4:22:17) Instanceof and Type Predicates
⌨️ (4:31:35) Discriminated Union and Exhaustiveness Checking with never
⌨️ (4:42:54) TypeScript End

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

—

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

Content

0 -> TypeScript is a programming language based on JavaScript that is becoming increasingly popular.

5.6 -> In this complete course, Hitesh Chaudhary will teach you everything you need to know

9.84 -> to get started with TypeScript. Hitesh is a very popular teacher who has created over 1,000

15.76 -> tutorials. Hey there everyone, Hitesh here, back again with another video, and I know you are

20.8 -> pretty excited about this new series that we're going to get started. This series is going to be

25.84 -> a little bit fast-paced so that you can understand what TypeScript is. And I totally understand

30.96 -> the excitement, the enthusiasm to learn all about TypeScript that you want to have.

37.36 -> The right now the entire world is traumed by JavaScript. A lot of people are loving it,

42.08 -> a lot of people are hating it, but regardless of the fact, everybody is writing JavaScript.

47.04 -> And there are plethora of tutorials available on JavaScript, including mine and I am also

52 -> determined to add more videos in those tutorial series. But there is new kit in the town known

57.12 -> as TypeScript. A lot of people are loving it, those who start writing the TypeScript just claims

62.4 -> that I don't want to go back into writing JavaScript. So what's this all fun about TypeScript?

67.12 -> Are we missing anything? Not at all. Today we're starting a brand new series on the TypeScript,

71.76 -> and eventually as we go further, you will have the full knowledge and full right-table skills so

76.48 -> that you can transform from JavaScript to TypeScript. But before going further there, I would like to

81.92 -> just give you an introduction what TypeScript is and should you be even writing TypeScript at all

86.96 -> on the first place. There is a lot of hurry in the market that I just want to jump into TypeScript.

91.68 -> I don't even want to learn JavaScript, but that is not the case, that is not how it should be started.

96.72 -> It should be started with JavaScript, and there is a reason behind it. I'll walk you through

100.72 -> with that. And I'll also walk you through that why it is important and why even you should be

105.6 -> writing JavaScript at the first place or shouldn't be. That is the big question that we're answering.

110.4 -> So welcome to the series on the TypeScript, and we will be running this series into a fast-paced

115.68 -> mode. I'll be pushing up a lot of videos. So go ahead, buckle up, and let's get started with TypeScript.

121.76 -> So TypeScript, obviously you want to learn it, and everybody knows one thing about TypeScript.

126.48 -> I'm pretty sure in case you are living unless and until under a rock, you have heard about that if

130.8 -> this is a JavaScript, the classic yellow icon, this is a TypeScript. Often called as the TypeScript

137.2 -> is a superset of JavaScript. That means everything that you can do in JavaScript that is already

142.32 -> available in TypeScript, and a lot more is available to that. But that is a kind of a true statement,

148.24 -> but not accurately being contextualized by a lot of people. Yes, you have accurate

154.4 -> statement that TypeScript is a superset of JavaScript, but it's not like it is adding more features

160.24 -> to JavaScript. No, it doesn't give you more of callbacks. It doesn't give you more of arrow

164.48 -> function. It just allows you to write JavaScript in a much precise manner so that your code

170.16 -> faces a lot less error in the runtime. If there is any error, it is already being displayed to you

176.24 -> while writing the code at the kind of when you're just typing them out in the your favorite editor,

182 -> maybe VS code or something. That is where we want to just catch those error and find that we

187.52 -> shouldn't be doing something like that. So that is all your TypeScript. It is not going to give you

191.92 -> a new loop. It is not going to give you a classes or new modules. It is not going to give you

196.8 -> anything new. In fact, all the code that you write in the TypeScript is finally compiled into

202 -> JavaScript. Not only that, even though your codator might be yelling at you with some

206.8 -> squiggly line about the TypeScript code, still you are allowed to compile that code in the

211.92 -> JavaScript and it might run with errors, but it might run. So there is a strong thing that you

217.44 -> need to understand that it's not like TypeScript is the ultimate way of writing the pure JavaScript

222.56 -> and is not going to give you any quirky behavior. It might still throw you around off somewhere

227.28 -> and that is exactly what we are going to learn in this series. So first, yes, I understand that you

232.88 -> know this statement that there is a JavaScript, there is a TypeScript, it encircles the entire

237.52 -> JavaScript. In this series, I'll walk you through all the details and depth of the TypeScript,

241.6 -> so don't you worry about that, I'll cover that up. But first and foremost, should you be even learning

246.48 -> TypeScript? That is the big question. TypeScript is not about reinventing the entire JavaScript

251.6 -> language, it is not. It just is asking that you write JavaScript with a little bit more

256.32 -> accurate behavior. Don't just do anything, just try to write a JavaScript in a more precise manner

262.32 -> so that errors are less. And I honestly would say you shouldn't be using TypeScript. If your

267.6 -> project is just too far long and there are in each file, there are just five or ten lines of code.

273.04 -> It is not compulsory that every single place you need to write TSX or TS for TypeScript.

278.88 -> I've seen a lot of people who use TypeScript, but all the places they use any, which is a keyword,

284.32 -> we'll talk about that later on. If you're using TypeScript, you need to use the super power of TypeScript

289.44 -> to make your code much more powerful and much more error prone. And if you're using

294.64 -> just TypeScript for the fanciness of writing TS, you're probably not using it correctly.

299.84 -> After watching this series, you'll be watching TypeScript in a much more powerful manner.

304.56 -> So TypeScript is all about TypeSafety. Nothing more. Just this word. And I'll be repeating this word

311.28 -> probably a million times in this entire series that what is this TypeSafety? TypeScript is all

317.04 -> about TypeSafety, nothing else. So what is this TypeSafety? Let me give you a couple of code

321.68 -> examples. So TypeSafety is nothing that JavaScript allows us to do some odd behavior. For example,

327.68 -> I can go ahead and just add two with a string of two, which I shouldn't be allowed to do when

332.88 -> it gives me an odd result of 22. This is happening because the TypeSafety was missing.

338.32 -> On the very first place, it should have stopped me from doing an addition of number with string.

344.72 -> Now it doesn't stop you. It tries to do its own behavior, which I've discussed a little bit in

349.04 -> my other videos, but let's just say right now, stick here. So this behavior shouldn't be allowed.

353.92 -> That is all a mismatching of the type. If you have been consistent with your type, this error

358.32 -> shouldn't be there. And TypeScript allows you to just stop this behavior. That's all it does.

363.44 -> For example, let's just say you have null. You're allowed to add a two value to the null.

368.16 -> And on top of that, there is undefined. And you're allowed to add a two to undefined and get another

373.84 -> thing like two and none. Not a number. This is all not the quirky behavior of JavaScript, but rather

381.04 -> your way of you haven't been concerned about the types of JavaScript. There is an explanation in

386.64 -> the documentation of JavaScript that what behavior is going to kick in or what behavior is going to

391.28 -> superpower and power that. But apart from MDN, we haven't read the documentation of JavaScript,

397.44 -> which are being the language specification given by ECMAScript. They are all right here.

402.88 -> But the idea is I shouldn't be reading that much on the first place. I should be focused on

406.88 -> building my application with the type safety. And that is where the TypeScript comes into the

411.76 -> picture. So in this series, you're going to be mastering the TypeScript. So subscribe to the

416.4 -> channel. And we're going to be walking through, in fact, rolling coasting through this ride of

421.12 -> Type Safety with the TypeScript. I hope you're all excited. A lot of videos are coming in. Get

425.92 -> subscribed. And let's catch you up in the next video. Hey, there, everyone. I'm Tashir back again

430.4 -> with another video. And before we even move further in the TypeScript, even its installation process,

435.84 -> I want to make this absolutely clear that what TypeScript is and what it isn't.

440.72 -> In this video, I'll focus on what TypeScript is not. And this will help you to understand TypeScript

446.48 -> in a better way. And the perspective of the TypeScript is going to change. A lot of people believe

451.28 -> that TypeScript is a new programming language, which honestly is not a 100% true statement. There

457.76 -> is a little bit difference in understanding the TypeScript. So let's get our vision clear first.

462.48 -> And then in the next video, we'll move on the installation part and the environment setup so

466.32 -> that we can start writing TypeScript. But before that, let's clear our perspective about what

471.12 -> TypeScript is. In order to understand what TypeScript is, you need to understand is the simple

476.48 -> statement what TypeScript does for you. The simple idea behind the TypeScript is static checking.

482.56 -> That's the only job. And yes, that's the only one job that TypeScript has got for you.

488.32 -> The static checking is something which is present in many languages, especially the languages such as

493.76 -> Java or maybe even GoLang. A lot of languages are built in with the static checking. And what does

500 -> the static checking means that whenever you're writing the code, the parser of the language or the

506 -> entire syntax of the language is constantly being analyzed by the IDE's. But not in the case of

511.76 -> JavaScript. Whatever you write is just okay for the JavaScript. And when the code executes in the

517.52 -> browser or in the engine like node environment or anything done, then only the errors of JavaScript

523.76 -> are being thrown at your face. And at that time, you just say, ah, that's wrong. And you need to

528 -> rerun the code itself. But it would be really a great help if there is a static checker which

533.6 -> checks my code as I try to write it. For example, I'm trying to access an object which is not yet

538.72 -> defined. If something can analyze my code and can give me a hint that that object doesn't exist

544 -> in the object properties, then obviously it's much more easier for me. For example, when we are

550.16 -> trying to add a few numbers and then the one of the number is not a number, maybe a string, then

555.2 -> if somebody helps me in giving me a squiggly line that, hey, that is not going to work. So that is

560.88 -> great for me. And again, the level of the detail that which one is going to stop you from doing

566.08 -> something and not stop you, that's all about the static checking. So just to repeat,

570 -> TypeScript is just for static checking. It just analyze your code and help you to understand that

576.4 -> you might be running into a potential error without even running the code and getting the errors

581.28 -> at the runtime itself. That's all it does. So I hope you understand that. The whole job of the

586.16 -> TypeScript is simply to analyze the code. That's it. That's all it does. Now on top of that, I'll also

592.24 -> walk you through with an example as well that it just checks and gives you hint about that,

597.28 -> yeah, you might be doing something wrong. But yes, it is still possible that your code might be

602.4 -> giving you a squiggly lines or errors and still you may export this entire code into JavaScript

607.44 -> and that might run absolutely well. And I'll walk you through with a couple of more

611.84 -> missed things, kind of a misheard concepts about TypeScript that, hey, with the TypeScript,

616.24 -> you write less code and it does build the JavaScript code for you. So that is way more code.

620.8 -> In fact, reverse is the true. In the TypeScript, you write a lot more code compared to JavaScript

626.72 -> and sometimes even I have seen 50 lines of code are being compiled into just 10 lines of JavaScript.

631.92 -> Yes, but it is worth it. I'll walk you through with that as well. So first,

636.16 -> how the development process works. You write all of your code in ts.ts format, which is a simple

641.92 -> TypeScript. When you're building components like React or something, I have seen people use a

646.8 -> simple extension of.tsx, which is also totally fine. It has nothing to do. It is just a mixture of

652.72 -> TypeScript plus the gsx kind of a syntax. So this is kind of a same component thing. Basically,

659.12 -> your HTML is baked into the system. I'll walk you through with that as well. But the whole idea behind

663.76 -> the TypeScript is you write your TypeScript code and that code is being transpiled into JavaScript.

668.96 -> And there are a lot of fancy words here. It has compiled. It is transpiled. We'll work through with

673.12 -> that. I'll give you a brief overview of what is the difference between them, what is the meaning of

677.2 -> it and how it is working. You can just simply say at this point of time that TypeScript code is being

681.92 -> converted into JavaScript. That is a rather safe word to use right now. And then your JavaScript.

687.76 -> And one thing, the most important thing to learn and to know for this video is TypeScript is a

692.8 -> development tool. Yep. It is a development tool. Your project still runs in JavaScript. The code

698.48 -> that you produce or you send to the production is still a pure 100% JavaScript code. So TypeScript

705.12 -> is just a layer on top of JavaScript. As I told in the earlier video, it's a super set of JavaScript.

710.56 -> But rather, it would be accurate to say that it's a development tool. It helps you to write

715.28 -> better code with less problems with a more scalable and maintainable code that is easily

720.56 -> understandable and produces and the chances of producing the error is much more less. But it by

725.52 -> no means that it's a standalone language in itself. It's something which is a wrapper around the

730.64 -> JavaScript. And yes, there are new keywords here like Union and Interface and a whole lot of them.

735.12 -> We'll walk through with that. But understand this very important thing that it is honestly a

740.16 -> development tool which helps you to write better code. This might be a surprising for a lot of us,

744.48 -> but this is how it works. Okay. Giving you some examples on that, we'll be writing a ton of

749.52 -> hands of code. We'll be setting up our own environment as well. But I'll walk you through with those.

754 -> So this is a TypeScript lang.org. A free code environment that is available to all of us. And we can

759.68 -> see on the left hand side, we run the TypeScript and there are a lot of versions of it. And on the

763.68 -> right hand side, it just produces a JavaScript code. For example, I can just go ahead and say, hey,

768.64 -> I want to do a simple console dot log. And I want to just say, I want to print my name or hello

775.2 -> world. That's how it got started. And you can see that the JavaScript part that is coming out. It's

779.92 -> exactly the same. In fact, let me just go ahead and declare a simple user. So let's just say we are

784.96 -> going to call this one as simple user. This is an object. And in this object, there is a property

789.76 -> something like a name, which is going to be my name. And let's just say we also have another

795.36 -> property, which is age and let's just say age is 10, fictitious, of course. And you can see that

800.96 -> this is exactly what is producing. Now, what TypeScript allows you to do if I just let's just say I want

806.72 -> to have an variable email. And that email comes from user dot email. Now, notice here, there is a

812.96 -> squiggly line. The error was given to me here that, hey, this property doesn't exist. So TypeScript

818.56 -> smartly just go through with your code and tells you that email was not available there. But notice

824.56 -> here, most important thing here is although this property was not there, but there is nothing which

829.52 -> is stopping me to produce the equivalent JavaScript code. Yes, that is the most important thing.

834.8 -> In fact, this might be a little bit surprising to you in the initial first look that let's just say

839.36 -> if you go ahead and say that I have a simple number one, which is three. And let's just say if we

845.6 -> have a number two, which is three. And if I go ahead and say, hey, let's just call this one as some,

854.96 -> that is going to be equal to number one. And we're going to go ahead and say number two.

860.32 -> The notice here, if I go ahead and do a simple console dot log and I go ahead and say, hey,

866.48 -> give me a sum, you might be thinking that JavaScript or TypeScript, especially is going to just

870.96 -> just allow you to do these kinds of things. You can see right now, nothing is doing that. If I run

875.92 -> this code, the code is transpiled. We get the same things as 33. Yes, there are ways to avoid this.

881.92 -> I'll walk you through with that. But here we can see in the playground, it is working fine.

886.4 -> So it is very important to understand in depth about TypeScript that what is allowed,

890.48 -> what is not allowed, how we can enhance more of Type Safety in our JavaScript code. And that's

895.84 -> exactly what we are going to learn in this video. So again, always remember, it's a development tool.

901.04 -> It's yes, there are a lot of keywords and everything that is new in this stuff. But it would be

905.28 -> rather much more accurate to call it as a development tool instead of just a standalone language.

909.52 -> Because this language is too much dependent. In fact, entirely dependent on JavaScript,

914.24 -> it just a wrapper around it. So let's go ahead. In the next video, we'll be setting up an environment

918.8 -> so that all of us can write some TypeScript on our own environment. And you can just send this up.

923.36 -> Let's go ahead and catch up in next video. Hey, there, everyone.

926.24 -> Here, back again with another video and welcome to another video in the TypeScript series.

931.6 -> Now, I'm a firm believer that if you show people the code and try to explain the concept within

937.12 -> the code and the execution of the code, it's much easier to explain. I've tried it out, tested it

942.56 -> out with a whole million student and it works nicely. The another consequence is that if you don't

947.84 -> try to write the code and instead you just use the pen pencil, which is a great way of learning.

953.12 -> But it takes much more time. It requires, let's just say, 40-minute videos or a one hour,

957.2 -> 40-minute video. But what I have noticed is take people directly on the code, try to write the

962.16 -> code, execute the code and explain the concept just right there. It brings a more functionality

967.76 -> to the teaching pedagogy as well as it's much more easier to understand. And that's exactly what

972.4 -> we'll be following in this entire series. Instead of just putting you all in the theory of pen and

978.32 -> pencil, which is a good way again of teaching this stuff. But I'm a firm believer of taking you

983.04 -> onto the code editor as quickly as possible. Let's go ahead and work with that. So in this video,

987.76 -> I'll walk you through that how you can install TypeScript on your system and there are a couple of

991.28 -> ways how you do it. Now the way how we are going to start with the TypeScript and the way how we

995.68 -> use it in the projects are two different installation of the TypeScript. The first one is a global

1000.72 -> system installed that we're going to use. This will be helpful for you to understand the concepts

1005.44 -> of TypeScript. But when you're going to use TypeScript in a project, maybe react project or

1010.08 -> Angular project, they're an additional TypeScript config file is required so that you can address what

1015.52 -> kind of settings you want, what kind of things you don't want. So there will be a two different

1019.76 -> installation. First of all, we're going to focus just on the core system-wide installation so that

1024.8 -> you can create basic files, understand what is the new thing in the TypeScript, how you can understand

1029.12 -> it. And then we're going to later on move into the project section where we're going to see how we

1033.6 -> can config the TypeScript settings so that can help us to produce a better code. I hope that is

1038.88 -> all clear. For this, now let me take you on to my computer screen and walk you through with that.

1043.6 -> The first thing that we're going to do is obviously create a new folder and we're going to call

1046.96 -> this one as simply let's just call this one as TypeScript and why not TypeScript YouTube because

1055.2 -> that's what we're doing up here. Okay, so TypeScript YouTube is here. Inside this also, I would like to

1060 -> create a new folder and let's call this one as zero one. This is getting intro so let's call

1065.6 -> this one as zero one intro. So this is the folder. We're going to do everything up here. Now before

1070.72 -> that, we need to install TypeScript. So installation of the TypeScript is pretty super straight forward.

1077.36 -> Now let me walk you through with that. All you have to do is first open up your terminal and by the

1082.16 -> way, all these instructions are also mentioned on the TypeScript website. We are going to study that

1087.04 -> in a minute. Let me open that up. Just give me a second. So let me go ahead and open up the TypeScript.

1093.28 -> So here it is. Okay, so here it is. The TypeScript website officially and all the things are available

1099.68 -> here. And we can see that this is online where NPM, there are lots of ways how you can actually

1104.16 -> go ahead and install that. Let's go on to the download section and here it says that hey,

1108.88 -> you can install the TypeScript by saying NPM installed TypeScript. This is a way, but we won't

1114.16 -> be using this one. Rather, we'll be actually installing it globally so that we can use it wherever

1118.96 -> we like. Once we are done with that global installation, we have understood the basic concept,

1123.84 -> then in the project, we'll be using the same NPM installed TypeScript as a dev. I told you,

1128.24 -> this is a development tool. That's why it's usually installed as a dev dependency. So things will

1133.28 -> make much more sense as we move forward. So get that. It's pretty easy and same. And again,

1137.6 -> it's exactly same for Mac, Windows, Linux, whatever the system you're using. In case you are on

1142.24 -> Windows, I highly recommend to use GitBash, which is Vibera Shell or use PowerShell. So there's a

1148.72 -> shell available known as GitBash. For Windows, I highly recommend people to use this shell. It gives you

1154 -> the same command that I'm using like CD, LS and all Linux friendly commands. Again, nothing much

1159.12 -> to do, nothing a hard and fast requirement. Now, the very first thing that we need is nodes. So

1164.48 -> make sure there is a node installed in your system. If you just say node dash V, it should pop up

1169.68 -> some number. It doesn't really mean that exact same number should come up to you. Any number

1174.16 -> is fine. If it is giving us an error, then go ahead on to node website and install node. Pretty

1179.36 -> simple. Next, next, I agree. Click OK. All those kind of stuff should be OK. Node also gives us

1185.12 -> a utility of NPM. And we can check out what version of NPM node package manager is given to us.

1190.48 -> And we have to install that as well. Once we're done with this, then we have to simply go ahead and

1194.88 -> install the TypeScript. And for installation, it's pretty simple. NPM install and we're going to

1200.56 -> install TypeScript. That's all what we need. Now, this is what we need, but we want to install it

1205.84 -> globally so that we can use wherever and anywhere we like throughout the system. And that is why

1210.32 -> the dash G flag works. Now, this is going to work absolutely fine. In case you are on Windows,

1215.36 -> make sure you right click and open up your GitBash as an administrator. In case you are on Linux or

1220.24 -> Mac, make sure you append this with pseudo. In some cases, it is required. As soon as you hit pseudo,

1225.28 -> you need to enter a password and that's it. Let's go ahead and do this. This is going to ask a

1229.36 -> password. That's it. And mine is already installed. So, it didn't took much time, but this is all

1234.4 -> what we got. So now, TypeScript is available in our system. And if I just open up this one here,

1242.64 -> this actually gives us a unique command, which is TSC TypeScript. Now, there are a couple

1247.28 -> of other ways of installing it with node package executor and a whole bunch of other things.

1252.08 -> But the focus here is that it gives us an access to the command, which is TSC. This is the whole

1257.76 -> which is going to allow us to install, not install, but actually execute the TypeScript file.

1263.04 -> 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

1270.24 -> it gives me any number of version, that is totally fine. Throughout this course, we'll be focusing on

1275.12 -> the core foundation and fundamental of TypeScript. So, any version beyond this or even this version

1280.32 -> is absolutely fine. In case you're using any previous version, that is also absolutely fine.

1285.68 -> Nothing should be worried. These are core foundation. These are the things which never change

1290.16 -> in the language itself. All right. Pretty basic installation, but I have explained each line by

1295.2 -> line. I hope you appreciate that. If you appreciate that, make sure you hit that subscribe button.

1299.52 -> I have noticed that 70% of my audience doesn't do a subscribe button. So, go ahead and please hit that out.

1305.04 -> Okay. Now, this is all done. So, we have a new folder up here. Let's go ahead and fire up a

1310.24 -> VS code as well. So, we're going to go ahead and say VS code, Visual Studio code.

1315.68 -> Should be taking just a minute to get started. And this is what we have. This is a previous iOS

1320.72 -> dev version that is already installed. So, we're going to just remove this. Get started with the

1326.32 -> intro and there we go. Yes. Of course, I trust this. Okay. Now, in this intro, all we're going to do

1333.52 -> is write the very basic hello world, but in TypeScript, we'll be able to compile that into JavaScript

1338.4 -> so that we can see how that works. So, we're going to go ahead and call this one as intro.ts.

1345.84 -> And again, make sure you write this as TS. You can also write it TSX, but that's for a component

1351.28 -> level thing when we want to use or install JSX, execute JSX in the same file. If you didn't

1356.8 -> understand that, that's totally okay. Make sure you write.ts, which is an extension of TypeScript.

1362.24 -> Now, VS code will try to give you a.ts automatically as a TypeScript. In case you don't have that,

1367.52 -> go ahead and install some packages for icons and stuff. Pretty, there are plethora of icons available.

1373.04 -> You can go ahead and look for icons, material icon to what not. Everything is available.

1377.68 -> Now, all right. Now, let's go ahead and see that how we can actually write some of the code and

1383.84 -> convert them into JavaScript. So, the classic, let's go ahead and do a console log and let's go

1389.76 -> ahead and write name. Make sure you write your name. That would be fantastic one. This is a

1395.04 -> classic code of JavaScript that has nothing to do with the TypeScript at all. Let's go ahead and

1400.72 -> create a couple of variables. So, we're going to go ahead and say, let's call this one as number

1404.72 -> or let's go ahead and have a user. So, same example that we have talked through previously.

1410 -> 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

1415.52 -> that is going to be 10. Pretty good. And let's just say what more we have email. Well, let's just

1424.24 -> not put email. Let's just have this much only. And further down the road, we also want to have a

1429.76 -> console log of something. So, let's go ahead and remove this one and say we want to print out

1434.16 -> user.name. Now, this is a classic JavaScript. Nothing to do, classic TypeScript. Nothing to do

1440 -> with JavaScript. But this thing whole thing cannot be executed at all in the TypeScript format.

1446.96 -> If you put this into production or any application, it's not going to work. This is where your

1451.76 -> installation of TSEX or the TypeScript comes into the picture. So, what you can do is you can simply

1456.24 -> say TSE TypeScript. And once we have this TypeScript, then all we got to do is name the file. In this

1465.2 -> case, intro.ts. As soon as I hit this enter, notice this has automatically created an intro.js

1472.08 -> for me. And the code is exactly same. Yes, the spaces were removed and it tries to align it.

1478 -> This is all what TypeScript does. It converts your TypeScript into JavaScript, no matter what project

1482.88 -> you are using. This is the exact implementation of it. Now, the only advantages, as I told you,

1488 -> right now it's giving us a squiggly line that it says cannot really clear the blocks go

1492 -> variable and all of that. So, that's the basic. We'll go through with a more detail that it should

1497.36 -> be a let or it should be a const. Whatever it should be, why is it giving us errors and whole

1502.08 -> those details? We'll study about that in depth. The only advantage that we get is if I go ahead and

1507.12 -> do an email, it gives me a gain squiggly line that property email does not exist on Type.

1512 -> So, the whole idea behind TypeScript is it saves me from some errors which I will eventually fall

1517.84 -> into if I'm writing just code JavaScript. And again, I told you one more time. This is just a

1523.12 -> dev tool. This is a development tool, a wrapper around JavaScript to make your life easier and safer.

1529.12 -> Now, again, there is nothing which is stopping me to execute this code. If I go ahead and run this

1534 -> file again, this command again, notice it gives me an error, but still the code works. It says user.email.

1541.28 -> So, yes, there will be errors, but these errors doesn't stop you from producing your JavaScript as

1547.28 -> well. Again, there are a lot of settings for that as well. So, again, you get the idea how this is

1551.52 -> being done. One more thing I would like to mention here is on to the playground. So, if I go ahead and

1557.92 -> click on the playground on the TypeScript website, you will notice that there is a tab which says

1563.68 -> settings. Now, in the settings, you can see there is a lot of settings that are available for you.

1568.72 -> And on top of that, there is a TS config. This is the configuration file that we make while creating

1576.08 -> a React project or another project. In this, there are a lot of options that you want to include

1580.64 -> JSX or maybe you want to include the ES next module. What is your target? Maybe ES 2017, 2019, ES next,

1589.2 -> whatever your target. There's a lot of declaration, a lot of output formatting. How you want to make

1594.4 -> your code pretty fine? Do you want to have an error, not error, strict checking and all of that?

1600 -> Yes, we will understand them when we'll be creating our TS config file for the project,

1604.96 -> but I just wanted to give a brief overview that it does exist. And you can see a lot of example.

1609.68 -> One thing that I forgot to mention in the last video is the same thing that a lot of people believe

1614.56 -> that with the TypeScript, you write less line of code. And you can just click on example. And let's

1619.84 -> just say you want to have an example of built-in utility types. And you can see that these are so much

1624.96 -> of a line of code, but ultimately it generates only this much of a line of code. If you remove the

1629.84 -> comments, you can see this is the only code that we were able to generate in JavaScript. And we

1635.44 -> are writing so much in TypeScript. So yes, this is the case. We write a lot more code in TypeScript,

1639.68 -> but it's a safer code. Quite a lot, quite a lot in just one video. So that's it for this video.

1644.64 -> Let's catch up in the next one and try to get one by one the details and the nitty gritty of

1649.76 -> the TypeScript. Let's catch up in the next video. Hit that subscribe.

1653.52 -> Hey there, everyone. They share back again with another video and welcome to the TypeScript series.

1658.32 -> So in case you are new along from learning from me or in case you have watched other videos,

1662.48 -> then you probably know this. So whenever I start a series, I go slow in the very beginning. It might

1668 -> feel like it's too slow, but eventually I pick up the pace with the tutorial so that it's

1672.16 -> easier for everyone to follow. And we are exploring TypeScript and one more big thing.

1677.12 -> In all of my videos, I encourage a lot of people to learn from documentation. Surely you can just

1682.88 -> keep on watching my videos, but the ultimate knowledge that I can give you is how to read the

1687.44 -> documentation. So throughout the series, I'll walk you through that how you can read the documentation

1692.16 -> can better at the things so that you can learn things on your own. And we'll be also coding along

1697.28 -> with that. So this is going to be our very first official kind of hello world. And we're going to

1701.04 -> see what impact TypeScript can add when we write a simple hello world program. Nothing fancy,

1706.48 -> just getting started, very basics, very slowly. So let me talk you through and let me bring you up

1711.76 -> on my screen first. So let's first understand about the types. So as I've already mentioned,

1717.2 -> TypeScript is all about types and we're going to study a whole lot of types. So the obvious question

1722.88 -> is what are kind of types that are available in the TypeScript. And trust me, there are many,

1727.76 -> many of the types are available. For example, you'll be saying me talking about numbers and

1732.64 -> strings and Boolean, but these are not the only types. Yes, they can be divided into primitive

1737.2 -> type or the other types or modern types. I honestly say that don't do this kind of division

1742.56 -> between the categories and types. They are all just types and try to picture them through just one

1747.28 -> screen that all of them are just types. And just to name others, there are null, undefined and

1752.88 -> there is a special type known as wide. And there's also objects and arrays and tuples and couple

1759.04 -> of more types as well, which are available in the TypeScript language. And once you understand and

1764 -> master what are the types which are available and how to utilize them, that's all the TypeScript.

1768.4 -> That is all the TypeScript is all about. But what I have noticed in a lot of code basis that people

1773.2 -> use TypeScript, but a lot of time this keyword I have found floating around like here and there.

1778.4 -> If you're using any as a keyword, that means you are intentionally making your code more

1782.88 -> wonderful or more like a Java scriptish so that we don't have to worry about the types. If there

1788.24 -> are a situation where you're using any, that means you are not probably not many, not much sure

1793.76 -> that you should be either using it or not. And to surprise a lot of you, there is even a type

1798.96 -> known as never an unknown. Yes, these are a special type given to us by the TypeScript.

1804.4 -> And I would like to walk you through with this documentation. So this is a documentation which

1809.2 -> talks about the unknown and any and object and void and undefined. There's a lot of them.

1814.24 -> And if you look at the stable summary, this is an abstract row, what is allowed, what is not

1819.04 -> allowed and strict checking all of that. Now we'll come back onto this table and chart. We'll

1823.04 -> understand the meaning of it that how any impacts the code that you're writing or how unknown and

1828.4 -> object and void define all of this impact. This is your very first look of how to jump into the

1833.76 -> documentation. So instead of that, let me just click on the get started. And this is what it's

1838.56 -> saying TS for new program. Or in fact, if you go at the very top of it, you'll find the docs tab.

1843.36 -> The docs of the TypeScript and even all of the language are designed by different people. So they

1847.84 -> are very different for all of the other, but they follow some of the specification that this is what

1853.04 -> the guidelines I'll follow in the documentation. So this is the guideline that we'll be following

1857.36 -> through in this entire tutorial. And you can see there's a lot of cheat sheets and all these things

1861.44 -> like decorators, enums are available. We'll be going through with all of them. The first I want to

1866 -> bring your attention is just simply the basics, not the handbook, but the basics. So once you click

1871.2 -> on the basics, you can notice that there are things available. So if I click on everyday types,

1875.92 -> you can see there is a primitive type and a lot of tutorial goes through with that, which is good

1880.24 -> that there are strings and numbers and Boolean. But not only that, if you look a little bit lower

1885.28 -> down, there is array, there is any, which is notoriously known for not being used. And there is no

1892 -> implicit any, then we have a whole lot of functions and all of them. So JavaScript and TypeScript are

1897.52 -> closely related. We'll come back onto this one. All I want to you for this tutorial is just go

1902 -> through this. Don't read the example. Just go through how many types actually can you figure out

1905.92 -> and find out. So on this page, how many types or how many keywords you can find out just let's

1911.36 -> them in the comment section. That would be really helpful for other people who are coming in. So for

1915.36 -> example, we have object, we have union and a whole lot of things. Eventually, we'll be covering them

1919.36 -> up. Don't you worry on that part. Now, once you've gone through with the type, we will be writing

1924 -> some code in this tutorial. One thing more I would like to put a picture in your mind while

1928.48 -> learning the TypeScript. The first one is situation. So at what situation the TypeScript serves best,

1934.4 -> although you can design your variable or declare your variable any given time. But imagine to think

1939.04 -> that TypeScript is helping you out and figuring out what data is about to be processed or what

1944.56 -> data is about to be coming from any resource or what data your function is going to send out.

1949.36 -> So just to example, I have taken as a use case scenario here, a function accepts two number.

1954.56 -> Now, what happens in the regular JavaScript code is once a function accepts the number, then you

1959.68 -> check the type of these values. And you want to be make sure that these are actually number because

1964.8 -> I want to perform some operations on that. What TypeScript helps you out is you don't have to

1970.24 -> explicitly check that hey, if the function which is accepting and what is coming as a data,

1975.04 -> is it really number? Is it might be a string or it might be a void or nothing might be coming in?

1980.96 -> So TypeScript allows you to get away from the situation. So extra line of code that you don't

1985.6 -> have to write. The similar situation is a function returns a string. So obviously the situation that

1990.48 -> comes in the JavaScript that suppose you're using a function and you're expecting that the data

1995.2 -> coming out of that function is a string, but that not might be the case. Maybe some other programmer

2000.32 -> has written this and he might have thrown out a number and that could be a problematic situation.

2006.16 -> So when you're working with the team and you're using TypeScript, you are absolutely sure that

2010.72 -> from this function, I always expect that a string is going to come out and that's where when

2016.24 -> you're working with the team, the TypeScript actually makes a life a lot more easier. Yes, there are

2020.64 -> a lot of rules and protocols that we have to follow, but this helps us to actually not fall into

2025.6 -> a lot of such problems. So we're going to first walk through with the very basic syntax in this

2030.32 -> video. We'll be getting through a read through a couple of errors that we already are having and

2034.56 -> then we're going to slowly pick up the pace about reading the documentation and learning more

2038.8 -> about TypeScript. So the syntax is pretty simple. We use let const, whatever the keyword you want to

2044.24 -> use for declaring your variable, then you simply go ahead and use a variable name. After the

2049.04 -> variable name, you put a colon and define its type. Now all the types, almost all the types in

2054.16 -> TypeScript are lowercase. There is no uppercase, there is no camel casing, all lowercase, numbers,

2059.04 -> strings, whatever you want to name or put a data type on it, then all it's a lowercase.

2064.48 -> Then optionally, you can pass on a value or can just declare a variable. Let's go ahead and give

2068.72 -> it a try by writing some of the code because I still believe that writing the code makes much,

2073.44 -> much more easier things. And also we can see there is some squiggly line already in my code which

2078.32 -> is not looking good. So we need to learn how we can actually get rid of this error temporarily.

2082.8 -> And then later on, once we're going to learn about the TypeScript config, it will help us to

2087.12 -> understand it more. So again, have patience. Okay. So let's go ahead and close this out because I'm

2092.64 -> not interested in this one. So intro.ts, nope, not interested. Let's go ahead and create another

2097.44 -> file and let's just call this as variables me.ts. And again, this me is just a fancy word. So don't

2105.68 -> you worry on that. So let's go ahead and declare a simple variable name that just says hello world.

2111.44 -> So let's just go ahead and say, hey, I want to have a let and let's call this one as greetings.

2116.72 -> And in the greetings, we're going to put up a colon and then we're going to write a simple string.

2121.76 -> And then once I go ahead and do this, I'll optionally pass on a value. Now this alone is a good

2126.4 -> statement. There is nothing wrong in it. You have created a variable and you have defined that

2130.4 -> only string type of value can come into it. But optionally, we can also go ahead and put up

2134.96 -> some value in it. So go ahead and write your name. So I'm going to write mine here. Go ahead and

2139.12 -> write yours. Once I go ahead and do this, I want to do a simple console log. I can go ahead and

2144.8 -> simply say, hey, I want to have a greeting just like that greetings. Save this and this works

2150.48 -> absolutely fine in this case. Now, let me walk you through that this is all good. And we can just

2155.68 -> go ahead and use a TSC syntax for this. So TSC and this one is variables.tsme. It is obviously

2163.84 -> going to generate a TSC code. This is all good. And notice here, it doesn't change anything.

2169.04 -> Also, it gives us a squiggly line which says cannot really clear blocks of variable greetings.

2173.68 -> What this all is about? We will have a dedicated video on it. Right now to just get rid of this error,

2178.72 -> we're going to go ahead and say exports, then a colon and that's it. This is going to remove the

2183.28 -> error temporarily and will give us a piece of mine that, hey, don't worry about these squiggly

2187.44 -> lines. But I promise you, we'll come back onto this one later on. Right now, this is all good.

2192.24 -> Now, this alone statement of putting a colon is really, really fundamental to this one.

2197.52 -> You click on greeting and notice it says that the greetings is a string. This is a piece of mind

2202.64 -> that yes, I'm declaring a variable which always, no matter what happens, is always going to accept

2207.28 -> the string. Later on, some other programmer who is working on the same project gets this variable

2212 -> and tried to assign it a number as six. This automatically stops me and saves me an error that, hey,

2217.6 -> the type number is not assignable to type string because it's a number. You cannot do this.

2222.96 -> If anybody tries to declare, let's just say a true value into it, it says, hey, that's also not

2227.28 -> allowed. You should not be doing it. That is what the safety that type script actually gives you.

2232.56 -> Not only that, if I go ahead and remove this and if I try to put up a dot, you can see all the

2237.6 -> methods that are being suggested to me like pad ends and all of that. These are string methods.

2242.88 -> These are not methods which are meant for number. For example, let's just go ahead and declare another

2248.32 -> variable up here which actually gets a number. So let's just call this one as my num and that number

2254.48 -> is four or six, whatever that is. And I go back up here and I say, hey, I want to use my num dot

2261.44 -> and I'm going to use two upper case. You cannot do it. Accidentally, this might happen not from you

2268.8 -> maybe, but from person who is using your code base and is collaborating with you on the code.

2273.6 -> It says that, hey, property two upper case does not exist on type number. Not only that, it also

2279.44 -> allows you to have more safety. For example, there is a greeting and I know that two upper case

2284 -> or two lower case exist in this one and I can go ahead and run this one, but accidentally maybe

2288.8 -> I'm not using suggestion. Maybe I'm using way more other co-rater and I might have done this

2293.52 -> lower case and I can tell you I have done this. I have done this. A lot of typos in the past,

2298.48 -> but typescript actually allows me to give a suggestion that, hey, property two lower case does

2302.64 -> not exist. Did you mean two lower case? It also helps me to get my indefin method and as you train

2309.36 -> it more, it actually gets suggestions from your own code base as well. So that is really,

2314.24 -> really impressive and amazing. So far, we have gone through with the very basic. We'll take it slow

2319.04 -> and steadily. So right now, all you have to learn is colon and a string. That's how you should

2323.76 -> be declaring the variable. Now, eventually in the later on videos, you will realize that sometimes

2327.68 -> we don't even need to just use this colon. It automatically infers the value and stops you doing

2332.72 -> mischievous, like adding a later on number to the greetings. We will work through in that.

2337.52 -> But right now, this is all. You have gone through with your very first idea of how

2341.44 -> a TypeScript works, a little bit intro to the documentation, some assignment that you have to do

2345.6 -> in the comments section. And I'll catch you up in the next video where we'll explore a little bit

2349.44 -> more in depth of TypeScript. Let's catch up in the next one. And one more important thing,

2354.16 -> very, very important thing. You guys forgot to hit that subscribe button. Go ahead and do that.

2358.32 -> I would be really thankful for that. Let's catch up in the next one.

2361.52 -> Hey there, everyone. I'm face share back again with another video and welcome to the TypeScript

2365.52 -> series. Now, through this series, I'd not only want to talk you through that how to write TypeScript,

2369.92 -> but I also want to get all the best practices that you should be using while using the TypeScript.

2375.44 -> So we'll be jumping through the documentation. We'll guide you briefly about what is there in it.

2380.16 -> And this video is not going to be too much intense. We'll just talk about numbers and

2384.64 -> bullions. We have already talked briefly about the string. And then I'll talk about the type

2388.88 -> inference, which is mostly should be used, but it is less being used. So let me walk you through

2393.92 -> with that. So here we are on to the documentation page. And as we scroll up here a little bit,

2398.72 -> we see that the primitive types that we're discussing, the string which we have already covered,

2402.8 -> and the rest two are numbers and bullions. So we need to cover them up. Now, these are mostly

2407.28 -> used as primitive types and string represent the values like this and then the numbers.

2411.36 -> Now, interesting thing here, which you should get from the documentation directly, not from any

2415.52 -> YouTuber or from any blog article, but rather from the documentation directly. The JavaScript does

2421.52 -> not have special runtime value for integers. So there is no equivalent of int and float. And this

2426.16 -> is usually a lot of time and interview question as well. Do how do we define especially the

2430.96 -> integers or float in typescript? We don't. We just call them numbers and that's how it is being

2435.44 -> defined. And that's how the value is inferred. I'll come back onto the inferred part a little bit.

2440.64 -> So let's write some code and take some example out of it so that we can understand more part of it.

2445.12 -> Now, we don't need to create a simple new file for this one because this is already very simple

2449.6 -> and there is nothing much we are doing. Let me just remove this part that we don't need and we'll

2454.16 -> just go up here. So the two things that we are going to talk about, the first one being simply

2458.72 -> number. And remember, there is again, there is a little bit more to it. Let me walk you through with

2463.52 -> the simple example of the typescript. Remember, this is being called as that we have this number,

2469.68 -> not numbers. There is a special question around it in most of the interviews. Remember,

2474.72 -> this is a number. Now, how do we define number? It's pretty simple. Let's just say we are defining

2479.52 -> a user ID. So this is going to be a simple user ID. And that ID simply can be let's just say

2486.24 -> 3, 3, 4, 4, 6, 6. So this is what we have. In the case of numbers, we're going to go ahead and

2491.28 -> put an annotation here, colon and then space and then number. This depicts or this annotates that

2498 -> this user ID is number and should always be number. Now, advantage that we get with that is simply

2503.84 -> when I say user ID and I put up a dot, all the values or all the methods that are available in

2509.36 -> JavaScript related to numbers, only those values or those methods are being fetched to me.

2515.04 -> So for example, to exponential, to fix, locale string, all these things, there's nothing much

2520 -> on the numbers in JavaScript. And that's why only these values and numbers are being used.

2524.48 -> That's the basic. That's the number. And again, it doesn't really matter if you just add a 0.2

2528.8 -> 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

2534.4 -> much of in depth about the numbers. Yes, we'll go through in that later on. Now, apart from this,

2539.2 -> there is also a Boolean that we have to use. Now, let's just say, for example, you're using some

2545.2 -> values. Let's just say is logged in. So that is something you want to track. And let's just say

2550.08 -> user is not logged in. So that is how it goes on false. And then there is something known as Boolean

2555.84 -> that we have to infer. Now, obviously, you get all the values and methods that are there for the

2560.72 -> Boolean. So later on, if I go ahead and say is logged in, I put up a dot, then we don't have

2566 -> much on the Boolean. It's just the value of what is the value of this particular variable,

2571.36 -> true or false. That's all the methods that we have. Now, here I want to bring your attention to

2576.32 -> something known as type inference. Now, a lot of people, when they get started with TypeScript,

2581.04 -> they are very much excited about putting up annotation with every single thing numbers and strings

2586 -> and Boolean. But here, what is we are doing as not so good practice? What we are doing here is

2591.76 -> we're making it too obvious. This is a numbers and just after that, we are putting up an equal

2596.56 -> sign and putting it as a number. Now, this is too obvious to do. Now, obviously, there is another

2601.36 -> way of doing and dealing with that thing is, for example, maybe you are not dealing it like that

2606 -> and maybe in the very next line, you put up and say that, hey, now user ID is going to get a value.

2611.44 -> Let's just say it's some value and a decimal value. This is still not a good practice because you

2616.64 -> are doing too obvious thing and you are trying to overuse your TypeScript. Don't do that. This is not

2621.6 -> a good practice at all. There are some places where these values or these annotation can be avoided.

2627.68 -> You can just simply avoid to have a type. For example, in this case, just a previous case,

2632.64 -> where we were having this equal sign. Now, in this case, whenever I use number, let's just say I go

2637.92 -> ahead and say number and I use a dot, not number actually, my bad, the user ID and then I use a dot,

2646 -> 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,

2651.44 -> it's obviously telling me that it's a number and whenever you are actually defining any number

2656.48 -> and you are just immediately assigning a value it, TypeScript is smart. TypeScript can actually

2661.6 -> infer that you are actually trying to put a number in it and you don't need to do this. But hey,

2666.64 -> what's the point? We were obviously doing the same thing in the JavaScript as well. But no,

2670.8 -> my friend, there is a difference with it. Here, TypeScript is smart enough to automatically detect

2675.76 -> that you want to place a number in it. So, that's why the value automatically is going to be assigned.

2680.24 -> So, it is too redundant to just write a type infer on it and don't you worry, there will be future

2686.32 -> videos where I'll walk you through where this is compulsory that you should be using it as a good

2690.32 -> practice and where things where you can actually avoid it. So, in this case, this I prefer as a

2695.68 -> better code compared to anything else like put up a colon because it is too obvious. Maybe you want

2700.96 -> to have too much safety, have it, no problem at all. But in this case, TypeScript is already smart

2706 -> enough. It will still detect that it's a number and if you try to do something which is not really

2710.48 -> great, something like you try to assign a value, it will still give you some errors that hey,

2715.04 -> you're doing something that you shouldn't be doing. It is a type of string. It is a type of number

2719.36 -> which I already deduced and you're trying to assign a string onto it. So, yes, all these values

2724.4 -> still come up it. So, remember, in order to write better code, it's not just always you follow these

2729.84 -> columns. And I see a lot of people just follow these columns and these types just in the start of

2735.28 -> the file that hey, everything should be named in file. No, this is not how TypeScript work and this

2739.2 -> is not the good practice of the TypeScript that should be worked. TypeScript is a little bit more

2744.4 -> of a complex subject and that's exactly why we are exploring this one up here. Now again, you now

2749.44 -> you understand about the type inference that just that TypeScript is smart enough to get all the

2753.92 -> values and if you're just assigning immediately, yes, this is still a TypeScript, you don't need to

2758.4 -> put column every here and there in the entire TypeScript file. And in order to get output of that,

2763.44 -> we can simply go ahead up here and simply say TSC variables dot TSC variables me dot TS and this

2771.6 -> still will guess get us all the values. Remember again, the syntax of colon Boolean is a TypeScript

2778.88 -> syntax. So, whenever a JavaScript compile file is going to come in, it's never going to be a colon

2784 -> or the value. I hope you get the idea. I hope you got the best practice as well that you shouldn't

2788.64 -> be doing too much obvious thing. Yes, there is a special place where you put columns and the type

2793.44 -> of it. I'll walk you through with that. So, now that we have gone through a little bit with the

2797.04 -> dark invitation along with me, let's go ahead and explore TypeScript a little bit more. In the next

2801.28 -> video, I hope you have already subscribed. Doesn't feel like really good to again and again asking,

2806.64 -> but hey, 70% of you is not subscribed. So, go ahead, hit that subscribe and let's catch up

2811.68 -> in the next video. Hey there, everyone. I'm Ataish here back again with another video and welcome

2816.08 -> to the TypeScript series. Now, before we move ahead in this video, hit that subscribe because 70%

2821.6 -> of audience is not subscribed. Anyways, let's move into the any keyword. Now, this is mostly the

2828.08 -> usual keyword which people use to get away from the syntax of TypeScript. I've seen many people

2832.88 -> using TypeScript, but still exhaustively using any. This is not a good practice and I'll walk you

2838.32 -> through from the documentation that it has written there. It is not a good practice. First,

2843.36 -> let me give you a brief scenario overview that where people actually use it and where you shouldn't

2848.24 -> be using it. So, let's just say you're trying to declare a variable and you don't know what to

2852.8 -> place inside this variable. So, you just call it as hero right now. You have no idea right now that

2857.44 -> this variable is eventually going to turn into a string or a boolean or anything as a matter of

2862.08 -> fact. What you do after some time, you declare a simple function which calls it as simply get hero

2868 -> and this get hero just returns you a hero. So, let's just say a hero is being returned as a

2872.72 -> thaw. Now, later on, you decide that hey, I want to have this hero and this hero will get the values

2878.64 -> from by calling this method as get hero and we run this method. Now, if we go ahead and simply

2884.8 -> hover over this value, we can see that this is being inferred as any which is really a bad case.

2890.56 -> You really want to avoid these cases. Now, right now, this TypeScript file has no idea what to

2896.32 -> infer the value and I'll walk you through the documentation that the official documentation says

2901.44 -> that when in such situation where TypeScript cannot find out that what value is going to come up

2906.4 -> later on in the future, it puts that as any which is a kind of a getaway from doing the things and

2912.08 -> that is exactly happening up here that it is just saying that hey, this is any it could be this could

2918.24 -> be a simple string right now. Still, it is any but there is nothing which is stopping me to return

2923.44 -> a true and this is still accepting the value which is not really good case. Maybe just imagine

2928.64 -> you have declared these values and you are getting these values but there is another developer who is

2932.96 -> working on the API call and instead of just giving you a string based on which your entirety of

2937.76 -> a program is dependent, yes, it's returned you a true or maybe just a status code. This is not good.

2944 -> This actually breaks the consistency of the code. So, in this case, we have this a string.

2948.4 -> So, the ideal case would be remember in the earlier time I told you that in the earlier case,

2953.12 -> in such scenario, the automatic inference of the values like string and Boolean is not good.

2959.04 -> In these special scenario, I would love to have the simple string that hey, now please infer

2963.6 -> the value as a string. So, whenever the values are going to come, whether through an API call or

2968.56 -> whatever you are doing, it should always be inferred as string. Now, if I go ahead and another

2973.52 -> programmer who is writing this, now if it goes as and says true, automatically you get an error that

2978.48 -> hey, it was supposed to be a string but now it is being returned as a Boolean which is not good.

2983.76 -> So, you shouldn't be doing that. Now, let me walk you through with the documentation

2987.44 -> because that is the most important part of this video. So, here's the documentation and you can

2992.08 -> see the documentation. There is any and there is also no implicit any. Yes, the any actually

2998.48 -> is a gateway and it tells you that any can have actually anything at all that you want to have.

3003.6 -> So, that whenever you don't want a particular value to cause the type checking. So,

3007.6 -> that's when you use any. Now, notice this very carefully. Any is not a special type that you are

3013.6 -> assigning. It's not a string, it's not a Boolean. Any is simply a marker in the TypeScript

3018.4 -> which just simply says that hey, I don't want to do the type checking for it. Basically, turn off the

3023.28 -> type checking for that particular value. You don't want that otherwise while you're using TypeScript.

3028.08 -> The most important line is just here. You usually want to avoid this because any isn't type checked.

3035.28 -> Use the compiler flag. No implicit any to flag any implicit any as an error. So, one more thing we

3042.4 -> have learned that there is a setting in the tsh config file that we can go for no implicit any

3047.84 -> that will allow us to not fall into such thing which is any. So, I hope this video gives you a

3052.24 -> clarity about when to use any, when not to use any. Yes, there might be one or two cases but really

3057.44 -> you don't want to use any in any of your code. It is not a good practice. You are avoiding all the

3062.64 -> strictness that TypeScript brings to your code. So, I hope this video has given you a clarity about

3067.44 -> any but the most important another thing here is the function shouldn't be defined like this.

3072 -> The function should have more value. So, the stricter check or definition that hey, you cannot

3076.4 -> return a Boolean value. You should always be returning a string value. So, from the next video

3082.08 -> onwards, we're going to study about how functions are defined using TypeScript. Let's go ahead and

3086.16 -> catch up in the next video. Till then, hit that subscribe and I'll catch you up in the next one.

3090.96 -> Hey there, everyone. I'll be back again with another video and welcome to the TypeScript series.

3095.76 -> I'm pretty sure that you have already heard about the functions either in JavaScript or TypeScript

3101.04 -> but I'm pretty sure that a lot of you don't know what should be the mindset behind using the

3105.36 -> functions in the TypeScript. There are a couple of ways that should always be running in your mind

3109.92 -> and don't worry, we will not be dragging this topic around for thousand videos. There will be

3114.32 -> just two videos. This one and the next one and we'll be covering end-to-end functions in that.

3118.24 -> So, after watching these two videos, you'll be all comfortable with handling any types of functions

3123.04 -> in TypeScript. So, let's get started. I've created a new file up here which is saying simple console

3127.76 -> log and let's go ahead and try to create a function. We'll be creating basically three or four

3132 -> functions which will give you eventually the whole idea and the picture and scenario which you

3136.08 -> should be worried about. First of all, it's really clear that first function that I want, the

3140.72 -> goal behind it is I want to add a two value to it. So, obviously, I should be taking input as a

3146.08 -> simple number and let's go ahead and try this out. So, let's just say if I go ahead and say,

3149.84 -> hey, I want to add two. So, I'll be taking input as number and that's pretty much it.

3154.8 -> And at the time of returning it, I'm going to go ahead and say, hey, whatever the number you are

3158.88 -> taking, just go ahead and add two to it. Pretty simple. Nothing wrong in that. Now, if I go ahead and

3165.12 -> work on with that, if I go ahead and try to add two this, I can go ahead and say, hey, I want to

3169.52 -> add two to the value five. Nothing wrong in it? Absolutely, they say. But here comes the problem.

3175.6 -> The problem in the TypeScript. The problem which comes up in the TypeScript and by the way,

3179.68 -> please excuse my system. It has been heavily loaded for the life classes and a whole lot of

3184.08 -> other things. So, it might run a little bit slow. So, we have to wait a little bit to see the

3188.08 -> errors. The notice here, the first important thing is in this add to function, if I hover this,

3193.36 -> we see any and any is a problem in TypeScript. Whenever there is an inference of what should be the

3199.84 -> data type, it is usually good in the case of variables, but in the case of functions, not so good.

3205.84 -> So, in this case, notice here the function add to accept a number which is any, which is problematic.

3212.56 -> The reason why it is problematic is because I can simply go ahead and come to here number and

3216.72 -> can I simply go ahead and assign values like two upper case, which I shouldn't be allowed to do,

3223.36 -> and right now I'm allowed to do so. And even if I run this file because my system is a little

3227.84 -> bit slow today. So, if I go ahead and run this one, I'm allowed to do so. Although this is creating

3232.96 -> a problem that hey, this is a duplicate function. So, obviously, this is the error we will talk about

3237.6 -> later on. Right now, let's go ahead and export this, save this and there we go. So, I can run this

3242.64 -> code again and this produces a fine JavaScript, no problem at all, but I shouldn't be allowed to

3248.16 -> do this because if I just go ahead and convert this to into an upper case that becomes a string,

3253.2 -> not a good idea. So, that is one problem that I'm facing. Another problem that I'm facing is if I

3258.16 -> go ahead and convert this file like this, it still works. Shouldn't be working there. The whole idea

3263.28 -> of the TypeScript is to have a stricter type so that we make less mistake and the fellow

3267.76 -> coder who are working with us makes less mistake. So, in this case, let's go ahead and work on and

3272.32 -> try to fix that. Now, the fix is really easy. I can go ahead up here and can say that hey,

3276.88 -> whatever the value you are going for, make sure that the value that comes to you is always going

3281.04 -> to be the number. Now, automatically TypeScript is giving me a problem that hey, hey, whatever you're

3285.92 -> trying to do, this is not good, this is not allowed. So, please don't do this, always pass on a

3291.36 -> number to us and now this kind of a five in the strings is not allowed and go ahead and stop that.

3296.64 -> Now, since you have written the function definition with the number being accepted like that,

3300.96 -> I cannot do mischief things like I can go, I cannot go ahead and say hey, you cannot go ahead and

3306 -> say hey to uppercase and go like this. Now, no, you are not allowed to do. Whoever is the creator of

3312.96 -> this function or designer of the function in your entire group has said that this function needs to

3317.6 -> take input as a number. So, that is why we are 100% sure that when we add two to it, it is possible

3323.6 -> in operation. We don't need to do extra check. We don't need to run the conditional that hey,

3327.68 -> if the number is number then go ahead and do it. Otherwise, return an error message that hey,

3332.88 -> please pass on the number. No, you are not not supposed to do all of that. So, this is all good.

3337.36 -> Okay. This is the basics of it. Let's try to wrap this up with one more type of a thing. So,

3342.16 -> another thing, another function that I want to have is a really a simple method in which I want to

3348 -> just have some strings. So, let's go ahead and have this one. So, let's just say you are you were not

3352.96 -> aware about the two uppercase methods. So, you want to just go ahead and say I want to have a

3357.28 -> function which says get upper. So, what it does is convert any string into uppercase values.

3362.8 -> Similar to that, you go ahead and say, hey, give me a value. I go up here and say, hey, I want to

3367.36 -> return whatever the value you get. I'm going to go ahead and put a two uppercase onto this one,

3372.72 -> two uppercase. Now, again, I got no suggestion. First of all, that is bad. Probably my compiler is

3378.8 -> slow. That could be an acceptable case. But here in this case, since this value, if I go ahead and

3383.76 -> look onto this one, this is any, any is again wrong. And if I go ahead and say, hey, let's just say

3389.52 -> get upper. I go up here and say, hey, this upper is going to get a value, something like this.

3394.72 -> Obviously, this is problematic here. Right now, squiggly lines are there. It is telling me, hey,

3398.4 -> dude, you're doing wrong. You need to pass on one compulsory argument. So, I can go ahead and pass

3402.8 -> on four. It's happy. And you know why it is happy. It shouldn't be happy. It should be mad at us.

3408.64 -> Because the value should always be string. So in this case, the type annotation is really,

3413.68 -> really strong. I told you in earlier videos, in the case of variables, it's optional. It infers

3418.08 -> the type pretty nicely. So there is no problem. In the case of function, it is really compulsory.

3422.48 -> Let's go ahead and move on. And now it gives me a problem that, hey, dude, whatever you are doing

3426.16 -> with four, no, you shouldn't be doing that. In case you want to convert this in upper case,

3430.88 -> either pass me on four like this. That is acceptable. That is doable or just pass on like this.

3435.68 -> That is also doable. That is how you're using. I'll convert that. Okay. Moving on quickly and

3440.72 -> fastly. Don't want to drag down the tutorial. Okay. Let's just say I create another function,

3445.76 -> 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

3451.68 -> sign up the user. Now, for this one particular one, I'll just define the definition like this.

3456.96 -> And I want to have a couple of more parameters in this case. At the time of sign up of the user,

3461.76 -> let's just say I'm going to ask him for the name and I'm going to go ahead and ask him for

3466 -> email and I'm going to ask him for password. Pretty common thing. You have seen this thousand time.

3471.04 -> Now, what this is particularly bad in this case because I can simply go ahead and say, hey,

3475.92 -> I'm going to go ahead and have a user sign up. If I go ahead and go like this,

3480 -> obviously it complains that, hey, there are squiggly lines. So that means you have to pass on.

3484.56 -> But all of these, these are marked again as any. Although there are three parameters this time,

3488.8 -> but they are being marked as any. So I can go ahead and say, hey, one, two, three. You should be

3493.36 -> all happy because it's any and that defeats the purpose of having a TypeScript. So in these cases,

3499.12 -> also individually and this is the syntax. How you do it? This one is a string and this one is also

3505.76 -> going to be a string. And since everybody is a string, let's change this one. So this is going

3511.12 -> to be is paid. So just to have a flavor of it, this is going to be a Boolean. So in this case,

3516.24 -> we are going to go ahead and have a Boolean value. Pretty simple, pretty easy. So this is. Now,

3520.48 -> right now in our function body, there is nothing in it, but you get the idea. You have watched the

3524.24 -> JavaScript, the code part and everything. You can write that. This is a series more about focusing

3528.64 -> on the TypeScript. So now we see the squiggly line complaint, but other guys are not complaining.

3533.2 -> And this is the one thing I absolutely like about the TypeScript. So fix one that are at the time.

3537.76 -> This is updated in the recent version of it. So I go ahead and say, hey, you need name. I'm

3541.76 -> going to go ahead and give you a name, probably my name and say, hey, this is also incorrect. It

3547.52 -> argument is number, but it shouldn't be a string. So let me go ahead and change this one. So

3551.68 -> 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

3558.72 -> paid user? Nope, it is freebie. So there we go. Now it is all good and okay. Now one more thing

3564.4 -> that I want to cover in this video quickly is another method. And then I'll tell you about the

3569.28 -> problem. So let's go ahead and actually use different kind of function this time and error

3574 -> function. So let's just say we're going to have a simply let and this time log in user. And we

3580.64 -> can just go ahead and use the error function. The definition remains same. So I won't be writing

3584.48 -> anything inside the curly braces, but the value which we are worried about is how to take the

3588.8 -> input. Let's just try to have simply email and is paid. Let's just say these are the things. So

3594.64 -> I'm going to go ahead and worry about email. Probably in name also. Let's just say name, email.

3601.12 -> And again is paid. We are using same parameters. Now this is good. This is good. There is no problem

3607.6 -> here. But let's just say I only want to pass on two values. Obviously these kinds of cases will

3612.48 -> come up here. So in the name I can go ahead and say, hey, this is going to be a string. The email

3616.96 -> is going to be a simple string. And the paid is going to be a simple Boolean. But once in

3623.2 -> text that might confuse you, how can I pass on default values? Let's just say in the case of

3627.52 -> log in user, I want to use this and I want to simply pass on just two things. Maybe name and email.

3633.36 -> 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

3641.04 -> domain. But I don't want to pass on other values. Now when I save this one, notice here log in

3647.92 -> user, it is not giving me any complaints as of now. Let me go ahead and try to run this one.

3654.56 -> And there we go. I told you, my system is little slow today. But just giving the idea that yes,

3659.36 -> this is paid is a compulsory thing. It needs to be there. And one way you can have an avoidance

3665.04 -> of this one is simply by providing a default value. The syntax goes. First you annotate it,

3670.24 -> colon and then the data type. And then you simply go ahead and say, hey, this is going to be a false

3674.24 -> by default. And now the system is happy. Not because it is slow. It is truly happy. I can go ahead

3679.76 -> and run the code. And I can see that, hey, this was all okay. And this is the brief overview of

3685.44 -> it. And yes, it generates the equivalent of the same exact, almost same code. But notice here,

3690.88 -> some code was generated a little bit more in the log in user. This is the most important part

3694.96 -> where we should be focusing a little bit. Now, obviously, this is generating us bar as a keyword.

3699.44 -> We can update the TS config and learn about that later on. Please ignore that as a moment.

3704.48 -> And right now, we can see that there is a name, email and is paid. And we are looking for a

3708.24 -> conditional check. If is paid is void, then it is zero. Otherwise, false, you get the idea.

3714 -> TypeScript helps us to write a little bit of a cleaner code as a stricter code in that case. So

3719.6 -> this is all about it. But one thing still is remaining, which is, hey, if you look at this example,

3725.04 -> closely, add two is a number that is great and fine. And maybe we are holding that value and

3730.48 -> further doing an operation. So for example, let my value that is going to be holding by add two.

3737.36 -> And I'm expecting that the value is going to be added to two. So seven value. But what instead of

3744.08 -> this, I go ahead and return not just like that. So let me just comment this out. And I go

3749.84 -> ahead and return a simple something like, hello, nobody's stopping me doing that. So we need to learn

3755.28 -> that, okay, this is completely stored and completely fine. And yes, my system is not

3759.68 -> slow. This actually is allowed right now. So we need to worry about one more thing about the

3764.16 -> functions, which is, how can I return more accurate value? And that's going to be coming up

3769.12 -> into the part two of the TypeScript function. Go ahead and hit that subscribe button. I'll catch

3774 -> you up in the next video. Hey there, everyone. It's here. Back again, the other video. And welcome

3779.04 -> to the TypeScript series. So in this series, we have already discussed a tiny bit about the functions

3783.52 -> in the last video. And as I promised, this is going to be the final video on the promises. And

3788 -> you will have enough of the knowledge of how to handle functions. Now the TypeScript revolves

3792.48 -> all around the types and you will be learning a lot about the types as we go further. It's not like

3796.96 -> just these are the primitive types. These are the types. That's all you go ahead and do with that.

3801.2 -> It's more about the philosophy of how you use the types where it is necessary, where you can avoid

3805.76 -> them and all of that. That is what we are going through with this series. Remember, TypeScript

3810.16 -> is just a superset or a wrapper around the JavaScript that allows you to write better JavaScript.

3815.2 -> So I hope you have watched the entire series or playlist. And in case you haven't yet,

3819.44 -> go ahead and hit that subscribe button. And let's go ahead and get started with that.

3822.8 -> So taking you again on to my computer screen. So this is what we have done in the last video.

3827.12 -> Now while discussing all of this in the last video, we noticed that we were returning instead of

3832 -> a number just by adding to it, we were returning hello. And this was not giving me any problem at all.

3837.12 -> And this is a point of concern for me. Especially try to always imagine whenever you're learning

3842 -> TypeScript, always imagine that this is not just you who is writing the code. This is a team of 20 or

3847.12 -> maybe 30 developers who is writing the entirety of the code. You have defined some function. Maybe

3851.84 -> somebody wants to add his own functionality of the function. And now if he's going to do such things

3856.24 -> like return hello, obviously this will break your entire application because there are probably

3860.56 -> 1000 use cases of this simple method, which are dependent of returning a number to it. But since

3866.72 -> you changed that and you're returning a string, that can crash your entire application. That is

3871.12 -> a little bit debug to handle the things in 20 or 30 or maybe 40 developers of a team.

3876.24 -> So that is why TypeScript is being used in the function. So obviously this is making a problem,

3880.24 -> but TypeScript is not giving me any error or at all. So that is why we have learned about that

3885.2 -> at the time of taking the input, we can annotate it with by whatever the type you want to accept. And

3889.6 -> similarly, you can just put a column and can say that, Hey, this is add to this is supposed to

3894.16 -> return me a number. Now, as soon as I do this, this will allow me to not do such things, which is

3899.28 -> just a mischief activity that, Hey, instead of returning a number, why are you returning as simple

3904.4 -> hello, which is a string? You shouldn't be doing that. So I can comment this out and I can remove

3908.4 -> this comment and can say that this is happier now, much more happier. This saves me time of time

3914.16 -> and my team's time to make right and right productive code and make better softwares. Okay. Moving on,

3920.64 -> let me talk and discuss a little bit more about the functions and then we'll redirect you onto

3925.04 -> the documentation to understand that yes, there can be more with the functions, but this much of

3929.6 -> the knowledge is enough. Good enough. Okay. Moving on. So let's just say first and foremost,

3934.96 -> let's talk about some of the functions which are going to be like this and again, we'll talk about

3939.52 -> them a little bit later on right now. Just want to give you a brief overview of this. So for example,

3943.84 -> let's just say there is a simple function which says get value. There is nothing wrong in it.

3948.16 -> And in this one, you simply say, Hey, give me my valve just like this and this could be anything.

3953.76 -> Number string doesn't really matter. Let's take our example with the number itself.

3958.24 -> Now, you're doing some conditional check maybe just with the if condition, something like this.

3963.52 -> If my valve is greater than five, then I would like to simply go ahead and say, Hey, I would love

3969.68 -> to return something like true. Maybe there's a use case scenario for you in this one. Otherwise,

3975.2 -> if that's not the case, you're going to go ahead and say, Hey, return a status code. Maybe you're

3979.52 -> building a web application which says 200. Okay. Now, in this case, obviously, our first theory is

3984.48 -> not really applicable because if we go ahead, right now, you can see if you get over on the

3988.56 -> this one, this says, Hey, this is giving some hint that it can be either a true or can be a string,

3993.52 -> but we are not implicitly mention explicitly mentioning that it can be as simple. Let's just say if I

4000.32 -> do head and string, then this gives me a problem. If I go ahead and say, Hey, this is a Boolean,

4004.88 -> then this gives me a problem. So we haven't yet learned about the type where we can return more than

4009.68 -> one type. Just want to give you a brief overview that these kinds of scenarios will happen. These

4014.48 -> are part of functions, but we have to learn a little bit more about TypeScript in order to handle

4018.56 -> these situations. Not really complex. It's just a union type and we'll discuss on that in a separate

4023.12 -> video. So just giving you that yes, this could happen. This is one of the case. Okay. Moving on,

4029.28 -> there are a couple of more things that you can do. For example, let me take another example so that

4033.28 -> you can take these code files in note one. So let's just say there is simply a hello and this is a

4038.56 -> simple method or let's just use a arrow function method because I think you would also love to know

4044.48 -> that if here we can put up a colon and number, what is the syntax of doing the same thing in the

4050.56 -> arrow functions as well? So this is how our basic arrow function works. We have written that

4054.08 -> many time. So inside here, we take all the parameters, like for example, you want to take a string

4058.96 -> as parameter, you can do that. Just after these parentheses, you can put up these colon and can say,

4063.92 -> Hey, I'll return a best string as well. Now, as soon as I do this, this actually gives me a problem

4068.8 -> that hey, functions whose declare type is neither void, not any must return a value. So this is

4074 -> giving me a problem that hey, you're not returning me a value. So your code is actually wrong. So in this

4078.88 -> case, if I go ahead and return even an empty string, this is just working out. So this is the basics

4084.32 -> of how you do it in an arrow function. I hope you are getting this. I hope you are enjoying this.

4088.72 -> If you have hit that subscribe and a like would be really awesome. Otherwise, let's continue. There

4093.68 -> is no problem at all. Okay, one more thing I would like to discuss about this is some values,

4099.44 -> something like this. So let's just say we have some heroes and you know, what heroes I'm about to

4104.16 -> use, you know, me, I'm a big Marvel fan and a DC fan also. So let's just say we have a Thor,

4109.76 -> we are going to go fit Spider-Man and we are also going to go with Iron Man. So we have a list

4116.56 -> or an array in which there could be numbers, there could be string or something like that.

4120.96 -> Now, all the great advantage of using the TypeScript is it knows really so much out of the box.

4125.76 -> For example, this is a common scenario. We do this in like 1000 times in JavaScript. If there is an

4130.48 -> array, we go ahead and loop through it by using a map. If I go ahead and use a map, I'm actually

4135.84 -> looping through each of the hero and then I go ahead and use a callback and I can probably say

4140.96 -> simply, hey, I'm going to return a simple string, something that's going to say hero is hero is

4150.88 -> and then let's use a variable which is going to be something like this and let's just go ahead and

4155.28 -> have a hero. So this is a really simple code, nothing magical out of the box. But if I hover over

4161.52 -> to this hero's and this map function even here, you can notice that this is giving us so much

4167.2 -> of the definition and advantage. I don't have to call anything. It automatically predicts

4171.6 -> that hero is going to be type of string because this array is of type of string.

4176.24 -> But if I go ahead and duplicate this and let's call this one as let's comment out this one

4182.16 -> and instead of having a thought, let's just go ahead and say that this is one, this is two

4190.08 -> and this one is three. So TypeScript, all I wanted to show you is TypeScript is smart enough

4195.12 -> if I hover over this. It automatically changes this hero to a number. So it is aware of the context

4201.12 -> that is coming up in here. Right now, if I go ahead and comment this one, comment this one,

4206.08 -> it automatically switches its thing into strings. So the hero is a string in this case.

4211.04 -> So I can avoid an additional step that, hey, whatever the values that are coming up from this one,

4215.76 -> I don't have to explicitly annotate that this needs to be always string. Perfect syntax,

4220.88 -> I can go ahead and work on with that. But as you know, the context switching of the TypeScript

4225.44 -> is really smart and we can rely on this one. So there is no problem in that. So in this case,

4230.08 -> it's good. I'm happy with this one. But the one thing which you should be really careful is

4235.6 -> what is the return type of this method. So in the map, it is expecting that, hey, you're returning up

4241.36 -> this string here. But instead of this, there might be a case where you want to return in every case

4246.88 -> too. That is also allowed and that is also valid. That's why the map has such a detailed

4252.32 -> information that is given to the TypeScript that, hey, what is the value you want to return?

4255.92 -> In this case, it could be two or it could be a previous value. In this case, especially,

4260 -> I would love to return that what is the type of the value that we are returning in this one.

4264.16 -> Again, we could do it like this and then we can say, hey, the values that I'm returning is going

4270.16 -> to be simply a string. There we go. This is much more of a readable and reliable code. So when I go

4277.52 -> ahead and say, in every case, I'm going to go ahead and do one, it stops me from doing this.

4282.24 -> So a good practice that we should all follow that, hey, don't do such thing. Yes, you can avoid

4286.72 -> that input. It will automatically deduce what is coming up from the array. But this is a better

4291.92 -> syntax, especially for when you're writing the code in the team. So this is a better syntax.

4297.28 -> This is the basics. Now coming up on to the final part of the function where we actually will move

4303.12 -> into the documentation. This will actually force us to move into the documentation.

4307.12 -> So let's just say there is a function we are defining and there are two types of function.

4310.8 -> The first one is simply saying console error. So the idea behind this method is whatever is

4317.04 -> being passed to it, you just go ahead and log it to console. So let's go ahead and log it to the

4322.32 -> console. Obviously, we have to take error message. So let's go ahead and call this one

4326.4 -> as error message. That is a type of string that is being given to us. And we are just going ahead

4332.8 -> and saying, hey, just go ahead and print this error message into the console log.

4336.48 -> A very common scenario, which you do while building the bab application in the initial phase.

4341.04 -> Now, if I hover this one, it says, hey, the console error, the message it's taking is in the

4346.16 -> string format. But the call and after this is void. That means it's not returning anything.

4350.72 -> So yes, this could be the thing. But another, this is not a good practice.

4354.16 -> Especially if you're using TypeScript, the good practice is to explicitly mention

4358.16 -> that, hey, whoever is using this function, he knows more about the definition of function

4362.56 -> that this is returning a void. That means it's not going to return anything ever.

4366.16 -> So accidentally, it just says that, hey, if I go ahead and say, I'm going to return one as

4373.28 -> error message now, you shouldn't be doing that. And again, this might look like, hey,

4377.52 -> that's very easy. It's easy because you're just alone coding right now watching a YouTube video.

4382.48 -> But imagine when you'll be writing code with along 15 developers or maybe 50 developers alongside

4387.76 -> with you. Okay, the same thing could be replicated one more type. Another method that you will be

4394 -> handling a lot or writing a lot is handle error. So this handle error, obviously, this is handling

4400.56 -> the error. This is not going to be returning a void because it handles the error. So let me go

4406.16 -> ahead and copy some line from the documentation directly because this is something which is coming

4410.32 -> up from documentation. I'm not making this up. So just like we have all these things in the

4414.72 -> documentation under the more functions, this is written as never. Some functions never returns a

4420.72 -> value. Neither it's void because void is means return nothing, but there is never as well,

4426.56 -> which never returns a value that simply means the function never returns a value. I know this is

4431.36 -> very close to the void, but this is specially made so that you can handle some kind of error because

4436.4 -> this is kind of a intentional crash that we are doing to the function for having this. So in these

4441.36 -> kinds of cases, I can just copy this line and I can go back onto the code and instead of the console

4446.4 -> logging the things, I can just go ahead and say throw a new error and whatever the error message.

4450.48 -> I am just passing on. I'm handling this gracefully. So if I go ahead and put this as a void, which is

4455.68 -> not a good thing. If you want to make your errors more robust and handling part of it, just use

4460.64 -> never, which is again recommended in the guidelines of the types. If I hover this again, it says the

4467.04 -> return type is never and error handle is declared, but its value is never read. That's fine.

4472.32 -> But you get the idea from where this is coming up. Again, I'm not pulling this out from the thin

4476.32 -> air or out of a hat like a magic. This is mentioned in the documentation. The never type

4481.92 -> represent value, which are never observed. In the return type, it means that the function throws

4487.36 -> an exception or terminates execution of the program. So forceful termination of the program never

4493.28 -> also appears. When TypeScript Remind, there is nothing left in a union. Union will talk about that

4498.56 -> later on. That's a subject later on. But you get the idea how to read the documentation and how to

4503.28 -> find out the actual source from where this is coming up. I hope you are enjoying this. The valuable

4508.4 -> series up here, and again, I'll wrap this all the source code from now onwards. I'll put them into

4513.2 -> the dashboard as a community session, which is a free segment here at Inuron. You can go ahead and

4518.32 -> download them. So you can have that. And again, the most important part is not just the source code

4523.76 -> that I'm giving you. The most important part is the mindset that I'm trying to give you with these

4528.08 -> videos. So you can write better piece of software. That's it for this one. Let's catch up in the

4532.4 -> next video. If you really think that just by adding TypeScript, you have removed all the bad

4537.6 -> behavior of JavaScript. That is not the case, my friend. There are some still odd behaviors,

4543.28 -> even in TypeScript. Maybe in the future version, they will go away, but still we have a lot of

4547.52 -> misbehaves of JavaScript still existing in TypeScript. I'll show you one here. Hey there,

4551.92 -> everyone. Hit the share back again with another video. And let's go ahead and get started with

4556.48 -> the TypeScript series. Before that, hit that subscribe button and the bell icon as well. I would

4560.88 -> be really, really happy with that. Now that assuming that you have hit that subscribe icon, come on,

4566.56 -> guys. 70% of you haven't hit that. Okay, I assume that you have hit that. Now let's go ahead and

4571.52 -> walk through with the objects. Now again, I won't be consuming too much of the videos like I won't

4575.92 -> be releasing 14 or 15 videos on just objects on TypeScript. We'll walk through with the most

4580.88 -> important part of it, enough that you can get started with that. So there will be a couple of

4585.04 -> videos on object. Let's go ahead and get started with this one and I'll walk you through how objects

4589.2 -> are there and what are the places where it can misbehaves a little bit and your code might actually

4594.08 -> get compromised with that. So let's go ahead and walk you through with that. So how does the object

4598.24 -> works? The objects are really simple. We use them all the time in JavaScript as well. So maybe you

4603.84 -> want to make an entry in the database. You collect all the values in the object format and you pass

4608.24 -> on this object to maybe a backend controller. It modifies all the things and adds an entry in the

4613.36 -> database. That is the most common use case scenario. For example, let's just say I want to create a

4617.68 -> simple user. So this is how go ahead and create an object of a user and I'll just add more values to

4623.6 -> it. So for example, if I go ahead and say, hey, this is the name. So whenever I'm adding a value

4628.64 -> or a user to my database, I'll say, hey, this is a name. Then we got an email. So let's just say

4633.36 -> hithesh, else you're on dev, another email. And I'll also say that if this is active or not.

4640.4 -> So I'll say if this is an active account or not, means people are regularly using it. So this is

4646.48 -> a basic object. And yes, typescript syntax is exactly same and that is where you'll be using it

4651.36 -> most. But this is not the use case of the object. Designing an object like this doesn't really

4656.16 -> make sense and you won't be using it too much. The use case of the object is through the functions.

4660.8 -> You have to actually pass on these objects into a function or you have to return some objects

4666.24 -> through the function. That is the most common use case that we use while developing any application.

4670.72 -> So let me walk you through with how these are done. So for example, let's just say we are creating

4675.36 -> a method which is create user and this is a simple method. Now since this is a forgot the keyword.

4682.8 -> So function. So this is a very basic method that we have. Now this method expects that you will

4687.44 -> be passing me some of the user. So the very first syntax is you pass me an object and I'll define

4693.2 -> that at least give me a name and that name is going to be a type of string and give me another one

4700 -> which is let's just say is active or is Google Auth or what should I do is paid. Okay let's

4710.56 -> let's go with that and that will be a Boolean. So this is the very basics of it that we have got.

4715.6 -> Let me just go ahead and move this up. There we go. So this is the most basics of that we have. Now

4721.44 -> well whatever we return the value we'll discuss on that you can return an object obviously that is

4725.76 -> the most basic part and the obvious part of it. Now what it allows us when you have a definition

4730.56 -> like this then the method becomes a tiny bit more secure. So for example when I say hey I want to

4735.84 -> create a user I want to use that. TypeScript actually stops me for doing that and looks like it is not

4742.24 -> stopping me probably my system is a little slow. So let's just go ahead and say TSC and I'll say my

4750.56 -> objects. Let's go ahead and run that and there we go we saw an error that create user cannot be

4756 -> used like this. So let me just go ahead and try that. Hey why are not let's try go back up here

4762.4 -> and come here. No error threads but you get the idea that this is actually stopping me from doing

4766.96 -> all these things and how can I actually get rid of this by passing on an object. By the way why

4773.04 -> this is stopping me to doing so because probably I forgot to export. So actually we can we always have

4778.8 -> to do we'll come back on to this part that why we are actually doing this because this exporting

4783.44 -> of the objects is really helpful in this case as well. I will definitely have those values so please

4790 -> cancel that and we'll be exporting that probably this will start giving me the errors. There we go

4796.08 -> we got the errors. I'll definitely discuss this part as well as we move into the react part or maybe

4800.96 -> angular part of it that how this actually works will surely take care of that. Now right now the

4805.6 -> important part is that when we say create user it stops me from doing this so there we go we can

4810.4 -> go ahead and use an object. Now it's complaining me that hey the object that you have defined that

4815.68 -> is exactly the same which is I'm expecting from this method to give me but the syntax or the

4821.68 -> following must have variables are missing or properties. So in this case I have to say name and

4826.96 -> the name is going to be let's just say I'm creating a user with the name hithesh that is fine but

4831.2 -> still I'm missing one which is is paid so I'm gonna go ahead and say is paid and we'll be saying

4835.76 -> this is a free user on the platform. So this is a pretty obvious behavior that we have and this

4841.84 -> is now probably trying to have my code in a much better way. So this is the most basic of it and

4848.4 -> you can actually add a lot more things on top of this. Maybe you also want to define another

4853.44 -> syntax which actually makes people a lot confusing is what happens when a function actually returns

4859.6 -> an object so that is the most confusing of all. So let's just say you're not creating a user you

4864.48 -> are creating a course in this time. So let's just call this as create course. Now this is obviously

4870.48 -> a function so let's go ahead and say function and this is an object. Now this is a return type

4876.56 -> and there we go and this is actually a definition. There we go. Now this is a bit of a weird syntax

4885.28 -> we forgot a colon there. Now what this is saying is that hey this is a function name. This is a

4893.04 -> function parameter where you pass on. This is a return type and this is a definition. So yes

4898.56 -> there is a lot there is a lot confusing up here. The reason why it's complaining is simply because

4903.28 -> you have promised that you will return an object and you are not returning anything. So obviously

4908.4 -> you have to go ahead and return this one. This one is happy now but in case you have a special

4912.72 -> syntax that I should be returning some things like this. So you can actually go ahead and

4917.76 -> make it like this. So any course that you are having is going to have a name and the course should

4922.88 -> have a price again fictitious scenario and this should be a number. Now obviously this will complain

4928.24 -> this is a better definition of function in case you are having that hey this should return me

4932.48 -> obviously always and always an object we should have these two properties. So whenever I'm going

4937.2 -> ahead and returning anything from the function it promotes a good practice and less error that hey

4942.4 -> you should be returning the name. For example this course name is reactious and the price is going

4947.6 -> to be let's just say 399 something like that whatever the price is. So this is the basics of it

4953.92 -> and now you know the syntax and the weirdness. This is the only thing which I have seen a lot of

4958.16 -> people get confused about that where what happens when an object returns an object. Yes I do agree

4962.72 -> this is a little bit of a weird syntax because we are parenthesis then colon and then this is an

4967.6 -> object and the definition and it gets a little bit more confusing when you have the object in this

4972.16 -> format because it's returning these things and then so these kinds of definition makes people a

4977.52 -> little bit confusing. Now what is the odd behavior regarding the objects which comes up in the type

4983.04 -> script okay that is that is something really bad okay let me show you where the bad syntax actually

4988.88 -> comes up. So notice this that this is a name and this is a it is paid so my function is saying

4996 -> that hey whenever you create a user you give me a name and is paid that is obvious but let's just

5001.92 -> say while creating a user I also want that email should also be there so I can just go ahead and say

5006.72 -> hey let's give it an email and the email is going to be h at the rate h.com something like that.

5013.04 -> Now this is not acceptable and there's a long big thread on the stack overflow by the way on

5017.2 -> this behavior. So obviously this is not allowed because in the definition we have strictly mentioned

5021.36 -> that this should be there yes there are ways I'll walk you through in the upcoming videos

5025.28 -> that are ways how we can actually make this email as optional if you pass then that's good if you

5029.68 -> don't pass it that's also fine. But what is the odd behavior is that this is an object so I can

5035.84 -> just cut this out obviously this is complaining. So let's just say I go ahead and say hey let

5041.76 -> new user we create a variable and we simply assign that as an object. Obviously we do this a lot of

5046.8 -> time in the JavaScript as well that whatever and from wherever we collect the information like payment

5051.12 -> information comes from a different model or controller or maybe a Google authentication also

5056.08 -> gives us some information so all these information are combined an object is being created and whenever

5060.8 -> we call these kinds of methods we just pass on this value here. So for example a new user is being

5065.84 -> passed on and you might have noticed this time I was able to pass on much more information than

5070.64 -> what is expected in the function definition previously it was giving me error but now this is all

5075.12 -> okay so yes not all weirdness of JavaScript is gone but there is a better way of defining the

5080.16 -> functions and the methods. We'll learn about that when we'll walk through with the interface and

5084.56 -> all of that there are the beautiful most beautiful part of how the typeScript will walk through with

5088.72 -> that. So I hope that now you know some of the weird behavior of this one. This is a common method in

5094.4 -> case you have watched my morn course or any other backend development we have done this many many

5098.24 -> time this is still not stopping me to do any bad behavior so that is wrong of typeScript it should

5103.36 -> stop me but I'll walk you through with the optionals that there are better ways of handling

5107.52 -> situations like this but I think that's going to come up in the next video so in the meantime

5111.76 -> hit that subscribe and I'll catch you up in the next video. Hey there everyone a very sure and

5116.4 -> this is a short video all I want to do in this video is introduce you to the type aliases and give

5121.52 -> you a moment so that you can read some documentation on your own so that whenever you find out some

5126.24 -> tutorial who is talking about exactly same thing you can say yeah this is coming up exactly from

5130.32 -> the documentation as well and again the whole idea behind making the short chunk size bite size

5136.08 -> videos is so that if you feel you can consume more than one head to time instead of pushing out at

5140.64 -> 12 hours or 15 hours of content at a one given point of time again let's get started with the type

5145.84 -> aliases the type aliases is a topic which is really really simple and you don't have to worry about

5150.96 -> anything at all I'll walk you through with the documentation as well we've already gone through

5154.96 -> with some of the scenarios which where we can use it and this is all what you'll see if you have

5159.44 -> watched the previous video this one will just come like a breeze so moving up here you have

5163.36 -> saw that we can actually create a simple variable which is a user and we can kind of use that as well

5168.88 -> but in the JavaScript we don't actually create a variables just like this if you want to support

5173.36 -> anything like that we actually go with a different method let me let me walk you through because

5176.8 -> coding is actually much easier when I show you by writing the code itself so let's just say our

5181.92 -> goal is still same we are creating a application in which we onboard a user and user has some of the

5187.76 -> properties that we want to go through with that and maybe this is not just a one function which

5192.24 -> uses all the set of properties but there are like probably eight different functions which uses

5196.4 -> the same of properties now what they do with that properties that's not our concern our idea is

5201.68 -> that whenever somebody takes up this entirety of eight function whenever they take any parameter

5206.88 -> they need to get all the information of the user itself that's the whole idea okay so let's go

5211.68 -> ahead and create that the way how we do it we create a type of it and yes it's a keyword in the

5216.8 -> TypeScript and we simply go ahead and define a user like that really simple it looks like almost like a

5221.68 -> constant but this is a type aliased that we go for now once we have this user we can define all

5226.72 -> the properties that we want to have but we don't define the exact value of it we'd rather define

5232 -> what kind of value is going to come up into that so for example this one is going to be a simple

5236.56 -> string and not a comma and let's just say email is also coming up that is also a type of string

5244.48 -> and is active is also there which is going to be a Boolean value so now just assume there are

5252.56 -> more properties of it and we have actually created a type for it now the advantage of creating a

5257.84 -> type like this is it could be really a long and lengthy one is whenever there are methods like

5262.8 -> create user get user details modify the user we want all the information to be passed on so let's

5270.16 -> go ahead and create a simple function like this and once we have this one this is the definition of it

5275.2 -> now what I want is if anybody passed me a user it should adhere to the type of user so I can go

5281.36 -> ahead and say hey there should be a type of user so what we are doing internally is kind of

5285.84 -> creating the data types here or the types in the TypeScript so just like we write something like a

5292.32 -> number maybe a number or maybe we can go ahead and write a simple string similarly now we are

5299.68 -> actually allowed to pass on user now just a site tip yes you can do something weird things like

5304.56 -> this and you'll see this in some example in tutorial stuff like that hey you can call the string

5309.44 -> and that string could be you can type alias a string as not string actually my string has a

5318.16 -> string so wherever you are using now the string type you can go ahead and actually say my string

5322.96 -> again I don't know why there are so many examples about that on internet I find it weird but

5329.44 -> yeah it is actually technically allowed so but I won't see a really use case of that that why would

5334.64 -> you rename this definite default string or boolean or something like that maybe there is a case

5339.44 -> where entirety if a team don't use boolean word and just use the boole maybe you want to do that

5344.96 -> again there are use cases for that so now we can see that there is a user and there is a user we

5349.76 -> are not returning anything so anytime somebody uses a create user he just goes there and say I want

5355.76 -> to use user he will be complained that hey there is something that you need to pass on one argument

5361.12 -> that should be of type user so in this case I cannot just go ahead and say hey this is my object

5365.92 -> it will complain it doesn't match the type of user so you have to give me all the name email

5371.52 -> and is active so let's just say I give it a name the name is going to be an empty string then it

5376.72 -> says hey it is an email which is also going to be an empty string and then it says hey give me

5381.36 -> is active as well which could be true or false if I pass on all the values it is absolutely happy

5387.84 -> now similar to this we can also say that hey whenever you create this function you obviously

5391.76 -> should return something and that return type of value should also be user so you get the idea

5397.36 -> how this is going ahead further that anybody who uses this function this function needs to return

5402.64 -> that so you have to go ahead and say hey return and then you have to not only return the object

5407.92 -> you have to actually return all these values so whatever that values are and whatever your logic

5412 -> says you have to return that otherwise it will complain so it's a really good use case of how the

5416.64 -> type can be used now in the real world scenario whenever let's just say we we are creating a user

5421.6 -> for our LMS then obviously this is not it there are a lot of things that you have to pass on now

5426.48 -> what you do with those things totally up to you your logic but this is a common thing which is

5431.44 -> being used now let me walk you through with the documentation as well because documentation

5436.08 -> obviously always helps to understand this so into the everyday types if you look for it here on

5441.68 -> the left hand side there are type aliases in interface yes they are quite confusing almost like

5446.8 -> same to each other but this is the example that are given in the documentation about type aliases

5452.16 -> so it's common that we want to use same types more than once just I told you maybe there are eight

5456.48 -> functions eight functions which are using the same type of user maybe there are 15 values

5462.16 -> or in the object or the user so in that case it can be really really useful all the internet is

5467.52 -> filled up with these kinds of example where somebody is trying to create coordinates great example

5471.84 -> nothing wrong in that so he's creating a type of point and whenever somebody a point is defining

5476.8 -> you have to pass on x and y coordinate same example let's just say we are sending print coordinate

5482.64 -> you have to provide PT which is of type point so it is compulsory whenever somebody is using print

5487.84 -> coordinate he has to pass on all these values and we don't have to again and again make our function

5493.68 -> definition too lengthy that hey you have to pass on this eight different lines so imagine if this

5499.52 -> would be point instead of the coordinate into two values it could be let's just say 16 values

5504.72 -> and in your function what could definition would be look like here really crazy so it's better

5509.84 -> that in one file we define all these types when then we import them and whenever the function

5514 -> definition comes up we just call them hey you need to pass on a value which should be a point type

5518.24 -> or maybe a user type or maybe something else so there are a lot of values and yes we haven't

5524.72 -> yet studied about these all types or a union type and all of that we will do that very soon

5529.36 -> I highly recommend you at least go ahead and go through with reading this this won't be taking

5533.28 -> more than two to three minutes to you but you will develop a habit of reading the documentation

5537.6 -> so I think the type Alice is all done now let's go ahead and move on to next video some

5541.92 -> quirky behaviors and some real small topics are there I would like to cover them up in the next

5546.4 -> video let's catch up there all right so in this video we want to study about just three simple

5551.52 -> thing the first one is a keyword which says read only the second one is just a question mark

5555.92 -> yes literal question mark and the third one is a use case scenario that you'll be using a lot

5560.96 -> with the case of type not with just ordinary object this is the most use case scenario so whenever

5566.64 -> you'll be looking in the project being designed by other person or GitHub repository you're trying

5570.8 -> to understand the code you'll find these kinds of situations a lot so scenario based let's go

5575.92 -> ahead and get started it's pretty easy hit that subscribe and then we can move forward

5580.56 -> yeah this video is powered by AI and till unless you hit the subscribe it doesn't move forward

5584.64 -> so yeah you have to just kidding let's get started with that so the same example we are into

5589.52 -> the my objects and let's just go ahead and define a simple user so we have seen that I've commented

5594 -> out all the code that we can actually go ahead and use in a type and this is a type that can be

5599.12 -> multi-used into a function so maybe anything else that you're defining so let's just say there is a

5603.68 -> name that is going to come up as a simple string type so name string and you also have email that

5613.12 -> is also a string type and you also have probably is active so to track that whether user is logging

5620.64 -> in into three days or maybe whatever the parameter is so in this case now a couple of things that

5625.68 -> you'll be using is in case you are oops my bad sorry okay so that you'll be using let's just say

5631.44 -> you are using MongoDB to save this user into database so you want that nobody should actually be

5637.44 -> able to touch this underscore id which is a common thing in MongoDB so this is a string now at

5642.08 -> the time of creation obviously you'll be your MongoDB will be creating that but you want that nobody

5646.64 -> should be able to manipulate that further down the road so you can go ahead and mark this as

5651.68 -> read only yep that's a keyword you can just put it on to anyone and now you won't be able to

5657.36 -> change that so that's a pretty simple one really easy one now one thing I would like to mention

5662.64 -> here which is crucial that notice here this id is a simple string so for string you won't be able

5668.96 -> to change that for or let me just give you a walkthrough of that let's try to create a simple user

5673.76 -> for that let's just say there is a function which says create a user and then it says hey just

5681.68 -> give me a user so when at the time of creating this user let's just say we call this as you which

5688 -> is type of a user and that's basically it so nothing big deal this is a really simple function

5695.28 -> now whenever there's a you which is obviously a type of user you can access all these values up

5700.64 -> here or you know what let's not create a function actually let's create a variable because it's

5705.68 -> easier to show you this example with the variable so let's try with variable so let's just say we

5710.48 -> call it as my user which is going to be of type user totally fine and now in order to make sure

5717.2 -> that this is a user type we have to actually assign all these values this is going to complain

5721.92 -> because it's not able to fulfill all these values so I'm going to go ahead and say hey let's give

5726.48 -> it an underscore id which should be a type of string so let's just say this is 123 for whatever

5731.68 -> 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

5739.44 -> email which can also be h at the rate h.com I wish I would have that email and still complaining because

5746.96 -> one more parameter or one more property needs to be there which is is active let's just say this

5751.28 -> is not an active user okay false and what is still your issue so we have id name email and a

5760.32 -> string why is it complaining it says false is not assignable to type my bad should be saying that

5766.24 -> this is a Boolean okay honest mistake there all right so we have gone through with this now what

5772 -> we can do is I can just go ahead and say hey my user is about to change its email so we can

5776.72 -> access the email and I can say hey now your new email is something like h at the rate gmail.com

5782.64 -> you're totally allowed to do so but in case you want to access something like my user dot underscore

5789.76 -> id you should not be allowed to change that so you if you just try to sign anything to it then

5794.8 -> obviously it will complain that this was marked as read only you should not be doing this so this

5799.04 -> is one of the use case of whenever there is a read only keyword that is coming up but maybe you

5805.04 -> also want to have some of the things like user has registered by UPI or maybe some credit card

5810.72 -> details so obviously we know not every person has credit card so we are going to say credit card

5817.36 -> details this is going to be a simple number now obviously not all the user bad number there we go

5825.44 -> so we obviously know that not all users are going to have credit card details we also allow some

5830.08 -> users to come on our website and have free access to the platform so this could be marked as optional

5836.48 -> so all you have to do is come up and put up a question mark here now this will not complain if

5840.64 -> you pass on that detail that's great it will be utilized otherwise you can just put a question mark

5845.6 -> yes I do agree when you first time are learning about the typescript this question mark before the

5850.08 -> colon is a little bit weird syntax but over the time it will get over so this is the really easy

5855.04 -> use case that we have in the card details and all of that so you get the idea this will not allow

5859.28 -> you to complain and by the way a little bit more to surprise you not surprise you actually give you

5864.64 -> more in depth of the detail let me comment this out so that we can successfully actually compile

5870 -> this into typescript so that will give you a lot idea so TSC this one is my objects and if I go

5877.44 -> ahead and run this this creates an object file but I hope you can see that now we are exporting so

5882.4 -> much so we are exporting ES module IDs there and all of these details are there notice here there

5888.48 -> is nothing which is depicting in the JavaScript that hey you are allowed to modify this idea or not

5893.84 -> but the moment I uncomment this code now this is giving me an error now notice typescript will stop me

5900.32 -> from doing a lot of things in my object notice here there is nothing still and we have we are

5905.92 -> working just on the properties or the config file of the typescript that will allow me even in the

5911.76 -> future it will allow me to stop producing that code but there is nothing in the JavaScript which

5915.84 -> actually stops you that so this is a pure function or a feature of the typescript itself so just

5921.12 -> make sure you remember that part okay now one more thing I would like to mention since we are

5925.36 -> talking about the credit cards so this is a scenario will build just based on the credit card

5931.36 -> so there are something known as or there is something known as mix and match of

5937.68 -> these types so let's just say we have a type and first thing that you want to have is a card

5942.88 -> number so let's just say you define that hey card should have a number and this is how I'm

5948 -> going to store the number so you just say give me a number or I'll say yeah number is number is

5954.96 -> actually keyword so let's call this one as a card number all the work is here and this is going

5963.52 -> to be a string it couldn't be anything and then also you know that if you are storing the card

5968.96 -> details the card number alone is not enough there is card date as well let's assume that somebody

5975.68 -> storing that date or I'll call this as card date just to be sure that is also being stored in

5983.52 -> a string format so there are many cases where you want to simply store this card number card

5989.12 -> detail or card date but you also realize there is a CVV number so yes this is a fictitious scenario

5995.2 -> making up because there's just one detail it's easier to explain but in real world use cases there

6000.32 -> 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

6005.28 -> 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

6010.16 -> can mix and match of the two above so let's just say we are saying this as card details so obviously

6015.44 -> now we have to compile this card details with all the things so card numbers expiry date CVV all

6020.32 -> is coming up I know these two are above defined so I don't have to redefine the things I can go

6025.44 -> ahead and say that hey this will be off type being created from the card number and then I can

6033.6 -> use an M person sign to combine them together M person is to use all of them together not just or

6039.68 -> like get this one or get that one and is for combining all the things so combine card number

6045.36 -> and also combine card date and also I want to give one more because we didn't caught up with

6051.52 -> the CVV so I'll just put up an end and create an object here we'll say that give me a CVV which

6056.72 -> will be of type number so now if I go ahead and create any variable or maybe any object using

6064.4 -> card details I have to adhere with all the values up here so this is really really easy and again

6070.08 -> right now you're looking it from the perspective hey there's just one value here there's not big deal

6074.24 -> I could have defined it but imagine the scenario where project is coming up from a long list of

6079.12 -> coders they've already created couple of types which are doing absolutely great you just want to

6084.24 -> utilize them yes I do agree this object is a little bit overkill not a good practice at all

6089.6 -> nobody would advise you to do such things on the go it looks very hacky but just wanted to make a

6095.12 -> use case this up till here is definitely a use case where you define a new type based on the

6101.04 -> combination of previous two type so remember both examples are here the first one is a good example

6106.32 -> the first two where you use existing types which defines another third type by using the existing

6113.44 -> functionality there is also a hacky way of doing the things which is not a good practice but still

6118.4 -> we can do it if we want to so that's it a really simple way of handling the situations up here

6124.08 -> and nothing much of a big deal so now you know a little bit more about the type script than you

6128.32 -> know before starting the video so for that hit that subscribe button and let's catch up in the

6132.64 -> next video arrays in typescript don't have much but yes behind the scene there is a little bit more

6138.88 -> to the arrays and if you look and come up here into the arrays you can see that's it that's all

6144.88 -> the arrays are about in the type script really short really simple paragraph that we have on the

6149.92 -> array but there is a little bit more of syntax that we can discuss and we just need one video to

6155.36 -> understand arrays in type script and this is that video so hit that subscribe button and let's

6159.92 -> go ahead and move forward to understand arrays in type script really simple just two types of syntax

6166 -> and pretty much basic let's go ahead and get started with that I'm pretty sure you have

6169.92 -> hit that subscribe I'm very sure you have promised that at least I hope so anyways let's go ahead

6175.92 -> and get started with that let me minimize this and I have created a new file of course call it as

6181.04 -> my array.ts and let's go ahead and try to create an array so one of my favorite thing to do with the

6186.32 -> arrays is have a lot of superheroes so let's just say if we have a lot of superheroes this is the

6191.68 -> syntax how we go ahead and do that now I've seen a lot of people who go ahead and go like this that

6196.48 -> this is an array and okay maybe I've gone through this if I hover this this says hey this is

6202.16 -> superheroes which is an array of type never that's interesting what happens when I try to go ahead

6208.32 -> and push some values into this one so if I go ahead and say hey let's just push a superhero into

6212.56 -> this one and let's just call this one as a let's push in spider man spider it gives me an

6219.04 -> error that says hey you are not supposed to do that you're not allowed to that the string is not

6223.76 -> an assignable to parameter type never that's interesting so remember I we discussed a little bit

6229.68 -> about the never in the past so never is something which is supposed to never execute or end the

6234.72 -> things it's it's really one another use case of never so this is not how you should be defining it

6239.84 -> so always just like we were able to put up a colon and number we should be actually defining it

6244.4 -> like this but this will still give you an error because now you have mentioned that hey no matter

6248.8 -> what happens this superhero is a type of array but an empty array it should always be empty because

6254.56 -> this is what the definition is saying of your Superman of your superheroes it says again a string

6260.08 -> is not a type it should be never again so the way how we define it is simply saying the super

6265.04 -> heroes is going to be of type of a string array yes that's the basics in text and yes that's

6270.72 -> that's all to the array you can go ahead and say hey this could be a number this could be a string

6275.76 -> yes there is also a type where you can define that it can have both numbers and string will

6280 -> discuss that later on there's a separate video for that but you get the idea you get the point

6284.32 -> this is how you need to define it and now you can push any values to it really simple really

6288.96 -> basic we can have more of this let's just say instead of superheroes we want to have something

6295.2 -> like superheroes or maybe something like a hero power where we define all the numbers

6302.64 -> this can be a simple number and I can just go ahead and say I would like to add hero power

6309.76 -> and in that I would like to push on some numbers so two is absolutely fine so this is the very

6314.64 -> basic syntax of how you do it but there is also one more way which you'll find in a lot of code

6319.76 -> basis that that is also being written let's duplicate that let's comment this out so another way

6325.44 -> of defining this exact same thing and again there is no good there is no bad in this case they define

6330.64 -> and represent exactly the same syntax behind the scene the working is exactly same there is no

6335.92 -> like efficient way or bad way this syntax of declaration is really simple you can go ahead and

6340.56 -> say array then in the diamond brackets you can just go ahead and define number or any other data

6345.52 -> type that you have for example it could be string it could be number whatever you like to have

6350.32 -> this is all the simple basics of it now it's not like you can have the numbers this is where the

6355.36 -> type actually comes up really handy for example if we have a type of user you can go ahead in my

6360.64 -> say that my user has a name which is a type of string and also say that this is is active so

6368 -> our user in the database is defined of just two values which is a number a string and a boolean

6375.44 -> and not just numbers and the string you can actually define it as simple boolean as well

6380.72 -> and you can say that hey I want to have all users so let's just go ahead and define a simple

6385.76 -> const call this as all users because a lot of user about to come now just like we define something

6392.56 -> like an array of numbers or a numbers array and initialize it with the empty value you can also go

6398.56 -> ahead and use something like user now it is very obvious that whoever the value is going to come up

6404.96 -> or whatever the value want to push into this array at line number 10 all you got to do is add the

6410.64 -> data type which follows this which is a type so let's try to push that so we'll be saying that all

6416.08 -> users let's push a value to this one if I go ahead and push it like the empty one empty string if

6422.64 -> I try to push that save this this obviously will give me error at the runtime right now sometimes

6428.72 -> system is slow so it doesn't give me that values so let's go ahead and say hey we want to push an

6433.92 -> array into this one this is going to give us a value which is not really good so let's try to

6439.76 -> have this one and again we need to pass on an object I'm pretty sure this will give me an error

6445.36 -> as soon as possible so there we go now we got there so empty objects are not allowed because this

6450.88 -> needs to kind of follow the protocol not that's a correct word protocol but this is actually

6457.52 -> this should be a type user that's all I'm saying so user has two property the name which is

6462.48 -> which can be an empty and is active that can be simply a true true if I can write that so there

6470.08 -> we go now we are able to push the values into it so really simple there's nothing much too complex

6475.52 -> about it just two types how you can define them really go ahead and do that now also there is

6480.96 -> one more way that you should know about it because maybe you're using some ml models to it and

6487.84 -> there is some complex error type so in that you are defining numbers or numbers because when you

6492.16 -> take a picture the picture is actually an array of all the rows and values from Python or some

6498.24 -> stuff that you actually work on with so in that case say let's just say you have a number of

6502.88 -> array and then further down you also want to have an array then you can go ahead and just define an

6508.56 -> array just like this and further down I can go ahead and come up some values something like this so

6513.6 -> this is a coordinate or maybe a simple pixel values how much RGB values are there so let's just say

6521.2 -> 255 comma 255 comma 255 so yes that is string the way value how you can add it if I try to add a

6528.16 -> string it will complain that hey that's not the data type string is not a string should not be

6533.76 -> there it is supposed to be an array of array so this is the syntax just remember that it's really

6538.48 -> easy numbers and then we can have array inside the array so really basic and simple as we will

6544.72 -> deal up more with the array just like you are now feeling more comfortable with the with the simple

6550.16 -> variables and a little bit push values you will feel more comfortable with the arrays as we go

6554.64 -> further but this is it this is really the basic as you can see into the documentation as well

6560.8 -> there is nothing too much to define about it and if I go ahead at the top if I go ahead and

6565.76 -> search for array there's array there is a generic object type the array type and there is a read

6570.96 -> only array type as well so if I go ahead and look for this one the array type we can see that this is

6576.24 -> all the arrays of type string and we can have the arrays something like that pop and push the values

6582.32 -> and numbers and there is also a read only array that you can define so values read only array type

6588.08 -> of string will definitely go through with these kinds of things later on just wanted to make sure

6592.88 -> that there is nothing too much in the array just the basics is here and I think this video is good

6597.76 -> enough to get you up and running and started with type script and arrays in type script let's catch

6602.32 -> up in the next video hey there everyone they share back again the other video and welcome to

6606.88 -> another video of the typescript series we are trying to aggressively move into the typescript world

6612.08 -> and I'm trying my best to push as many videos as I possibly can so another video in the typescript

6618.56 -> series in this video will be talking a bit about the union type and I really am not looking forward

6623.68 -> in the series that I just go ahead give you what is union type and that's it I really want you to

6628.8 -> write better code in the JavaScript and that's the whole idea of the typescript series so I also

6633.44 -> try to do some of the examples that we use in the production and that can help you to write better

6638.16 -> JavaScript code with more contextual understanding some people don't like it some people just say hey

6642.8 -> give us the syntax and that's it for that you could have read any article or documentation but

6647.52 -> this is the real knowledge a lot of people don't like it probably they haven't written any production

6651.84 -> level code but again this is the way how you should learn with a contextual understanding and by the

6656.56 -> way I've also got a new mic after thinking a lot I ordered it I am pretty sure those who are

6661.12 -> hearing it in headphones or probably in a good speakers can easily notify and understand the

6666.72 -> difference that we have moved from last video to this one great one so here we go we have got a new

6672.24 -> file which is my union.ts union is a really one of a fantastic thing in the typescript which allows

6678.24 -> you to be into a situation where you are not pretty sure what type of data is going to come in

6683.6 -> it might be a number it might be a string but you are not sure it can be either of the two now

6689.04 -> instead of using any I it is highly highly recommend that you try to use union type union is like

6694.48 -> a combination of two or three or more types of data that you can include into a variable or an array

6700 -> and whatever that is and this is the only video you need to watch about the union I haven't broken

6704.4 -> down this video into five different videos it just one single video it will help you to understand

6709.28 -> a lot of context and yes it will help you to avoid any into your type script code so let's go

6714.16 -> ahead and work on with that that how it actually works and yes some of the examples are just

6719.12 -> code based assuming that you're building any game or maybe a banking application in JavaScript

6724.08 -> so let's just say if we have a simple score this is how it goes and you're saying that my score is

6728.88 -> going to be 33 that's fine nothing bad nothing bad no big deal but you are not sure that whether

6734.08 -> this is always going to be a number or it might be some of the cases that it might be a string as

6738.72 -> well I don't know why but it can be possible so in that case so far we have been going through and

6743.36 -> put up an annotation that hey we want it to be a simple number all the time when you do this this

6748.88 -> is all fine but you can use a pipe sign which is just above your enter key on the right side

6754.88 -> and you can use a string as well now it is recommended that you try to keep it very strict as much

6761.12 -> as strict as possible because there is nothing that is stopping you to put up more data type or in

6765.28 -> fact list down all the possible boot data type that is available in the type script but use it

6771.04 -> wisely use it carefully it can allow you to do such things which can be really useful for example

6776.64 -> here if I go ahead and say hey this score is going to be now 44 that is totally allowed no problem

6783.6 -> at all it can also allow you to do some things like score is going to be 55 but this time is a

6788.88 -> string 55 if I go ahead and do that no problem at all if I go ahead and remove this and I save

6794 -> this yep there is a problem there is a squiggly line here that says hey whatever you are trying

6799.2 -> to do this is not good so you shouldn't be doing that but again this is how the basics of it work

6804.24 -> hi I noticed that 70% of you haven't subscribed to my channel it would be really a great motivation

6810.32 -> for me if you hit that subscribe button so go ahead hit that and now let's carry on with the video

6815.28 -> now this is not just the basics of it you can actually use this boolean type or this union type

6821.28 -> not boolean union type with your own custom derived data types as well for example you are building

6826.64 -> an application which has a multiple hierarchy of user and admin and you want to define a strict

6831.6 -> type for that so for example let's just say we have a type of user that we are defining and user

6836.88 -> always comes with a name that is going to be a string and apart from this we will be having

6842.96 -> of let's just say an ID which is going to be a number no problem at all let's go ahead and duplicate

6848.16 -> this code as well oops commandy come on didn't install the shortcut for that probably not okay

6857.44 -> so this is going to be an admin so let's go ahead and say this is an admin but instead of having

6862.56 -> a name this admin has a user name now it could be string it could be another data type but whatever

6868 -> that is it's totally allowed to have this this is a type that you have defined it's not a literal

6872.88 -> type that we see like numbers and boolean this is a type that you have defined so we have two

6877.36 -> types now let's go ahead and create a variable for or maybe an object whatever you like to call

6882.16 -> this one let's just say I am defining my name as a simple user but it could also be on some days

6890.8 -> an admin or maybe on eventual future it could be admin we can go ahead and simply say that

6897.92 -> 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

6903.12 -> name is going to be my name and you should also have an ID which is number so let's just say this

6908.24 -> is your ID so there is no problem no problem at all but eventually in the future I can go ahead

6913.76 -> and say that hey now with ish is going to act as an admin so you should have a user name instead

6918.24 -> of this so I'm totally allowed to just redefine the things for example I can go ahead and say now

6924 -> I have a user name maybe an hc and I also have an ID maybe I'm using a same ID for some purpose

6930 -> so 334 this is totally out and typescript is not giving you any problem for that but on the other

6936.08 -> hand if you go ahead and try to remove that it is cannot or can never be an admin then obviously we

6941.92 -> see that there could be an error here but if I go ahead and hit the command Z that it can be admin

6947.52 -> or can have multiple types of data then it is really really useful now this kind of a thing

6952.8 -> could be really really useful for writing the functions because sometimes there are situation

6957.84 -> that function either accepts multiple values or sometimes returns multiple values so the syntax

6963.2 -> remains same we have discussed quite a lot about function but let's just go ahead and have a simple

6967.44 -> more discussion about it let's just say this is get dbid so you want to get some database values

6975.04 -> or some database id from here and don't know somebody is passing you an id there is more like

6982.8 -> calculated id in the database that you are storing so this could be a simple number

6986.88 -> that somebody is passing you but it could also be a string so there could be multiple ways

6993.2 -> of how the things can go up here now in this case if somebody gives me and I do a simple console log

6999.36 -> and I say that dbid is and then I simply go ahead and use this and I say hey just print id

7008.88 -> and here we are making some API calls and you're doing a complex application and something this

7019.04 -> is totally allowed this is all good there is nothing wrong in this one and when we use this one

7023.92 -> this method now get dbid I can go ahead and pass on a three here or I can go ahead and pass

7029.68 -> on a three just like this it is accepting all the values but the problem the problem here comes up

7035.12 -> with something when you try to do some manipulation with this one so let me go ahead and

7041.68 -> comment this out first copy this and comment this out and we'll actually go up here and paste

7047.84 -> 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

7054.64 -> kept for your purposes so that you can see what is happening but let's just say I take this id

7060.64 -> and I just apply a two upper or two lower case lower case like this why the squiggly line that

7069.92 -> is the point why a squiggly line because I have told you this is a string if I go ahead and

7074.48 -> remove the number squiggly line goes away but if I go ahead and put up a number and the fun part

7080.48 -> about the typescript is it knows so much so it if you hover this up it says property two lower

7085.36 -> case doesn't exist on type string and number so it is treating it is treating it not just as a

7092.56 -> number or as just a string it is treating it as a new data type that could eventually end up

7097.52 -> into a number or a string so both of them are a possible use case if you remove a number then

7103.28 -> it's fine that hey these kinds of methods do exist but you need to do a really strong check

7108.96 -> because right now notice here the parameter id could be string could be number could be really a

7113.2 -> problematic so if I go ahead and say that hey I'll just cut this out I'll first verify that what

7119.2 -> is happening so I'm going to go ahead and say use an if clause that if id or the type of id is

7129.6 -> equals to let's just say a string then I go ahead and do this then no squiggly line

7136 -> and if I go ahead and say id dot maybe what what the values of or I can just go ahead and say

7143.6 -> id plus two so it is totally allowed because it's a number so it says cannot be applied to type

7149.12 -> string so I've already checked it for string but it could be a number here so I need to verify

7153.84 -> that whether this is actually a number so we can perform the operations so here the squiggly line

7158.4 -> goes away and we can check it out similarly that it could be a number and then in case of the number

7164 -> then go ahead and perform the numbers operation but in case of this is how the lower cases then

7168.8 -> go ahead and just use that so really the same line of code but if you go up here the id here is

7174.8 -> or if I hover on this one notice here it just says now it is 100% string it's not maybe because

7180.64 -> you have put up an if condition and based on the if condition I'm 100% sure that if you are

7185.44 -> reaching this line number 30 that means you're already verified an id is 100% a string here but

7191.68 -> if I go ahead and try to put it up as number then it knows that this kind of a block is going to

7196.8 -> get enter only in the case when the id is actually a number so you get the idea that how this is

7202.32 -> being done needs to be a narrowing down of what the number type is that is basically your union

7208.96 -> narrowing and again there's there could be a lot of discussion around it but you get the point

7213.28 -> that you need to check it and verify the type if you're writing a better code in the functions of

7218.16 -> this one so really a vague example of how to get the id's but you get the point of how the union

7223.52 -> type is there it's not just simply a word that hey just add a pipe and do it it's more about how

7229.36 -> you implement those pipe in your code now with these unions we also can actually have a small

7235.04 -> discussion about the arrays because this is where actually it becomes a lot more fun so for

7239.6 -> 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

7244.48 -> and in that data we have seen that already if you want to have all the numbers so we can just

7249.2 -> simply say hey we do have number and this is going to be number of array or array of numbers

7255.04 -> and then we simply go ahead and say that hey I'll add up a values like I'll be adding one two three

7261.36 -> and let's just say I add a value of a four then it's a problematic because you cannot have

7267.84 -> strings because it's a array defined only for numbers so this is definitely not allowed you cannot

7273.92 -> do this and if I go ahead and say that hey this is going to be a string the numbers are not allowed

7280.24 -> you have to wrap each number with the string so then it is allowed but and let's just call this

7286.56 -> one as data to but if you want to have both of them then it's an interesting one so data three

7292.48 -> I don't want string I want numbers as well so I'm going to go ahead and say hey pipe and number

7297.68 -> and you see no error here like there is a smaller but I'll walk you through what this is

7304.56 -> this is a classic mistake that a lot of new typescript developer does because this is now saying that

7309.44 -> hey this can be either a string or a number so notice here a lot of people come up here and say

7314.32 -> that hey this and this removes the error this is a classic mistake this is a classic mistake

7319.28 -> the interpretation in terms of arrays in typescript this is is that it can be either all the numbers

7326.64 -> or can either all the strings so it cannot be a mixed match of let's just say three this is still

7332.08 -> not allowed this is not allowed so it can either be all numbers or all string the syntax or the way

7338.08 -> how you do it is actually you remove this and you wrap this up inside a parenthesis just like that

7345.36 -> and there we go now you can have both types in your array you can have strings and you can have

7351.2 -> number as well or probably you can add more as well maybe for some crazy reason you want to have

7356.56 -> all the values as Boolean as well let me just go ahead and award wrap this there we go now you can

7363.84 -> go ahead and add even a true whatever you like again this is a very very not thing to do but yeah

7370.72 -> a lot of people does that and also I've noticed a lot of people just when these kinds of situation

7374.88 -> happen they just go ahead and do any which is not going to give you any error but the whole idea

7379.68 -> of using the typescript is not just that here you remove all this quickly lines it's about

7384.4 -> how you're actually making your types more strict that is the goal behind that so I hope you

7389.68 -> remember that and there's also one more classic situation let me walk you through that you can

7395.52 -> actually allow some of the numbers to be very strict something like there's a pie and you want

7400.24 -> that it should always be 3.14 and then you try to allocate it a value of you can only allow to

7405.44 -> 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

7412.72 -> allowed so this is a literal type of assignment that yes this should only have this value or something

7417.68 -> like this this is not a useful case let me give you a useful case scenario where this could be

7422.64 -> really really useful maybe you're designing an application for an aeroplane so let's just say

7427.52 -> there's a seat a lot a lot mint and you want to have only three types of value to be coming into

7434.32 -> 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

7442.72 -> a window so this is really helpful and useful case scenario so later on if somebody goes at head

7448.96 -> and says seat allotment is going to be aisle that is fine but if somebody try to overwrite that

7455.52 -> with a seat allotment of let's just say somebody's giving you a crew seat which is specifically

7461.76 -> meant only for crew then it's not going to allow so yes there are use cases that it can be only

7466.64 -> three types really fast really quick can make your application really secure and less prone of the

7472.64 -> error so you get the idea how this is being used yes we can have a little bit more discussion

7477.52 -> about the union we can go further but I think all these use cases will help you to write

7481.76 -> bear code into the JavaScript or TypeScript let's go ahead and catch up in the next video

7486.16 -> hey there everyone if they share back again another video and welcome to the typescript series so

7491.92 -> now let's move into the typescript segment which is available only in typescript and not in in the

7496.64 -> JavaScript world and this is known as tuples and tuples there are a lot of names which people call

7502.48 -> it I usually call it as tuples and yes this is almost similar that is available in other languages

7508.32 -> that you might have heard and seen such as python but here this is not that much well implemented and

7515.6 -> that is the reason why I wanted to talk a bit about tuples in this video they are great they're

7520.4 -> fantastic I'll tell you a special use case where it can be used and I'll also tell you where you

7524.72 -> should not be using it and where you should be cautiously using it because there's a good thread

7529.6 -> in the stack overflow which you should really keep an eye on which points out some of the not

7535.2 -> so good things about the tuples and you should be worried about that so first let's see what tuples

7539.84 -> is and in broad category it's just an array a kind of a specialized array that is given to us by

7545.12 -> typescript with some restrictions on to it so let's go ahead and catch up with that one so let's

7550 -> just say there is a simple user that you want to create so how we do that we go ahead and say hey

7555.12 -> this is going to be a user and maybe this user is going to be a type of string an array our array

7562 -> of string and let's just call this one and let's initialize this one as simply saying this one

7568.32 -> is going to be actually simple like that or just a string both are same so this is okay this is

7576.08 -> no problem at all but let's just say you want that it should be a string and a number and a

7582.48 -> Boolean but in a very precise order that is the most important thing in a precise order you don't

7587.28 -> want that right now if I go ahead and do this this is obviously problematic because it's just a

7592.32 -> string and if I go ahead and say that hey it can be either string or a number but an array so I go

7597.76 -> ahead wrap this up and I say and say that hey this can be a string or it can be a number

7605.44 -> number there we go now I can go ahead and say hc and comma one that is fine but I also can go

7612.16 -> ahead and say one comma at see that is also fine but there are cases there are special situation

7618.16 -> where you want a specific thing into your array to be pushed on maybe that's an usually that's

7623.44 -> a usually an API call because the API structure data is always in a very specific format if something

7629.84 -> comes up first in the narrate that always needs to come up at the zeroth position and something

7634 -> that needs to come up at second position that always comes like this so there is no restriction

7638.56 -> right now in front of us and as you know this type script is all about putting more restriction

7643.12 -> in front of us or on top of that so let's go ahead and duplicate that so I'm going to go ahead

7648.24 -> and come on let's go ahead and duplicate that not like that looks like I'm forgetting the

7655.36 -> shortcuts okay alright there we go so the one way of doing that is actually converting that into

7660.8 -> us into a tuple so let me go ahead and do that and how we do that you can go ahead and simply

7665.44 -> previously we're writing everything outside of the array now if I go ahead and say that hey this

7669.6 -> is going to be a string and then it's going to be a number and then probably it's a Boolean

7674.32 -> so this is all what we have as a user as of now why are you yelling it's a redeclaration

7682.24 -> yeah probably because in my other files also I'm writing a lot of users so let's call this one as

7687.6 -> t user or small t user for tuple user and we're exporting why are you yelling at me

7695.04 -> 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

7701.6 -> ahead and try to declare that so we're going to go ahead and say hey t user and how can I add value

7706.32 -> to it I can go ahead and say the first element should be strings okay let's just say let's

7710.32 -> a first user or first value in the array string then we can go ahead and put up a number let's

7715.36 -> try one three one any random number and then I'm going to go ahead and say true so these are the

7720.08 -> three values that I've added up here it still is having an issue and again my pad come on

7727.12 -> let's okay now all good so now notice here there is a strong pattern here that says string

7734.16 -> then a number and then a Boolean so I cannot reverse this order I cannot just go ahead and say hey

7738.48 -> true is the first element then we are going to put up some number and then I'm going to put up a

7742.24 -> string here this is this is not why the tuple is there tuple is to make sure that even not just

7748.56 -> what is inside the array even the order of the array really matters in the case of tuples and

7753.52 -> especially very helpful in the case of API calls or maybe there is some database array which in

7758.08 -> which the specific order is there maybe some likes are there into your array and each of these

7764.08 -> likes are being inserted based on when somebody like so in that case you can go ahead and use that

7768.4 -> I know very vague example but yes tuple is all about restricting you so that you have an order

7773.76 -> of the data okay let me go ahead and walk you through so let me first fix this so there we go this

7778.96 -> is all happy and another case where you can use it a classic example which you'll find everywhere

7783.68 -> is RGB because that actually makes a lot of sense in case you want to have an RGB then this needs to

7789.68 -> be a number obviously we have something like 255 255 255 so all the three values should be number we

7796 -> don't expect that there should be fourth number probably for an alpha or the opacity you are not

7801.12 -> bothered about you want strictly like that so if you define a type like this then obviously you have

7805.76 -> to go ahead and have 255 and let's just say 123 and then 112 so this is a guarantee that always these

7812.96 -> numbers are going to be there for example somebody puts an opacity and say that hey we want an

7817.6 -> opacity of 0.5 then this is not allowed because this will say hey this is not how it is declared

7824.4 -> this shouldn't be like that and if you remove this you can see all happy now so one of the

7830 -> 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

7836 -> have to just put up a reference just like this you can define a type like this as well for example

7840.88 -> we have already studied type quite a lot so let's just say you're going for a user and that user you

7846 -> say that always comes up with certain thing like there is an ID and there's an email that comes up

7851.52 -> so now you have defined anything who is following or is a type of user needs to be exactly like a

7857.12 -> tuple or tuple and there it's going to be a simple number and a string always and always it is

7863.52 -> compulsory so for example let's just say we go ahead and say this is a new user which is a type of

7868.4 -> user and if we are going to follow this if the type is being defined then we cannot just go ahead

7874.48 -> and add anything into this there should be an ID and there should be an email so let's call this

7879.44 -> one as example at google.com so this is really important you cannot just go ahead and say that hey

7886.24 -> this is going to be a true no you are following a type here which is tuple and this is not a lot

7892.24 -> but there is something really wrong about the tuples so for example if I go ahead and use this one

7897.36 -> this is absolutely fine I can even go ahead and change this one so new user and I can just go

7904.96 -> ahead and say hey at first position of course I cannot go ahead and do something like this that at

7911.76 -> first position there can be a number not allowed to but make sure you are cautious about that that

7916.64 -> you can actually override that so yes this is totally happening depends on what version of

7921.92 -> typescript you are using so you can actually manually put some restriction via your code

7926.32 -> but right now there is nothing which is stopping me to override these values so it's not a guarantee

7930.48 -> that the values will never change it will change you can change it and that's it the other thing

7936.48 -> which is really controversial about the this entire thing is let me go ahead and comment this out

7943.2 -> or we can actually leave it no problem I can actually go ahead and say new user and if you notice

7948.4 -> it carefully just in array it just in array with the restriction that first value should be number

7953.04 -> second value should be string or you can say zero value first value you get the idea

7957.84 -> since this is an array I'm actually allowed to use all the methods of an array and now I can go

7962.48 -> ahead and say true and you might have obviously noticed it that new new user is now not following

7968.72 -> the protocol that we assigned it and by the term protocol I mean to say that what restriction

7974.16 -> we put up we what kind of a guarantee we put up with the tuples here that hey it should be number

7979.68 -> then a string and nothing else but with these methods I'm actually allowed to do so not great not

7985.2 -> great but I can actually show you something really interesting up here so there's a nice article

7990.8 -> here on the JavaScript section of the stack overflow so TypeScript array push method can't catch

7999.12 -> a tuple type of array and it's really long ago one year 11 month not long in terms of a programming

8005.52 -> language career but in terms of what what is this and this is a good question somebody try to

8010.96 -> rephrase it nicely that tuples are known for their length and where the elements may have a

8016 -> value so when you say number and string it is guarantee that you'll have only two length with

8021.12 -> first number at zero position will be number and a string but you can use push and push was just

8026.64 -> an example I used here you can use unshaved shift and that messes up everything and even there's

8032.08 -> a link to an article that hey how this is going on this was closed by Microsoft that hey this is

8037.6 -> how it is that's a great read if you try and give your five minutes of your valuable time then

8043.04 -> it's a really great thing to read about why this happens and all of that so really there's a lock

8049.6 -> and there's a great answer about the read only's and stuff as well but as a matter of fact yes this

8055.28 -> is all there but the fact is that still this is possible so make sure if you're using TypeScript

8060.16 -> and you are using tuples and are too much reliant on that this is not just this is something that

8065.6 -> can happen to your code base so I think this is all a good overview of the tuples and I think you

8070.08 -> will be cautious about that and let's catch up in the next video hey did everyone face your back

8075.12 -> again the other video and welcome to the TypeScript series and in this video we are going to talk

8079.52 -> about enams some people like to call it with its full name I'm not going to do it I always love to

8084.72 -> call it as just enams the full name is just math full I just love to call it as enams let me know

8089.84 -> in the comment section what is the full version name of the enams and how do we call it I would

8095.04 -> be really happy to see that how many people actually can put down a comment in this one

8098.88 -> okay moving ahead enams really crazy really awesome and I'll tell you the reason why I called them

8104.56 -> a little bit crazy at the end of the video so let's go ahead and create a new file and talk

8108.8 -> about them really simple there is nothing too much and this video is more than enough for you to

8112.96 -> understand why there should be enams and why is it helpful so let's just go ahead and say enams my

8119.28 -> enams.ts a new file is there and let's go ahead and do that now why enams exist now enams exist that

8125.2 -> there are certain times when you want to restrict somebody's choice or with the values that are

8130.56 -> offered here for example in an e-commerce application somebody is putting up an order so you want

8135.76 -> to really restrict the order status here so order can be in the wish list or it can be delivered

8142 -> it can be shipped it can be returned there are a lot of things similarly in case of plane ticket

8147.36 -> booking especially the aeroplane there are only three types of seats which are regularly

8151.12 -> available so aisle middle and window you don't want to assign them crew tickets or something else

8155.44 -> like that there can be thousands of cases like that the whole idea is how to restrict the user's

8160.24 -> choice in one easy ways to simply declare some constant so some something like I would love to

8165.6 -> do is I'll just say aisle I'll call this one as zero I'm going to go ahead and simply have

8170.8 -> an constant with the middle and that's going to be one and then I can go ahead and say this one

8176.88 -> is window and that is going to be two so there is nothing wrong with this and in later on case

8183.36 -> if you have a simple if-else statement you can just say if the let's just say there is a variable

8187.92 -> there is a seat and that seat is going to be simply you can go ahead and check up that if that

8192.56 -> is equals to aisle or something like that you can go ahead and do that yes of course this variable

8197.6 -> doesn't exist but you get the idea that how this is being done you can evaluate to either zero

8202 -> or something like that you can go ahead and say that hey I'm going to evaluate for zero something

8206.24 -> like this but what if somebody changes this variable not a good idea to be honest this is not a good

8211.76 -> code I guess there could be constant but in the case where you want to have three restrictive

8216.16 -> options in that case enums actually serves you really well and declaring the enum is really

8221.76 -> simple you go ahead and put up an enum and then we're going to go ahead and put up a simple seat

8226.24 -> choice really simple and then we're going to just put up the seat choice for example there is

8231.36 -> going to be an aisle there is going to be a middle and there is going to be a window now anybody

8239.2 -> who wants to use it can actually use it let's just say we go ahead and create a variable

8243.92 -> that hey this variable is a seat choice so let's just say that HC seat you're trying to refine or

8250.4 -> give me a seat from this one so I don't have to actually go ahead and do this I can just go

8254.8 -> ahead and say hey seat choice and I say dot and only three options are available this makes my

8259.2 -> code a bit more reliable so like that and maybe later on there is an international flight so there

8265.6 -> could be four seats in the one so I don't know what to call the fourth one but let's just say we

8271.04 -> call this one as fourth so I have to do nothing I and immediately I have moved my flight into the

8276.4 -> international one and I can put up a dot and all these options are given to me so there could be a

8281.04 -> lot of database cases where you want to provide more options maybe you're designing a navigation

8285.04 -> bar or a menu bar in that you want to have more options whatever you want to do you can actually go

8290 -> ahead and do that now the most important part with this one is how you can have this one now is

8295.28 -> you notice when I hover this one it says it's an enum member and the seat choice dot aisle is having

8300.48 -> a value of zero and this is by default and there are a lot of ways and notice this carefully there are

8305.44 -> a lot of ways how you can define this one default is always the first value gets zero then the

8310.56 -> subsequent value gets an increment number so this means if I don't like that hey I don't want to

8315.68 -> start with zero maybe there is some special code in my aeroplane that I don't want to call it zero

8321.68 -> I want to call it as 10 you can go ahead and do that now automatically for whatever reason you are

8326.8 -> evaluating it this is 10 and obviously the next value is 11 then 12 and then the 13 so this is

8332.72 -> totally allowed and you can go ahead and do that maybe you want to get started with any number like

8337.68 -> that so for some reason the middle is now 22 yes that is totally allowed it's not like you always

8344.08 -> have to go into the increasing order but notice here window always get 23 and this get 24 so you

8349.76 -> get the idea that you can actually put up a strict number and rest of the values will follow up or

8355.28 -> maybe you don't want to call this one as like this so you want to call this one as 44 maybe whatever

8359.76 -> the reason is so you get the idea how this is being done let me go ahead and remove this and another

8365.36 -> way of how you can do it is you can actually put up some values so for example you don't want to

8370.24 -> call it as I'll you literally want to call this one as I'll so you can go ahead and do that now

8375.84 -> as soon as I do this and notice here it says that hey enum must have an initializer why is it having

8382.8 -> an issue shouldn't be having an issue no worries it just is asking for a value so now we are moving

8390.88 -> ahead since we have actually mentioned that it's not numbered numbers are automatically being calculated

8396.24 -> now I need to go ahead and put up values for all of this one because I've I've broken the pattern

8400.88 -> that it's not there again I should be consistent and this one also needs to be window and window

8410.8 -> and this one and again it's not really compulsory that you put up all the values as you can put up

8415.04 -> hey this is zero so again the once you start putting up the numbers not the numbers the strings as a

8420.88 -> value then you can you always have to go ahead and provide values for all of them but surprisingly I'll

8426.08 -> let me show you one more interesting stuff I'm pretty sure that might be bothering you a little

8430.8 -> bit let's just say I just want to say that that is I'll but this one is three notice here this one

8436.16 -> says hey that is four and again a comma and this one automatically goes five so these are a couple of

8441.76 -> ways of how you can define that there is a lot of ways how you can read the documentation and find

8446.24 -> out that hey you can assign numbers and strings and all of that now the good thing about this is

8451.52 -> how the values are interpreted previously we saw that aisle is always interpreted as in a number

8456.4 -> value zero but what would be the inside the value of hc seat that is the most important in this case

8461.92 -> it would be a little string so if I hover this one notice here or in this one this one is obviously

8468.48 -> a type of seat but if I go up here this is a literal value of aisle and I can match that up with

8473.92 -> anything that I like so this is the most important thing about the enum really simple you can define

8478.56 -> functions around it you can define constants around it variables whatever you want to do it the

8483.6 -> most important part is of this one how to define them now there's a little bit more to it this is

8489.28 -> a little bit crazy thing to have it so let's go ahead and this is a great example so we're going to

8493.92 -> just copy this one and we'll save it so that you can have a reference around it and let me open

8498.72 -> up my chrome so let's just go ahead and paste it because it is also equally important that we see

8504.4 -> that what kind of code is being produced when we write this kind of typescript into the javascript

8509.2 -> just we can actually compile that at any given part of time but this is rather easier so you can

8513.6 -> see as soon as I declare this enum and if he is being designed or being created for me and if you

8519.44 -> don't know about if he go ahead and watch my playlist of javascript it's still one of the most

8523.92 -> valuable series on the internet and notice here this is an if he immediately invoked function

8530.08 -> is executed here and it gives me a seat choice notice here a lot of code is being generated for me

8536.32 -> 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

8540.56 -> going to see a lot of discussion around it on the GitHub of typescript as well as on the stack

8544.96 -> overflow and one solution that is being given is just use const and once you actually do this

8550.96 -> this doesn't generate too much of the code because see a lot of people don't like the typescript

8555.6 -> generates too much insane amount of crazy code for the javascript because sometimes maybe you

8560.16 -> want to directly jump into javascript fix some stuff that script is great but sometimes it's not

8564.72 -> that perfect it's not matured at some cases in that cases having too much of crazy javascript

8571.84 -> code is not good for you so in that case you can just put a const before the enum and this will not

8577.68 -> generate a leak crazy code this will just generate whatever is necessary for example in the case of

8581.84 -> aisle if I go ahead and just say call it as to the values being assigned as to here and if I go

8587.12 -> ahead and put it aisle that aisle is a constant being created so yes although you are using this one

8594.24 -> and you will be given options of choosing from restricted options but the final javascript code

8598.72 -> that is being generated for you is still a really clear and simple so again the moto behind having

8605.28 -> a typescript is having a restriction while writing the code but the code that is being produced by

8610.16 -> the javascript should be clean and beautiful and that is why there's a lot of discussion and a

8614.72 -> healthy discussion around the community which is good and which is not and I think now you're

8619.12 -> capable enough to take a participation in that that whether you like this iffy style of code and

8624.48 -> what is this the previous style of code we're declaring the constant so and again don't forget to

8630.48 -> put down the comment section the question that I asked you in the earlier of the start of the video

8634.96 -> and that's it now you know a lot about the enums and let's go ahead and catch up in the next video

8640.16 -> hope you have already hit that subscribe let's catch up in next one hey there everyone face

8644.64 -> here back again with another video and in this video we'll talk about interfaces in type

8649.12 -> script now interfaces are pretty cool in type script and yes I would 100 percent agree they sound

8654.32 -> exactly similar to type that we have already studied in the type script so they almost are

8659.52 -> identical and that is why it is required at least two or maybe three videos to finally understand

8664.48 -> where the interfaces are and why these are being so much used into the world of type script now

8669.76 -> before we move forward make sure you hit that subscribe button as well as forward these playlist

8674.64 -> entirely into your whatsapp group into your college group so that everybody can take advantage that

8678.8 -> would be really really beneficial for me and you pull of us let's move ahead and talk about

8684.48 -> interfaces let me take you on to my screen we have created a new file my interface dot ts and yes

8691.04 -> you'll find a lot of similarities between that so yes I do understand that part and we'll take

8695.6 -> care of what is the differences between them the worst part and all of that but right now let's go

8700.08 -> ahead and just talk about the interface so yes it starts with the keyword interface and let's

8705.12 -> just say let's try to assume a scenario you're creating a new user and this user has some of the

8710.88 -> properties like maybe email maybe a user ID maybe there is a Google login maybe maybe there is a

8717.12 -> database ID as well and you're trying to start a trial for this user for whatever the services you

8722.48 -> are you are actually selling and also you want to give him some discount code as well so this much

8727.84 -> of the scenario will help us to get an entire overview of how things are going to be there so

8733.84 -> I think that's a good scenario to understand the interfaces bit by bit and pieces by pieces

8738.8 -> so moving further let's just say we call this one as simply user feel free to call it whatever you

8742.96 -> like and we have a user so let's just say user starts with an email that is going to be a simple

8748.24 -> string and we'll be saying that you should also have a user ID and that will be a number

8754.56 -> all right and yes I do agree you might be saying hey let's go ahead and create a type of this

8759.04 -> and then call this like that and yep that also exists and that also works but we're not here for

8764.96 -> type we'll go through the differences between them in the next video but right now let's just

8769.44 -> jump back into interface that yes now interface is more like a scenario or kind of a like interface

8775.76 -> doesn't have those nitty gritty and details of how it will work but these are basic overview of

8781.76 -> that whenever you're creating a user these are the fill which are compulsory these are the methods

8785.52 -> which are compulsory now how you implement them that is so totally up to you but interface yes

8790.88 -> loosely you can say it's more like a class but yeah lose form of class very broad overview

8796.56 -> a very superficial view it will ask you it will force you that there should be a method the name

8801.2 -> should be the same but it doesn't say what should you do inside it it just has a basic protocol

8806 -> things that hey this is I expect this is of what is supposed to do but it helps a lot in the code

8811.44 -> and especially in the long and a really bulky code that this helps a lot so let's try to create a

8816.16 -> user so let's just say we create a user hiddesh and let's just define that that this is going to be a

8820.72 -> type of user as soon as I do this this creates a problem that hey hiddesh should be a type of user

8826.16 -> empty parenthesis nope that's not going to work because you are missing up email and the user id so

8831.36 -> 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

8839.12 -> we need a user id that will be to to one one whatever that is okay this is great this is really

8846.16 -> valid maybe let's just say user is also trying to log in from the Google and he does have a Google

8852.24 -> ID so we'll be saying Google ID Google token whatever that is but I'm not sure it might be not as

8858.24 -> compulsory there is a email and password login as well so you can obviously use these fields which

8863.44 -> we have used in the past as well so this is now optional you pass it great you don't pass it nobody

8868.16 -> is going to stop you and there are also read only fields which we have already seen in the past so

8873.84 -> read only can be something like db id so there is a database id you don't want to change it it

8879.6 -> should be number it's not optional so obviously you have to fill it so we're we're going to say that

8884.16 -> db id and that one will be a number so I'll be saying to do yeah that that's a database id now

8891.92 -> the advantage of the read only is same as what we have studied in the past hope you have watched

8896.08 -> that video so for example if I go ahead and say email that email is going to be let's just say I

8903.76 -> changed my mind and I say it's going to be h at the rate hc.com I wish I would have that domain

8908.8 -> but if I go ahead and try to manipulate any of the read only values for example db id and

8914 -> change it from two to two three three it's not allowed you get the idea this is really basics we

8919.04 -> have seen this and done this in the past as well now what makes interfaces really interesting is

8924 -> the definition of the functions and there are a couple of ways how you actually define it let's

8928.08 -> start with the trial user so we're going to say there is a start trial and you want to provide a

8933.68 -> method for that so start trial and there are a couple of ways how you define the method the first

8937.68 -> one is the boring one I don't like it much second one I like more so the first method is you define a

8943.6 -> name and then you say hey this is going to be a method there can be return type of void or string

8948.08 -> whatever that is let's start with a string so now as soon as you create a user type of hitesh you

8953.44 -> need to provide a method here as well that needs to be there so let's just go ahead and say start

8959.2 -> trial something like this and this needs to be a method that is compulsory you can now just go

8964.24 -> ahead and say hey for because it's it's not allowed it will pop you that hey when we are creating

8968.96 -> this this needs to be a function which returns a string as well so it's really easy to define that

8976.88 -> 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

8982.24 -> and there we go now only compulsory part on to us is to return a string so we'll be saying something

8988.56 -> like trial started that's it and that's pretty much it that's all it is right now and yes of

8995.28 -> course there could be more logic inside it but this series is not about logic building this is

8999.44 -> more about getting friendly with the type script now there is another way of doing this which is

9004.24 -> something that I like more because it's much more clear to understand I'll be saying let's just

9009.44 -> say trial and what you can do in this one is you can just put up parentheses just here and this

9015.84 -> makes more clarity actually to me that this is not going to be anything this is going to be always

9020.64 -> in method and then after that you define what type of data it is going to return it might return

9025.04 -> nothing it might return any badly any but you can just go ahead and say string now if I go ahead

9032.24 -> and try to return something like to it will say hey what are you doing you shouldn't be doing

9036.4 -> that you should be returning a string so yeah that is one of the way this is my favorite way but

9041.28 -> again let me know in the comment section which is your favorite way maybe you like it more this is

9045.28 -> more something that is making sense to you now last but not the least is remaining is the discount

9050.96 -> code so let's just say user wants to get a coupon so we're going to say get coupon these days it's

9055.52 -> a very sales tech to keep world so get coupon and coupon should have a name so let's just say we

9061.52 -> are saying coupon name and that name is going to be in the string and the return type is going to

9067.76 -> be a number number there we go now obviously we have to put up this method now get coupon and there

9074.72 -> is something really interesting in this one which type strip allows you to do is first let's get

9079.44 -> coupon and then again this should be a method which is going to return a number so let's just

9085.52 -> say we are going to go ahead and say return 10 because you get a 10% off but notice here right now

9093.68 -> you're saying hey you should take a parameter of string right now it's saying hey user dot get

9098.08 -> coupon so it should be a method so right now it's not popping us anything but in in technicality you

9103.68 -> should be providing a name which is a compulsory one you should always get that and I'm pretty sure

9108.8 -> by doing a little bit of the tweak settings and stuff it will yell at us now interestingly you

9113.2 -> should always provide a coupon name and let me show you something interesting I can just go ahead

9116.8 -> and say name and then I can provide something like this there we go with a stand something like this

9122.4 -> and this is allowed this is totally loud you don't need to match this name with whatever the name

9126.72 -> you are providing it is just a reference that hey you are providing a coupon name which should be a

9132.32 -> string and you should always provide that that is the whole idea you can go ahead and provide a

9136.8 -> value as well which should be a number and now it is expecting that there should be two values that

9142.72 -> you should pass on here now right now it is not giving you anything but you can just go ahead and

9149.12 -> see off and if I go ahead and try to put up something like string like this notice here it says hey

9155.68 -> you're not allowed to do so you can totally avoid it or if you're passing it up let's just say you

9159.92 -> 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

9165.44 -> done and again these are all compulsory parameters that we're passing on right now and this gives a

9170.88 -> brief idea of how to define interface again use cases always helps us to get things more readable

9176.56 -> but again interface is not done yet we need to have a little bit more discussion about interface

9181.84 -> you can easily get it confused with the types but yes these things makes it a little bit more powerful

9186.72 -> and one thing to note here one thing very important to note here strut tile is a method which

9192.4 -> returns a string it doesn't force me that how you are starting the trial and it is also making

9197.44 -> me compulsory that whenever you're using this hitage creating that there should be a method strut

9201.36 -> trial and it should return a string no matter what logic you put up I really don't care so this

9206.32 -> interface is always like an like an interface like for example your operating system is an

9211.28 -> interface for hardware it doesn't allow you that when you click a button how does it happen you

9215.52 -> don't know and you don't care about it you just know if I click on this something happens if I

9220.24 -> double click on a folder it opens up how it does behind the scene what methods are being called you

9225.28 -> don't care so that is an interface and that is exactly the same interface in the typescript as

9229.92 -> well let's go ahead and catch up in next video hey there everyone face here back again with

9234.4 -> another video and let's continue our discussion for the interface in the last video we saw the

9238.72 -> interfaces and yes we found a lot of similarity between interfaces and the type as well but the

9243.84 -> method that we are having here is a lot more difference we haven't discussed them earlier but

9248.8 -> this makes interface a little bit unique as well and in terms of more uniqueness interface also

9254 -> comes with an extension and some people like to call with fancy words like you can reopen the

9258.48 -> interface and all that that's nothing it's just adding more properties into this let me walk you

9263.12 -> through it will make all of the sense of what is reopening of the interfaces really not a big

9269.52 -> fan of the word reopening the interfaces it's just adding more values to the interface itself so let

9274.4 -> me walk you through so for example in the last video we worked on really having giving this user

9279.28 -> an email user ID Google ID read only IDs and couple of methods as well but later on maybe this is not

9286 -> something that you have defined maybe this is a library that you are bringing in from a GitHub

9290.16 -> or maybe somebody else has written a package and you like this package a lot but there was only

9294.88 -> one thing missing that this interface doesn't have and a simple this has a Google ID but this

9300.48 -> doesn't have a GitHub login ID maybe so you want to give that so in that case you can just go

9304.56 -> have and again this usually doesn't happen like this like once you are writing interface after

9309.92 -> that this is something that is stored in some files and these are file being brought by other

9314.56 -> developers or maybe other libraries so you can go ahead and just find out where that interface is

9319.28 -> and you can actually go ahead and write this user again it is totally allowed and now here we can

9324 -> say that I want a GitHub ID or GitHub token as well so I'm going to go ahead and say give me a

9328.16 -> GitHub token and that will be a string now with this you have you can also make this optional in case

9333.92 -> you want to but let's just say this is compulsory for us we are taking an input from the GitHub

9338.88 -> 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

9343.36 -> a GitHub token and that token is going to be a string so I'm going to say let's just say GitHub

9348.48 -> and of course with a comma so this is all good and you realize that yeah you don't have to touch

9353.44 -> this entire thing but you also get the entire functionality in your variable or a constant that

9358.88 -> you have declared up here so this is why a lot of people love it and during the interviews if

9363.36 -> there is a TypeScript specific interview people like to call it as reopening of the interface

9368.8 -> yeah I found it a bit mouthful as well but I think that's great now when advantage also that you

9373.84 -> get with the interface is inheritance that is something really great so for example you want to

9378.56 -> create an interface and you know that you want to call it as admin now obviously can go ahead

9382.88 -> and define the admin whatever you like maybe you like a role or something but one great thing about

9387.92 -> the admin is you can just go ahead and say extends and extends extends is a keyword and then

9394.48 -> you can use and you can say that hey I'm going to go ahead and extend it with the user so immediate

9399.12 -> you get all the properties that are there for admin but you also have that so you can now go ahead

9404.48 -> and call this one as admin and yes that will also work but since it's an admin there should be

9410 -> some role as well and it can be simply a string then you have to add it but maybe you are defining

9415.12 -> a role and there are some literal values you have a literal value of admin maybe you have a TA

9421.6 -> maybe you have something what else maybe a learner learner come on if I can type that that would

9431.36 -> be great okay learners so now you have to obviously give a role as well too if you are extending

9437.2 -> this so let's just say we have a role and in this case since this is a literal value I can just

9442.88 -> just go ahead and say admin this will not be correct this needs to be exact value then it will be

9447.84 -> correct so you get the idea how you can have it and by the way you can just put up a comma and you

9451.76 -> can just have another interface if you like that you can go ahead and call that we don't have

9456 -> another but you get the idea how this is being done really super simple super easy and that makes

9460.88 -> the whole of the interface so you can extend it you can inheritance it you can reopen and inject

9466.08 -> the values into it but also word of caution if your interface is you are naming it make sure

9471.92 -> any package or library that you have installed don't have that interface that you'll be messing it

9476.24 -> up entirely so make sure you don't do that and again I would like to bring in the documentation of

9480.64 -> the typescript as well so this is the small documentation and yes they also bring down this

9485.44 -> question that what's the difference between type LSS interface there's nothing too much I highly

9489.76 -> recommend you to read this paragraph up here so here they make interface and here they make type

9495.2 -> it says extending the interface goes like this you can simply say extends and then provide the name

9500.16 -> here that's fine in the case of type we have already studied it that there's an M person and then

9505.44 -> 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

9510.56 -> new field you can open this up anytime and do it and the type cannot be changed after being created

9516.4 -> this will obviously give an error so these are coming up directly from official documentation

9521.68 -> and this is where you should be trusting the most official documentation so I hope you get the

9526.48 -> brief idea of how these things are being done and I think now you have an entire knowledge about

9531.2 -> interface and again read a little bit more of the documentation they will give you more idea but

9535.44 -> throughout the documentation you'll find this point x and y yep there are great examples but I

9540.64 -> think more realistic example could help you to understand a little bit more so that's all about

9545.36 -> interfaces and let's catch up in the next video hey there everyone they share back again with

9550.56 -> another video and welcome to another video in the typescript series in this video we have so far we

9556.16 -> have already gone through with the basics of typescript how it works the basics idea how to generate

9561.28 -> a JavaScript file with it but now it's time that we move a little bit one step closer towards how

9566.8 -> it is being written in the production and there's not too much of drastic difference it just a setup

9571.84 -> and setup depends on are you using react angular view whatever there you are using anywhere you're

9577.2 -> using a writing typescript a JavaScript that's the same place where you can use typescript as well

9582.56 -> now again if you are if you have been into so far of the video series and you're still asking me

9587.52 -> that hey there is it going to be a series about typescript for react or typescript for view my friend

9593.2 -> you need to watch this series again typescript is not for react or view or angular is just a whole

9598.56 -> ecosystem similarly like if you ask me that hey JavaScript is it meant for react only or is it meant

9604.32 -> for jQuery only I would say you don't understand JavaScript if you're asking that the JavaScript is

9609.28 -> only used in react similarly if you ask typescript is only being used in angular or react that means

9614.64 -> you don't understand typescript still so go ahead watch the video again and I have already cleared the

9619.68 -> mindset of it in this video we'll be creating a similar typescript scenario where we'll see that

9624.64 -> how probably in the production you can write typescript and maybe you're creating a basic application

9629.04 -> with just includes JavaScript itself but you don't want to write core JavaScript you want to write

9633.36 -> more of a polished and protected JavaScript that's where the typescript comes in so we'll watch

9638.56 -> through with that scenario and maybe later on we'll see that how this can be introduced with react

9643.04 -> and other types that you can introduce so let's go ahead and try to string this up and we'll be

9648.32 -> going with typescript YouTube let's go into zero three and we'll be calling it as pure TS

9657.52 -> that not a great name but pure pure TS that would be great okay let's go ahead and open this up

9663.44 -> now the way how you do it is actually we have already installed typescript so TSC is already

9668.32 -> there so we need to actually initialize it and this is the first time that you are using a

9673.04 -> typescript like this so make sure you actually are following along with me this is a setup really

9678.16 -> super easy but make sure you go ahead and follow this up we have already got TSC which is a typescript

9683.68 -> compiler for us which is globally installed in this case so dash dash in it and you can see there

9689.28 -> are a lot of options available the one that we are going for is dash dash in it what this does is

9694.64 -> it creates a simple typescript config file in case you're using typescript with react or

9699.2 -> something and you're using pre boiler template for that it gives you a lot of options like that

9704.32 -> if I open up this TS config you can see that there's a lot of options for compiler projects

9709.68 -> what to disable what is the target right now it says ES 2016 and there are a lot of ES versions

9716.24 -> that you can target a library there's a whole lot of options we are going to talk about some of them

9721.36 -> what is your root directory what is your output directory and JavaScript what to allow what to

9726.8 -> emit what does the output file or output directory looks like there is a lot and as you can see there

9732.88 -> is a strict there's a lot of options and there could be a dedicated video just for these options

9738.16 -> and by the way these are the same options that you find on the typescript website so if I open up

9742.56 -> this typescript website and I go at the very top of it and I say the playground so these options

9751.04 -> actually are just here so when we say TS config yep these are exactly all the options

9756.48 -> that are available to us so yep these are the options we will probably talk about them in

9760.56 -> some other video right now just generating a TS config is good enough really we have not done

9765.44 -> anything it's just a TSC dash dash in it so really simple and really basic now obviously I want

9771.12 -> 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

9777.84 -> dash y so that it doesn't ask me too many of the questions so it generates a node package.json

9783.28 -> file again remember TS config.json is for TS config typescript configuration and package.json is

9789.6 -> for basically install any node package manager or npm or something like that we're going to create a

9795.52 -> couple of files so that we can actually work with that so we're going to go ahead and say index.html

9801.6 -> it's really simple to fill this up so we're going to go ahead put up an exclamation hit the tab

9806.16 -> it just fulfills everything that we need and here we're going to go ahead and load a script file

9811.76 -> and we'll be saying now what happens is you can directly go ahead and mention your type script

9816.24 -> file but what happens in the case of production is actually you have two folders so let me go ahead

9821.12 -> and say mkdir the first one is source and the second one is dist so dist is a short form for

9827.36 -> distribution these are the two folders that you usually find now source is where you write your

9832.16 -> code this is a kind of a common standard throughout all the projects whether that's angular or

9837.12 -> react or anything and distribution is something which gets on to the production and that is being

9842.08 -> served to the end user so here into the source we can just right click and create a new file and we

9848 -> can just go ahead and say hey I want to create a new file into the source this is going to be index.ts

9853.76 -> because that's where you write typescript and the distribution is where automatically the index.js

9859.68 -> is being created you can go ahead and manually create that or we can just go ahead and create a new

9864.08 -> file something like index.js usually you don't create it it is automatically being generated

9870.48 -> so we'll be working on that so this is the file index.js which you have to link up so all you have

9875.36 -> to do is create a script inside the body and we say that hey go into the distribution and index.js

9881.52 -> this is where all of your code is going to come in now technically you never ever write anything

9887.12 -> inside this test index.js this is supposed to be generated but this is the index.html where

9892.64 -> you actually point towards this file and rest everything that happens into your into your web page

9898.48 -> happens through the typescript itself but who is telling typescript that hey compile this file

9904.08 -> and produce it inside the distribution folder inside the index.js right now nobody nobody is

9909.92 -> telling that typescript that hey go ahead and do that so we have to go into the ts config

9914.96 -> and tell it that hey this is how it needs to be done and if you just go ahead at the very top

9920.32 -> and you keep on scrolling you you see there's a lot of things up here but there is something known

9926.24 -> as output directory if you scroll a little bit around line number 52 or just search for it

9931.68 -> this is where the output directory is being mentioned that hey where is your output directory

9935.28 -> hit control slash or command slash if you're on the Mac and this will uncomment this one so this

9940.8 -> will say that hey where should the output of this file and this should go up and we're going to

9946.24 -> mention that hey my output is going to go into the dist file here and I can just go ahead and say

9952.48 -> slash dist and I can actually go ahead and say dot slash it should be there suggestions are not

9959.84 -> there but anyways you get the idea how this is the dist is going to come up here now so far

9965.6 -> how we have configured is it's going to scan the entire directory here wherever the ts config is

9972.24 -> from there all of the directories the distribution the source everything will be scanned up

9977.12 -> and we'll search for any ts file it will be combined and wherever the compilation happens

9981.76 -> after that the final output directory is going to be dot slash dist where the index.js or whatever

9987.44 -> the name of our file is the same name file will be created yes there could be a lot of more options

9992.88 -> but we'll just go for this one as of now okay all right let's go ahead and now try to use some

9998.96 -> of the options so for example in this one we're going to go ahead and say hey I want to write some

10004.32 -> console dot log because that's how we start and we're going to say type script is here now as

10011.12 -> soon as I save this notice here there's nothing so we need to compile this type script file so let's

10016.72 -> go ahead and do that I can go ahead and say TSC and then I can go into the source and then I can

10023.36 -> say index and I can run this and this obviously creates everything inside the index.js itself

10031.12 -> this is not what we want we wanted to compile it a little bit better so we're going to go ahead

10035.76 -> and remove this this is definitely not something that I want I want index directory to be created

10040.72 -> inside the index.js so I'm going to right click and delete this one because this is not what I want

10046.08 -> now apart from this there is something known as with the TSC there are a lot of options here there's

10051.76 -> one option dash w which says I want you to run into the watch mode so this is going to keep on

10057.84 -> running the things and there is any change in the type script this is going to just keep on watching

10063.28 -> it and notice here now the console dot log comes here so there are a couple of ways when you compile

10069.2 -> it with that it doesn't look for the TSC on fig but when you actually put it into the watch mode

10074.4 -> then it keeps on watching and also watch it based on the TSC on fig Jason and try to run all

10079.44 -> these things there so this is right now our best friend yes there are a lot more configuration

10083.6 -> options we'll talk about them but right now this does my job now just to prove a little bit more

10088.48 -> to the point I'll stop this one I'm going to go ahead and right click and delete this file even

10093.28 -> which is in my distribution folder I'll move it to the trash we don't have that file now I have

10098.88 -> still a type script file which says console dot log type script is here still something like that

10104.96 -> and I go ahead and run it into a watch mode and it starts compiling it gives me index.js file which

10110.72 -> uses a strict and gives me a console dot log so that is great now all I have to do is start this

10116.88 -> index.html so I have to use some server for that so that it loads it up because right now if I open

10123.04 -> this up there is nothing wrong I can go ahead and open this up no problem at all but there's a

10127.44 -> difference between just double clicking opening up file and calling it as like a server running so

10132.24 -> that everything that's there runs on the local host so there are a lot of packages for that there

10136.96 -> is no shortage of packages I'll close this one and that is why we have installed this package.json

10143.04 -> so let's go ahead you can use node mon that is little heavy but still we'll do the job

10148.56 -> and there's also npm install there is something known as light dash server and yeah that is my

10156.08 -> extension actually helps me to find out if there is a package available for that or not and that

10161.2 -> actually automatically loads up your index.html you can go ahead and I click on this index.html by

10167.12 -> the way this is another way you can just do that or you can just right click and open it with the

10171.76 -> live server so both of the options are there live server or light server whatever you want to use let's

10177.04 -> just open this in the live server first and there we go this is live server if I open up this into

10182.96 -> inspect and into the console there we go I see that TypeScript is still here that is going to load

10192.32 -> up but another way which a lot of people love to do that I think this live server is still good

10197.68 -> enough that is again an extension you have to install but in case you don't want to for some reason

10204.24 -> then you can go ahead and say that hey into this package.json I can have a simple start script

10210.96 -> and here you can just go ahead and say hey I want to start light server now they will do the exact

10218.48 -> same stuff so you don't have to worry there we go all right so now all we have to do is in this

10225.28 -> case we are not going to be running it through the index.html so I'm going to right click and say

10230.4 -> stop live server and now the live server is stopped so that I can run the live light server

10237.68 -> ah mouthful confusing as well I can go ahead and say npm start and that also does the same thing

10244 -> it just opens up local or set 3000 previous one opened at up 55 000 but again the same thing

10251.6 -> whatever suits you whatever you think is the best one just go ahead and use that they both

10257.6 -> does the same job they both does the same job and in case you don't want to install any packages

10262.48 -> light server or something like that go ahead and just install an extension by the way this is how

10267.36 -> I installed it I just go ahead come up here and I say live server by rhythmic day live server

10274.32 -> seems like I am offline seems like my network is should be working on that shouldn't be like that

10280.32 -> okay when offline please check probably there is something wrong in my network connection

10286.08 -> but yeah this is the one so live server this is the one by rhythmic day that I used again repeating

10291.36 -> this again if you are using the live server just come up on to index.page link up your

10297.04 -> JS file right click and open with live server in case you don't like for some reason a live server

10303.12 -> you can use light server in that case you have to move into package.json and I have to say npm

10309.6 -> install light server create a start script and there we go and apart from this we will be opening up

10316.24 -> a new terminal and we will be saying hey TSC just go ahead and keep on running into the watch mode

10322.96 -> so that whenever I make any changes in TypeScript you first and come and consult to tsconfig.json

10330.32 -> and then whatever I write here you just go ahead and just follow that so if I go ahead and put

10336.24 -> up a duplicate I'm going to duplicate that come on looks like I forgot copy that paste that

10343.04 -> so TypeScript is here and we're going to say TypeScript is amazing save that I prefer not to use

10351.44 -> light server I don't think that's necessary I think I'll just go ahead and say right click and

10357.76 -> open with live server I think that is much more awesome and I don't need to install any packages so

10363.12 -> I'll just right click and say inspect and I'll say console and yeah everything is coming up one more

10369.76 -> thing I would like to do here is inside this head I would like to open up a style because I know

10376 -> this is painful and we'll be saying the entire body should have a styling which is going to be

10383.2 -> background color is going to be let's try a little bit of the grayish I think let's

10390.4 -> let's go ahead and use 313131 so save that and yep I know you're much more happier now

10396 -> so dark mode is is the way how to go forward so you get the idea how to do this this is a basic

10401.52 -> set of of how we can do it surely in the upcoming files we'll talk more about how the TS config

10406.32 -> works but right now we'll still talk more about the TypeScript and then we'll talk about the

10411.04 -> TypeScript configuration so I think now you're equipped perfectly to actually put up a TypeScript

10417.04 -> into production how this is being done surely there are more settings but this is a good start

10421.44 -> so hit that subscribe for that and let's catch up in the next one hey there everyone hit a share

10426.4 -> and welcome back to another video in the series of TypeScript hope you're enjoying this series

10431.52 -> it's late well over one o'clock in the night still all pumped up to make more videos

10437.84 -> so in the last video we saw that how we can simply put up a server of TypeScript and we can

10444 -> actually keep on generating the files in the JavaScript and we have set up almost like a production

10448.8 -> grade not exactly but very near to the production grade server where we can write TypeScript now

10453.76 -> through that server now previously we've been writing just the alone TypeScript file but from this

10458.64 -> moment onwards we'll be start writing things as TypeScript and we'll be learning classes with them

10465.28 -> surely we can go ahead and run these classes via the previous method as well you can just create

10470.16 -> an ordinary file and go ahead we do that there is no problem at all but I just wanted to show you

10475.36 -> that yes this is also another way so we'll be just closing all the files so index.html don't

10480.72 -> need package.json.tsconfig don't need index.js definitely we'll be needing that because we'll

10485.92 -> be creating some of the files so we're going to go ahead and let me also close this one because

10490 -> we don't need it right now so how do we create classes in TypeScript now the syntax is almost

10496.08 -> similar but there are some subtleties which helps you to avoid some of the like fallthroughs where

10502.32 -> you can fall eventually so let me walk you through it's really simple easy the keyword is same

10506.8 -> class and let's just say we are creating the same user that we have been trying to create so far

10511.44 -> with this course so there we go that's it and let's just say you want to create a constructor just

10516.72 -> like we do in the JavaScript classes so we do have this constructor and you can take any parameter

10522 -> into this one so for example you might want to take email and you also want to take name into

10528.08 -> this constructor then we simply go ahead and say hey this dot email is going to be email

10536.16 -> and apart from this this dot name is going to be name so this is classic JavaScript so far at

10543.92 -> least but this is not TypeScript and that's why you see a lot of squiggly lines up here on the

10548.4 -> email and all of that but this is yes a valid JavaScript there is nothing wrong with that so far

10554.4 -> but what helps you in the TypeScript part is obviously the types of the data and that's why

10559.84 -> TypeScript exists types for that so you have to clearly mention that hey email is going to be

10564.8 -> off type string and the name also maybe it's a number but in this case that's a string but again

10570.56 -> we have discussed a whole lot about the types and this is now the syntax familiarization but this

10575.68 -> is still complaining and you might want to just go up here and say hey this is going to be a string

10579.52 -> but this doesn't actually solve the problem it says hey this is not the property email does not

10584.72 -> exist on type so in order to avoid this kind of thing this is not the syntax which is given in

10590.16 -> the documentation of TypeScript the way how they recommend is to actually make sure that TypeScript

10596 -> is aware of the email in advance so this is really simple you just go ahead and say hey there could

10600.8 -> be an email which is going to be a simple type of string and there can also be a name which can

10607.12 -> be of any type but in this case we are going for the string so these two values will come up

10612.64 -> and when we take these values from a constructor it just says hey just take these values and fill

10618.88 -> them up into this line number two email so this dot email means I'm referring to the email which

10624.96 -> is mentioned at line number two so this is really simple that's how you do it now creating a syntax

10629.68 -> or creating an object from this class is really simple so for example you go ahead and create a

10633.76 -> hitage and that's going to be simply a new let's go ahead and user obviously this is not correct

10639.68 -> because we have to compulsory type that needs to come in the first one being email not email email

10646.64 -> and that email is going to be type of string if I can write that email yeah that's correct

10653.68 -> 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

10660.16 -> page so let me go ahead and world wrap this first so world wrap there we go so we've got this really

10667.92 -> basic one which is coming up and the most important part is since this is a constructor you don't

10672.64 -> have to say actually this name and email so this is something that you don't have to do you just

10677.12 -> have to provide the string the two strings that you can have and really we can just go ahead

10682.24 -> remove this one and this part as well and this will be all happy now there we go so really simple

10688.16 -> absolute basics that's how you do it now I will come back on to couple of stuff but first I want

10693.28 -> to show you the index.js so this is how the index.js this produces almost the same code and we can

10698.88 -> see in the typescript right now it's not reloading the browser but yeah a typescript is watching

10705.68 -> the file save and if I save this one again not here if I save this one it watches that and

10711.36 -> just produce the code so we can see that almost same kind of code is being produced here there is

10716.56 -> nothing magical and it's working exactly same but in the typescript world this is something which

10722.88 -> is preventing some of the off usage of the thing it always says that hey there should always be a

10727.68 -> string and we guarantee that this is all going to come up as a string this is already a string and

10732.96 -> that's why you are able to pass this up here so that's really really nice okay couple of more

10737.36 -> things that can come up maybe there is more parameter like for example there is a city

10741.84 -> and that city is going to be a string but you are not taking string come on string there we go

10750.96 -> and now notice here this city is giving you a problem that hey I user dot city string has no

10757.12 -> initializer so obviously if you are making a city and you're marking this up as a string then it

10763.68 -> needs an initializer because it's not a field we are taking in constructor I can mark this as

10767.84 -> totally empty now if you pass it on that's great if you don't pass it on it will not be worrying

10773.44 -> about that you can definitely go ahead and access that so I can go ahead and say user not user

10779.52 -> actually hithesh dot city and I can just access that it will have a value here but again I don't

10786.72 -> have to worry and also it also prevents me to add something like to into this one that hey you

10791.44 -> cannot actually add to into the city because it's a string so that's a little bit of the avoidance

10797.12 -> which actually doesn't happen at the case of java script so if I go ahead and add that as my city

10803.84 -> so I just say I add japor as my city then obviously you can go ahead and work on with that but

10810.24 -> there is nothing which is stopping me to come on here and if I go ahead and reload that there is

10816.24 -> nothing right now but I can go ahead and say not user actually hithesh dot city and I can go

10823.04 -> ahead and point it as three so yes that's really bad shouldn't be doing that but in the test

10829.52 -> script there's in the java script there is no control I can even come up here and can change it

10835.2 -> to something like hithesh dot city and I can make it for there is nothing which is stopping me but

10842.56 -> as soon as I save this this will be overwritten as soon as I save my type script so that's a

10846.56 -> safety concern I come up here save this and probably I need to write some lines so maybe I'll just

10851.68 -> change it to Delhi because the entire file is being produced if I save this yep as you can see

10857.2 -> this is gone now so whatever overwritten things that I've done in the type script they actually

10863.04 -> produce and render a new java script and new this type script helps me to avoid any things like

10868.96 -> that okay apart from this maybe you want to get a city as probably read only then obviously it

10876.32 -> will not allow you to change the city always and always going to be blank or maybe you want it

10880.88 -> to be always as japor great city but obviously some people might want to change it so in this case

10886.64 -> it says up nope you're not allowed to do so because it's a read only and that is the property we

10891.2 -> have already studied it in the past so again if I save this notice here nothing stopping me

10897.44 -> because the configuration is there that's why I'm allowed to serve but type scripts stopping me

10902 -> and you can configure it using ts config that if there is something wrong or there's something error

10906.8 -> don't even produce the java script code so that is what the powerful thing is but again you get the

10911.44 -> idea I'll comment this out you get the idea how it is really easy to write typescript classes

10916.72 -> pretty easy nothing too much of a heavy centric load here and let's discuss a little bit more about

10922.24 -> the classes but in the next video let's catch up there hit that subscribe hey there everyone

10927.2 -> face here back again the other video and welcome to the classic studio again and we're going to

10932 -> continue our typescript series in this video so the traveling is going to be less so expect more

10938 -> videos and we're going to continue the typescript series already we have covered a great

10942.48 -> in depth of the typescript now only a few topics are left which are mostly used

10947.28 -> and that is something which is likely a little bit common in the java script world as well as we

10951.6 -> have some shortcuts and some tricks with the typescript with some type safety as well so we have

10956.72 -> already gone through till the classes we have gone through with the basic overview of it in this

10961.04 -> video I'll show you some of the modifier keywords especially we're going to be focusing two out of

10966.08 -> the three which is public and private yes there is a one more we're going to discuss about that

10970.72 -> later on and we're going to discuss some of the shortcuts that you're going to find in other

10975.04 -> people's code one of the best way to learn programming is to look at the source code what other

10979.76 -> people has written in the same language and to understand how is it happening it's not about

10984.32 -> understanding the logic behind it it's more about understanding the syntax and the shortcuts

10988.96 -> and the file structure that they have followed so that is a good practice so anyways let's get

10993.28 -> started and let's talk something about the classes and the type modifiers in the typescript

10998.72 -> so let me walk you through so this is the example in case you have followed along with the series

11003.6 -> this is the example that we have been taking around and we have the typescript in our watch mode so

11009.28 -> that is also we have discussed quite in depth so this is a user class we have email and the name

11014.8 -> and we also learned about some of the modifiers like read only which can only be read and you can

11019.84 -> not actually set them up this actually gave us a bit of an error so if I go ahead and uncomment

11024.16 -> this this gives us as quickly line it says you cannot assign that we've already gone through with

11028.72 -> these modifiers really easy now one of the strangest syntax that we have studied is the constructor

11035.2 -> in the constructor we have these emails and name and we have to say this dot emails so that we can

11040.4 -> have already some of the emails being marked and these values can go up there now there are a

11045.44 -> couple of more things that we can actually go ahead now for example some reason you want the city

11050.16 -> to be not accessible here at all like right now if I want to access I can go ahead and remove this

11056.32 -> and I'm totally allowed to access it I'm not allowed to set it because it's read only but I'm

11060.4 -> allowed to access it for some reason you don't want it to be accessible to anyone so there we can

11066.24 -> go ahead and say we can have it as private and once you have this private it is marked as hey you

11071.68 -> cannot use because it's a private marked and it's only accessible within the class so for

11076.56 -> example if I want to access it somewhat like here I can go ahead and do it so I can go ahead and

11081.44 -> say this dot city I'm totally allowed to use that here because it's in the class and this class

11087.76 -> could be into a separate file is itself that is totally allowed for you now this also makes a

11093.44 -> conclusion that we also have another keyword lying around which is public so all these things which

11099.44 -> you haven't marked including name are automatically marked in the typescript world as public there is

11105.52 -> one more modifier we're going to talk about them in later on video right now we want to focus on

11109.36 -> this only now this is the basic you should always remember everything that you don't mark is public

11114.96 -> and if you really want to mark this this is a private now one strange thing that comes around with

11120.08 -> the private is let me just go ahead and remove this private from here and mark it up here you can

11126.4 -> mark it on anyone that's no problem at all but the problem is that this public and private thing

11132.48 -> is actually available in JavaScript as well so let me go ahead and say name it's not accessible

11138.24 -> but you could have also done that by simply saying something like this and this is a classic

11143.28 -> JavaScript and say this this is declared but never being read so this is something we already

11148.24 -> have as a private and there's a great debate in the typescript world that should we use this syntax

11153.36 -> or we should use a private something like that I found that the keyword private makes much more

11158.32 -> sense because it's much more clear much more easier to understand I prefer this way and in fact

11163.28 -> all the code that I've written is personally also has this modified keyword instead of that hash

11169.68 -> the only difference is the hash is actually a JavaScript world and the private is a typescript

11174.88 -> world there is no such thing as private in the JavaScript world so that is one thing you should

11178.96 -> always remember and should be aware of it now one more shortcut I would like to mention here

11184 -> because you should know about it now this whole thing is really clumsy and really big

11189.44 -> and the production grade code you will find less of these classes being declared like that

11194 -> I'll show you a shortcut way I'll duplicate this one and I'm going to go ahead and comment this

11198.48 -> out so what you're going to see that most of the professional people who write these code don't go

11202.96 -> like that maybe let's just go ahead and remove this they actually go ahead and use these modifiers

11208.96 -> and actually use them up here so what you can do is you can mark them as public you can make them

11214 -> public private whatever you like I want to make all of them public so I'm going to go ahead and say

11218 -> public and this actually produces the same code so that is why you'll see a lot of professional

11223.36 -> people actually write it this way and sometimes they actually write it like this and this so it's

11229.2 -> it means it's same just a syntactic highlighting syntactic sugar is there so yes a lot of people

11234.4 -> does that and you can see that this actually produces the same code this dot email and this dot

11240.32 -> a lot of people who write JavaScript hate actually to write these things this dot that this dot that

11245.04 -> so they love typescript because of the simple reason like this and you can actually if you have

11250.24 -> to make something read only then this is the syntax but maybe there's something more in the private

11254.8 -> you can go ahead and do that as a private as well so we're going to say private and what else is

11260.16 -> maybe user ID that is going to be of type strings so you can go ahead and do that as soon as I save

11266.64 -> this you'll notice that this user ID is there but since there is nothing which we are marking it

11272.08 -> as private or something we are totally allowed to use that so that's the basics and again there is

11277.6 -> a syntax it says constructor you need to pass on user ID as well if I go ahead and comment this

11282.24 -> out this is all happy now so you get the idea there's one more keyword there are a couple of more

11287.2 -> things we have to learn about this private method so that we are going to talk about in the next

11291.92 -> video let's catch up hey there everyone face here back again another video and in this video

11296.08 -> we're going to talk about getters and setters and they're almost exactly same as we see them

11301.36 -> in the JavaScript world in the typescript world they are also same but with some of the interesting

11306.8 -> thing and these interesting things are usually being asked in interviews when you mention that yes

11311.44 -> I do have an expertise in typescript as well so let's take an example let's move on to the system

11316.48 -> take an example of that and nothing too much to be worried about it's really easy so we already

11322.4 -> got this city so something like that and there could be a lot of use cases of these getters and

11327.52 -> setters one common let's just try out and again these are some of the basic examples that I'm going

11332.8 -> through let's just even design a method which says get apple email so maybe you're designing a software

11339.68 -> for apple and it doesn't throw away the email directly it gives you the random email or some

11344.96 -> email based on that so you can go ahead and provide a getters like that so get apple email in case

11350.8 -> you want to make a getter of that you just annotate it with a get keyword and that's it you make

11355.36 -> it as a getter and that's all now this get apple email is going to return a string and we're going

11362.08 -> to go ahead and annotate that so it doesn't do automatically things for us and notice you're

11366.72 -> right now it says a getter accessor must return a value so let's go ahead and return a value

11371.52 -> we're going to go ahead and say hey I want to return a simple string and that string is going to

11376.96 -> say something like apple and then we're going to use a dollar sign like that and we're going to

11382.32 -> say this dot email so you just append the existing email with the apple keyword in front of it

11389.52 -> maybe you don't want to do this maybe you want to generate a completely random email for that

11393.6 -> totally up to you totally your decision just want to make sure that this is now a getter

11398.96 -> and let's also do some setter example and show you something really interesting which is a kind of

11404 -> a gotcha moment for all the people who are getting started with the typescript so for example

11409.6 -> let's just say I come here and I design a private property here so this private property is going

11417.04 -> to be something like let's just say a course count so we're going to go ahead and say underscore

11421.52 -> course count and we're going to get started with a course count of one so whenever a user registered

11426.8 -> on your website he always gets at least one course maybe an introductory course on javascript or

11432.08 -> whatever that courses we always get started with that now this is already private that means I

11436.56 -> cannot access this outside of this class we have seen that already in the last video so that is all

11442.72 -> but you also want to design some getters and setters for this property so that if anybody wants

11448.32 -> to access this they are allowed to access it but not directly via that method which is a getter

11453.92 -> and also if somebody wants to manipulate that method it doesn't allow it to directly set that

11458.32 -> value we want to have some setters for it so let's go ahead and try and see that how we can

11462.88 -> actually do this really simple first and foremost we're going to design a simple getter for that

11467.6 -> so if somebody wants to access a course count we're going to provide a method just like that

11472.4 -> and we're going to say that this is going to return you a number okay all right really simple

11477.68 -> and all we're going to do in this one is we're going to say this dot underscore course count

11482.72 -> now this is a really basic getter that we have designed but there could be a more complex logic

11487.36 -> involved that for example you might want to check whether there's a unique ID or token is there

11492.32 -> in the user session and don't only we are going to return him back the course count there could be

11496.48 -> a lot more complex logic we are not worried about that we're focusing on the syntax in the series

11501.6 -> and all the hidden details similarly just like we have a getter we could have a setter as well

11506.4 -> and something interesting about the setter or voice obviously it starts with the set keyword

11510.4 -> and then we're going to go ahead and say that this is going to a course count but this time

11514.56 -> obviously you want to update it with some value so somebody is going to give you a course number

11519.36 -> and here comes the interesting part now this is not going to return anything so I'll say that

11523.76 -> hey this is a wide and just like that and or is here this says pop up that a setter

11528.8 -> accessor cannot have a return type of annotation so this is something which is an interview question

11533.68 -> that whenever you're making a setter so you cannot actually make it a wide you cannot make it

11538.16 -> other data type as well like number or anything no this is not allowed typescript simply wants you

11542.32 -> to have nothing here so this is a perfect setter okay because setter is accessing this property or

11548.72 -> whatever the property are mentioning it and setting some values on that so for example somebody

11553.36 -> is giving you so you want to have a simple if and else check statement so that if the course

11558.4 -> num is less than or equal to one we don't want to do anything because that's a default value so in

11563.6 -> that case maybe you want to throw a new error something like that and you want to say something

11570.72 -> like this give him an error that course count should be more than one so that's a basic error

11580.24 -> otherwise if that's not the case you might want to do more check or something but we all we're

11584.48 -> going to do is in this case is simply this dot underscore course count is going to get updated with

11591.12 -> whatever the course number you're designing so this could be any logic as complex as you want maybe

11596.32 -> also want to check whether the user who is updating the course count has purchased or not whatever

11600.56 -> that use case is what we are worried about is simply to have a getters and setter important

11605.44 -> part is in the setters there should be nothing that is the return type that is the basic now also

11611.12 -> one more thing which we didn't discuss in the last video we saw that there could be private

11615.12 -> properties similar to that there could be private methods as well it is very obvious but still

11620.64 -> wanted to cover this topic so let's just say you want to have a private method let's just call

11624.64 -> this as delete token so let's just see we have a delete token right now it does nothing but maybe

11631.28 -> for some reason we'll have a console log and it says token deleted so for some reason you want to

11638.88 -> only access this method why the class only so now if you go at here and try to access this

11644.16 -> method which is very obvious that if I want to say delete delete token this is not allowed

11652.56 -> because this is a private property and only accessible within the class very obvious we already

11657.84 -> know this one so this was just basic now this is a really basic let me summarize this getters and

11662.96 -> setters are pretty common just like you use them in JavaScript get is used to get any property it

11668.16 -> doesn't mean that you always have to get a private property maybe you want to get a public property

11672.24 -> why some method by adding some additional logic that is also totally valid and you can actually

11676.88 -> use that but in most use cases these properties are being accessed or these getters and setters

11682.24 -> are designed so that any private method can be exposed outside but with some additional logic or

11687.2 -> additional you can say some restrictions that you want to put up so that is why it is being used

11692.48 -> and it doesn't really mean that always there should be a getter that needs to be a setter as well

11696.4 -> sometimes maybe you want to just have an exposed property don't want anybody to set it up

11700.72 -> that is also the case so there could be one there could be both and in the setters the most

11705.04 -> important part is that there is no return type even if you try to put up something like void

11709.76 -> a JavaScript a TypeScript will yell at you and you should not be doing that in case somebody

11714.24 -> asks you in the interview yep that is the case that is how TypeScript is designed so that is all

11719.12 -> your getters and setters in the TypeScript really easy very accessible and let's go ahead and catch

11724.48 -> up in the next video hey there everyone face your back again another video and in the last video

11728.96 -> we saw about the public and private which are access modifiers yes there could be a lot of fancy

11734.88 -> names about keywords and stuff but the real reason why we call them as public private and there is

11739.76 -> another one which we are going to discuss in this video these are access modifier they limits your

11744.88 -> ability that can you access those properties or how you can access them maybe yes maybe no or maybe

11750.96 -> why a restricted ways and that's why we call them as access modifier so we have already seen

11756.64 -> that there is an access modifier so we have gone through with this one so there is a private one

11761.44 -> had a lot of discussion around it and when there is nothing written it that means by default it will

11765.68 -> be public you can explicitly mention that to get more clarity on the code but there is one more

11770.32 -> use case so what we're going to do is we're going to shrink down all these methods we are not

11774.8 -> worried about them so let's just say we again actually shrink the constructor as well

11779.2 -> okay now we can see that this is all good now there is a lot of time use cases about inheritance

11786.16 -> we have declared a class but you also want to use these classes as a parent for another class

11792.16 -> because a lot of functionality is already written and you want to just add a tiny bit of functionality

11796.24 -> into those classes in such cases inheritance is used so how do we do that in the typescript

11802.24 -> it's really simple let's just say we have a class of user and we want to create a subuser from that

11807.12 -> or maybe there is a family member in the user who also use your course access so something like

11813.2 -> that so we can go ahead and say this is going to be a subuser and since you've already defined all

11819.92 -> the functionality all you can do is use the keyword which is extends and this is going to inherit

11826.48 -> the parent class so you just mentioned the parent class so in this case that's a user so by default

11831.6 -> whenever you're going to create an object or instantiate the object with the subuser it actually

11838.96 -> acquires all the properties here but there's a problem it cannot acquire the property which is

11844.72 -> mentioned as private because remember in the last video we discussed that private when you mention

11849.68 -> the keyword private it can only be accessed within the class not outside the class so public is

11855.04 -> accessible in this class as well as outside or creating an object there is it is also accessible

11860.08 -> so what we can do here is we can go ahead and create something like is family so let's just say

11866.4 -> a family is also using this so this is going to be a simple Boolean and we're going to mark this

11871.52 -> as true so now we have a new property which is is family and that can also be accessed let's just

11877.2 -> you define a method which is going to manipulate this underscore course count so we're going to go

11884 -> ahead and work on with that so let's go ahead and try this out we're going to go ahead and say

11888.4 -> what should we name this one as change course course count there we go and this is going to be

11897.2 -> really simple method all it does is anybody calls that it just changes the course count so we can

11902.48 -> go ahead and say this dot underscore course count and we change it to four for some reason I don't

11911.12 -> know what the reason we are able to change that the notice here it says a property underscore

11915.44 -> course count is private and only accessible within the class I am a big fan of how these errors

11921.76 -> actually comes on the VS code especially with the TypeScript no match for that and the moment we

11927.76 -> change it up from private to another keyword we can actually go ahead and we have the public we

11933.68 -> have a private and we have a protected so we're going to go ahead and say protected the moment I say

11939.28 -> protected this simply means that this wherever you place it in this property or wherever this will

11945.68 -> be accessible in this class as well as in any class which inherits this class it will not still be

11950.96 -> available outside of this you cannot access it directly like hithesh dot something like that you

11955.28 -> cannot do that but here now it is accessible and yes that is your protected another type of access

11961.04 -> modifier there is no need to go and dig deep it further just remember wherever there is marked as

11966.48 -> protected it can be used in the same class as well as any class which inherits task that's all

11971.6 -> that's all you need to know let's go ahead and catch up in next video hey there everyone very

11975.44 -> sheer back again the other video and in this video I want to bring your attention towards interface

11980.56 -> again now that we have classes we can actually talk about interfaces now especially for the web

11986.56 -> developers it is little bit tricky to understand interfaces and they seem like why they do even exist

11992.64 -> there is no implementation of that there is no advantage of that but let me tell you something

11997.84 -> from my experience into working of ios development now this is exactly the same concept they kind of

12003.76 -> borrow it from the Swift or probably objectives objective C as well this is similar concept now in the

12009.52 -> world of ios app development there are a lot of protocols we the interface we call them in the

12014.32 -> TypeScript but in the world of ios development we call them as protocols now these protocols don't

12019.76 -> have the definitions they have just some protocols that if you want to do certain things you have

12024.8 -> to do this way and that is the only way you want to do it now these kinds of things are similar

12029.76 -> in interfaces so let me tell you the same example we are building a mobile app which uses the camera

12036.08 -> just theory again they which uses a camera and we want to implement that kind of a scenario in our

12041.04 -> application so let me walk you through with the same example of ios development into the world

12045.92 -> of TypeScript and it is so much easier to understand this way so let me walk you through so moving on

12051.12 -> to our i have created a new file which is second dot ts i'm going to go ahead and remove this one

12056.16 -> up here still in the watch mode so that's fine so let's just go ahead and say we want to define

12060.4 -> an interface now this interface says that just go ahead and take photo okay that's same now in

12066.88 -> this while taking the photo i think that there should be a couple of things that should be defined

12070.72 -> for example there should be a camera mode and this camera mode could be a string maybe there's a

12077.12 -> front camera maybe there's a back camera but whoever is designing a class that you can take a photo

12082.96 -> from your web application should always implement that these are the bare minimum basics we'll add

12087.92 -> couple of more properties similar to this for example we'll have a filter this filter is also going

12092.8 -> to be a string and maybe there is a burst mode burst mode or just burst photo burst and we're going

12099.52 -> to say this should be number and this is not it there could be more methods or functions and

12104.32 -> there could be a lot more right now we're going to get started with this much only so this is an

12108.72 -> interface now in your entire application no matter how or who is building it if anybody wants to

12115.44 -> create a feature of taking photos should always and always follow this interface how about that so

12121.6 -> let's just say an application comes up and it's an open source project that you're building up

12125.52 -> you have designed and everything is being worked out and let's just say somebody is building a

12129.28 -> fictitious Instagram so we're going to go ahead and say Instagram now as soon as Instagram says

12134.24 -> that I want to implement a protocol or an interface of take photo the notice here what happens

12140.88 -> this is the reason why interface exists it gives me an error and the errors are also precise

12146.32 -> that it is incorrectly implementing the interface that means hey if you want to take photo there are

12151.68 -> certain number of things that should always be there so if you are inheriting me not inheriting me

12156.8 -> it's basically implementing my protocol or my interfaces that means hey this is missing all

12163.2 -> these properties this should be there to take photos so let's go ahead and do that so how we can

12168.8 -> do that we can simply design a constructor and we can take all these properties just like that so

12173.6 -> there we go constructor is there now here I'm going to go ahead and say I'll take all of them in

12177.76 -> public you can take them in private as well know such a big deal but I'll say that hey I want to

12182.08 -> have a camera mode and that camera mode is going to be a string and we'll also take one more which

12189.44 -> is again going to be public the next one is filter filter that is also going to be a string and I'll

12197.92 -> also take one more so we're going to go ahead and say public and this one is a bus so we are taking

12202.72 -> five photos 10 photos in just a click how how much that is now if I go ahead and say this one is

12207.12 -> also a string notice it implements that hey you shouldn't be doing that burst is always a number

12212.32 -> it needs to be a number so as soon as I do this there we go now you're perfectly following a protocol

12217.52 -> to take the photo now what you do with those photos or how you take the photos that is not defined

12222.16 -> in my interface interface is something which never involves the definition it always in

12227.44 -> clients that these are must have things in order to have it let me go ahead and show you one more

12232.24 -> thing another class comes up and that class is YouTube it also wants to take photos it's going to come

12237.04 -> up with implements and we're going to say that hey we also want to take photo there we go now again

12241.92 -> same error same problem I'm going to go ahead and copy this constructor here as well but in the world

12247.68 -> of YouTube I'm not happy with this I want to have more information for example I want to take a

12252.88 -> simple public and I'm going to go ahead and say you know what we also upload short which is a

12257.84 -> type of string so you can go ahead and use this it's not going to complain that if you are doing

12262.8 -> more than what is necessary that is allowed but you cannot do less than what is necessary up

12268.4 -> there so this is basic now let's just say another interface comes up and it says interface

12273.92 -> and stories are getting popular everywhere so we are implementing an interface that says story

12280.08 -> whoever wants to utilize a story in their application should have a method that says create

12285.52 -> a story just like that and it should return something maybe a string maybe a number maybe

12293.36 -> wide whatever makes sense to you you can go ahead and return that now the thing is that if YouTube

12299.12 -> wants to implement take photo as well as wants to implement a story it cannot do it directly it has

12305.92 -> to adhere with the rules that are being provided so here it says hey you need to create this method so

12311.6 -> this actually needs to have a method with the exact same name create story so we're going to go

12316.08 -> ahead and say create story now what this create story does we really don't care it can simply go

12321.28 -> ahead and log the values that a story story was created or whatever that is now you can define it

12329.76 -> much more better that it can return some like photos or something if the for if the story is being

12334.4 -> created or maybe a video needs to be returned yes we can go ahead and implement that but this is the

12338.96 -> main how you provide an interface a guideline is provided in the TypeScript but if you want to do

12343.92 -> certain things this needs to and if you go ahead and change this like for example if this is a

12347.76 -> create story this gives a problem no no you cannot do this this bring consistency entire

12352.88 -> teenager code and that's what TypeScript is all about getting less error having more consistency

12357.68 -> in the JavaScript and that's why we use it I hope this class was interesting and if this was

12362.24 -> interesting hit that subscribe button and I'm going to catch you up in the next video hey there

12366.88 -> everyone if they share back again with another video and in this video we're going to talk about

12370.96 -> abstract classes in TypeScript I hope you're enjoying the TypeScript series if you're enjoying that

12375.76 -> go ahead share this out hit that like button subscribe if case this is something you want to

12380.64 -> consider and please do so your support because these content videos gets already very less attention

12388 -> it's your help that can help me to get more attention to these content videos which actually

12392.8 -> deliver some knowledge rather than just meta videos videos about videos anyways let's go ahead

12398.96 -> and talk about abstract classes in these in this particular video in order to understand abstract

12404.08 -> classes it is important that you understand interface first so by any chance the last video got

12408.64 -> skipped out from you about the interfaces go ahead watch that first then come back again now we

12413.84 -> will have a small comparison because in the TypeScript world and in the interviews as well

12418.08 -> interviews love to ask you about hey what's the use of these abstract classes if the interfaces

12423.28 -> are available and they are very very similar we're going to not only understand the difference but

12427.36 -> we'll have a very basic easier use case and just like you always know it's going to be super

12432.08 -> easy to understand there's just one classic difference you point that out you absolutely nail it down

12436.48 -> also we're going to understand the use case so let's go ahead and move on to the computer

12440.32 -> I'm going to go ahead and comment out the second dot TS because we actually worked on this already

12445.52 -> I've created a new file abstract class dot TS it's absolutely empty just created so that we can

12450.32 -> save some time about it and let's go ahead and try this out so what we're going to do is in the

12455.44 -> last one we actually worked on the interface and then the interface was implemented by any class

12461.84 -> remember the word implements this is only used for interface and the easier way to remember is

12467.12 -> interface implement so both start with size so yeah that's the easy way to remember now let's

12472 -> go ahead and try to create an abstract class and see how does it work so we're going to go ahead

12475.76 -> and create a class and we're going to call this one as take photo just like the same class

12480.48 -> that we created earlier so this is really simple I cannot go ahead and create something like this

12486.96 -> I cannot go ahead and copy this piece of code and just place it up here this is not a valid code

12492.48 -> so you notice it already in the very first this is not really an interface so this is not allowed

12497.44 -> I cannot have just the mention of these properties in order to mention them obviously know that I

12502.08 -> need to have a constructor we're going to go ahead and have a constructor just like this this time

12506.88 -> we'll use only the two of the properties that's easier one and we'll be using the shortcut for that

12512.08 -> so we'll be saying hey public give me a camera mode that is going to be a string and apart from

12518.72 -> this also hey public give me what should I have filter yeah filter is fine that is also a string

12524.96 -> string so this is okay completely okay as a class now let's just say if I want to use this class

12532.88 -> into my some another class so what I'll I'll be doing I'll be saying something like this class

12538.32 -> and let's just say Instagram is now it does it cannot implement it but it can extend it so this is

12544.72 -> the first difference between the keywords this is like having an inheritance here all right

12549.6 -> let's go ahead and use this take photo and we can go ahead and do this no problem at all now for

12555.44 -> a moment I would like to comment this out and first since we have created a class let's create an

12559.6 -> object from it so I can go ahead and say const I can go ahead and name it as hitesh that is going

12566.72 -> to be having a new and we can go ahead and say take photo this is completely valid and let's go

12574.32 -> ahead why is it having an issue cannot really clear blocks hitesh okay all right I need to change

12579.52 -> my name I'll call myself as hc that would be great and it says take photo let me go ahead and save

12587.2 -> this why is it having an issue with the take photo okay all right camera mode was not provided I

12592 -> get that so I'll be saying providing two strings into this one so the first one is going to be

12597.68 -> let's just say test second one is also going to be test and now it is all happy so this is

12602.8 -> completely allowed completely valid the problem actually starts the moment you declare this class

12607.6 -> as abstract the moment you declare it abstract now no new object can be created from this class and

12613.12 -> obviously it makes sense it makes no sense that hey we are creating a class we are not able to

12618.16 -> create any object from it's what's the point of having a class and that's exactly what the

12622.08 -> abstract classes is known for in the world of abstract classes these are almost like blueprint

12628.64 -> yes we have a blueprint like interface but in the abstract classes they are exactly the blueprint

12634 -> you cannot create an object from it it's the responsibility of the class who is extending it

12639.36 -> it's the responsibility that hey create object from this class so if I go ahead and move this code

12644.56 -> here to make easier we can go ahead and use instagram here and that is totally valid you can create

12651.44 -> object from the class who is inheriting it but that's the whole idea okay that's the first

12656.08 -> difference I think you got this one but this is not all there is a lot a little bit more to it

12661.28 -> we have also seen that in the interface we can create these method definitions so let's go

12666.56 -> ahead and try to create a method definition in fact I'll just copy this and we'll have this one

12672 -> all I just have a different one we want to have a different method we want to call it as get

12676.32 -> sapia sapia did I wrote it correct nope there yeah this is what this one is correct

12682.88 -> so we want to have a simple get sapia and I'll just say that hey this doesn't return anything

12687.6 -> this is just a void now notice here I say that hey this is get sapia it says function implementation

12693.44 -> is missing or not immediately followed this can be done if you just go ahead and call this one

12699.68 -> as abstract you can go ahead and say that hey this is abstract method that means I'm not going to

12704.16 -> provide you definition this is just a method I don't know how anybody is going to implement it

12709.2 -> but they need to implement it otherwise they're not following this abstract class so I have to go

12714.64 -> ahead and follow this one first I'll just go ahead and show you one more common way you're going to

12719.2 -> see a lot of code just like that so just like this and here while creating the constructor I'll just

12724.88 -> comment this out for a minute so that you can see what's happening so in the constructor I'll take

12729.44 -> couple of properties so I'll say hey public I want to take camera mode camera mode that is going to

12738.64 -> come up as string let's have a comma move to the next line and this one also much more readable

12746.08 -> I'll also take public I'll be saying hey give me a filter as well which is going to be a string

12752.96 -> and since this is a additional or advanced class inherited class this also takes burst photo

12759.04 -> so we're going to go ahead and say burst which is going to be a number number this is going

12764.88 -> to create a problem in your case because if you want to take a constructor like this you have to

12769.6 -> actually use a keyword super in which you have to pass on all the required values so required

12774.96 -> values are camera mode so let's go ahead and pass on this camera mode directly here and I'll

12779.52 -> also pass on filter so this is a common syntax you're going to see that's why I have introduced

12783.44 -> this to you all right so this is all good now let's come back on to the part where we were

12788 -> discussing about these abstract so Sapia obviously not implemented so you have to implement it so

12793.52 -> all have to come up here and say hey I'm implementing a get Sapia I don't know what this is doing this

12798.64 -> don't have to return anything so we're going to just do a console log and I'll say

12803.84 -> Sapia okay Sapia there we go so you saw that how we can do it now

12813.12 -> you might have noticed that in the interface also we can define these things so what's the point

12817.76 -> of having these abstract classes in addition to that what you can do is let's just say these days

12822.88 -> reels are really really popular they're getting very popular so I want to say get real time I want

12829.44 -> to define the method and this method is going to return you a number and then further down we will do

12836.16 -> some complex calculation and after doing a lot of calculation we're going to go ahead and say hey

12845.68 -> we are returning eight or whatever the number is you get the idea how we are doing it so notice

12850.8 -> here this doesn't give me any problem here this is the power of abstract classes and this is

12855.84 -> something that makes them still in the in the realm of the script otherwise everything else is

12861.68 -> being done by the implement and this interfaces so this is what it makes something new I can go

12869.04 -> ahead and create an object just like this and that is fine it needs another value the value is

12874.88 -> let's just say three and now I can go ahead and say hey Etsy wants to get real time I can go

12881.92 -> ahead and use this and that's totally allowed and valid and in fact I can go ahead and overwrite

12887.36 -> this method as well if I want to so that is totally allowed as well because it's just a class

12892.72 -> and it has that feature so this is what's something that makes abstract classes so again

12898 -> going through with the summary of it you can make abstract classes abstract classes cannot create

12901.84 -> their object on their own but they help to define the class who are inheriting them get a better

12908.16 -> structure of their classes and some compulsory thing that you have to put if you want to put up

12912.16 -> some method that are compulsory lead to there you can make those methods are abstract as well in

12916.32 -> case you want to give them some feature by default by giving them the methods you can go ahead and do

12920.48 -> that these classes can actually overwrite these methods as well but if you want them that hey

12924.88 -> this should be like this only always then use the abstract method so I hope you got this one

12929.6 -> pretty interesting discussion about the abstract classes I hope you have enjoyed this if you

12933.04 -> have enjoyed this hit the subscribe button and I'm going to catch you up in the next video hey

12937.2 -> there everyone they share back again with another video and in this video we're continuing our

12941.2 -> typescript series and we are moving ahead on to one of the another really important topic which

12946.8 -> is known as generics I personally love generics when I'm writing a lot of production level code because

12952 -> generics is one such things which makes your components reusable and by the time component I mean

12957.68 -> to say all of your functions even your arrays are generics behind the scene so it is really important

12963.04 -> that you understand also it is also important that you don't pick up the word whenever I say

12967.76 -> component it doesn't means it always have to be a react component or tailwind component component

12972.72 -> is a broader term it simply means there is a chunk of something it can be a tailwind chunk it can

12978 -> be a reaction it can be just a function so understand that point now let's go ahead and move forward

12983.12 -> into understanding the generics I'll first walk you through with the documentation part because it's

12987.68 -> important that we all learn how to read the documentation and find out some of the example which

12992.32 -> floats around all the web but these examples actually come from the documentation and after that

12996.96 -> we'll understand a bit of the array and we'll design a couple of these generic methods and

13001.84 -> we'll understand what kind of problem they're trying to solve so without a further deal let's go

13006.16 -> ahead and move on to the documentation part so here I'm on to the web page of the typescript

13012.08 -> where official documentation happens and on the left you can easily find the generics really

13016.64 -> easy to find there is nothing much you can see just the type manipulation generics just there

13021.52 -> so as we can see up here a generics are a major part and also notice the vocabulary that they

13027.36 -> also use is building components that not only have well-defined and consistent APIs but are reusable

13033.6 -> and again API is something that you can ignore right now which is just an example they're trying

13038.32 -> to give here so component is something which is capable of doing something more than it was

13043.04 -> original design and almost all languages have them C sharp Java so if there's a lot of languages

13048.88 -> which actually support these generics a pretty common thing these days but it was such a ground

13053.68 -> breaking at the earlier days now there's a nice example we'll recreate these examples but notice

13058.72 -> here what they're trying to show you in these examples so it says without generics we would either

13063.52 -> have to give identify identity function a specific type so what they're doing here is they have

13068.72 -> created an identity function and they're providing an argument which is a type of number and which

13074.24 -> also returns the number when you do a return of arg which is whatever you're passing into that

13078.56 -> method it returns you the number so this is obvious we have been doing this but if we want to

13084.24 -> design this function such a way that if it takes string it also returns a string so we have to

13088.72 -> say that arg string then the return type is a string and when you return the string so we have to

13093.2 -> define the function for each data type Julian string number and if you want to bypass that you

13098.4 -> want to design a function such a way that whatever the data type you actually send it it also returns

13103.52 -> that data type so one way or one common thing which comes to mind is always hey let's use any which

13109.52 -> is not a good idea always it's such a breakthrough that you always want to get away from the things

13114.64 -> using any here we can definitely use any but it actually removes some of the information from the

13121.36 -> from the argument that you're passing for example I can accept any argument and return any

13126 -> but what if I give you input as number and you return me back as a string it will still work so

13131.92 -> this is not something that we want so in that case this type actually comes up which has these

13137.92 -> angular brackets and this is something which denotes the generic type and there is a lot that we

13143.12 -> can discuss about generic we'll come back onto the documentation a little bit later but right now

13148 -> let's go ahead and open up VS code show here is my VS code and let's go ahead and create a new

13155.84 -> file into the source and we're going to call this one as my generics dot TS of course and let's go

13162.64 -> ahead and see that what kind of problem we are facing and how actually this problem is not really

13167.04 -> big and already being solved by something so let's just say if I go ahead and create an array and

13172.4 -> notice here there are a couple of ways how you can create array we have already seen it once but

13176.48 -> this is a common way of creating array but we have also seen that you can go ahead and create an

13180.16 -> array like this and then using these angular brackets you can mention that this array is going to

13185.2 -> have a value number and we can store this into anything like for example this could be a score

13191.2 -> of any game that you're playing so this is scored like this and not that there we go and we

13197.04 -> have defined its type and now we can say that this is right now empty but eventually things will

13202 -> come out into the definition so this is one of the way and again we can actually go ahead and

13207.28 -> further improve it we can go ahead and design the arrays something like this so you get the idea

13211.92 -> there is a string as well and we can go ahead and store this into let's just say we are going to

13217.2 -> have some names so these values can be also like this so you get the idea that generics is not

13224.32 -> something that we are designing in the language they are already in the language in fact most of

13228.32 -> the language do support arrays with different numbers and different strings so yes this was

13233.04 -> already existing there we just didn't talked about it now we're going to go ahead and talk about

13237.28 -> it and we're going to design the method version by version so that we can reach there and understand

13242.24 -> what is the use case of that so I'll keep them here so that you can have just for the reference

13247.12 -> so let's use the same example we're going to have identity identity and we're going to call

13253.84 -> this one as identity one because we're going to create multiple identities here so let's first

13258.64 -> understand what is the challenge that let's just say I want to create an identity such that it accepts

13263.84 -> either a number or maybe a Boolean as well so we have already seen that we can go ahead and do

13268.16 -> this we can go ahead and define the type as let's just say Boolean is there and we can use this

13273.12 -> or and we can go ahead and say you might be having a number as well and in the return type also

13278.4 -> we can go ahead and say that we can have something like we are going to return a Boolean or that can

13286.16 -> return as a number or a string whatever you like so this is perfectly valid code and I can go

13291.84 -> ahead and say return a value now there's a lot of confusion here so if I go ahead and say return

13297.76 -> well it can be either a number or it can either be a Boolean I can go ahead and do the check whether

13302.8 -> the type of the value is Boolean then go ahead return a Boolean if the type of number is a

13308.72 -> number go ahead return a number we have seen that kind of example in the past but this doesn't

13313.12 -> actually cut through the problem that we are facing it doesn't work for a string surely we can

13317.28 -> go ahead and use or and how many odds you are going to use there now we saw in the documentation

13322.72 -> that we have identity to let's just say and here we saw that we can take a value and that can be

13330.64 -> any which is really a horrible keyword it is therefore escaping some of the tricky situation

13336.72 -> but it shouldn't be used much and we can go ahead and use any and we can go ahead and say I want

13341.92 -> to return this value again the problem remains same TypeScript has no idea what the value is

13349.04 -> comprised of and the definition or the information about the type is gone in this case so we can go

13354.88 -> ahead and see that yeah this identity to is eat also not working so let's move on to the version

13360.4 -> which actually is the topic so which is going to be identity three and in the identity three what

13366.8 -> we are doing is we first go ahead and put angular bracket now this is super important for the syntax

13372 -> and we go ahead and define a type here now once we define a type here into the identity three then

13377.6 -> we can go ahead and take the parameter and this is a little bit weird syntax I'll give you on that

13382.16 -> no escape from that part no sugar coating there and we can go ahead and say this value is going

13388.32 -> to be of a certain type and the return is going to be also of type okay now interestingly what is

13395.2 -> going to happen after this one is now you can go ahead and return and return this value now the

13401.04 -> difference between the one where we say value of any is this could be anything and this also

13407.92 -> could be anything so we can take any type of value return any type of value take number as input

13412.72 -> return as a string not a big not a good idea now but when you say mention the type it actually

13418.32 -> says hey this is almost like any I am ready to accept numbers I am ready to accept string whatever

13424.16 -> you like so how is it different from any because once you actually pass on anything that value type

13429.68 -> is logged yes for the reference or understanding purpose this is easier to understand so whenever

13434.48 -> I give number as an input this is hey the number is the input type that is coming up so the value

13440.32 -> you are accepting is going to be of number but the return type automatically becomes a number so

13444.56 -> that is the advantage of using this for example if I go ahead and say hey I want to use identity

13449.84 -> three and while the identity three I'm going to go ahead and pass on a number three here the notice

13455.84 -> here as I say it says hey the value that you are giving me is three and it is going to return as

13462.48 -> three value but if I go ahead and wrap this up as a string it automatically converts that hey you

13467.84 -> are taking three as an input but I'll return you as three as a string so that is the advantage of

13472.56 -> it if I go ahead and say hey this is going to be a fish then you go ahead and check it out by

13476.8 -> hovering it says hey it is giving me a string I'll return you a string not only that you can go

13481.2 -> ahead and say that hey I want to go ahead and give you a true value and it is going to give you

13485.76 -> a boolean as a back so you are locking that value that is the most important aspect of it

13490.24 -> and this is something that you're going to see less this function definition type like this

13494.96 -> how most people like to define it is a bit of a shortcut one so I'm going to go ahead and say hey

13499.2 -> this is identity four and then you go ahead and see angular bracket a t capital version and then

13505.6 -> whatever the parameter you take for example value you go ahead and define the type as t and then

13510.96 -> 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

13515.44 -> not t a valve there we go now this again is exactly same as line number 12 to 14 this is exactly

13522.64 -> a replica of line number 18 to 20 the only difference is calling it as identity three or four

13528.4 -> now this is shortcut it doesn't mean it always have to be types or t you can call it as simply

13533.52 -> as h every places that's also totally valid but it needs to be referenced the same letter that

13538.4 -> you're using or a word that you are using so this is really basic you're going to see them a lot

13543.6 -> being there now the advantage of this identity four or something like this having this data type is

13549.04 -> you can actually define your own types and can pass on into this one it's generic anything can

13554.08 -> be passed on to it this one so for example let's just say we define an interface of this bottle

13558.96 -> so we're going to go ahead and say hey bottle interface bottle there we go and your bottle can

13566.24 -> have anything that you want for example it will it is going to have a brand which is going to be a

13572.4 -> string and also let's just say type there are a lot of types of bottle this is a gym bottle so type

13578.64 -> as gym and not gym actually this is again let's just say a number I don't know why the type should

13584.32 -> be anything like that but this is it now you can go ahead and use this function exactly like this

13589.04 -> so we can say hey I want to use identity four and I'm going to go ahead and pass you a type of

13595.84 -> 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

13601.76 -> ahead and say I'll be using a bottle and then I'll pass you on you and object like that so this

13607.28 -> is totally valid of course I'm not passing an object which is missing the parameters of bottle

13611.76 -> and brand and type which you can actually do that if you're following around the series but this

13616.08 -> is a way this is a syntax how I can pass on now the data types that we saw here are actually the

13621.84 -> default ones like the old fashioned numbers a string you can directly pass on them but if you are

13628.24 -> trying to create your own then you have to use this syntax this is really little bit weird but yeah

13633.76 -> eventually you'll get a get a hold of it and this is so as you can see genetics actually solves a

13639.12 -> great deal and is really reusable and we can use them a lot let's go back up here onto the documentation

13645.68 -> so this is exactly what they have mentioned in the documentation that you can have the identity

13649.6 -> and can pass on my string up here and working with the generic type variables this is how they

13654.48 -> actually go ahead and work on with that we have already gone through with these and we'll definitely

13658.8 -> discuss a little bit more about the generic but to be honest this is only the meat part of generic

13664.16 -> as you work through with the react or angular you'll find that we use them a lot and sometimes

13668.56 -> methods are defined this way so let's keep this short I hope you have understood the basic core

13672.88 -> concept why genetics exist and how we can use them and let's go ahead and catch up in next video

13678.72 -> hey there everyone face here back again with another video and in this video I would like to

13682.4 -> discuss and extend the discussion about the generics in the type square now generics are really

13688.48 -> simple but for a beginner who have never seen them especially in the type script the syntax with

13693.44 -> different data types can be little bit confusing especially when it comes to array and how the array

13697.92 -> return type works so I would like to bring you on to the documentation of type script we'll give you

13702.96 -> some reference example from here and then we'll move on to the code part and we'll walk you through

13706.72 -> that how the arrays works as well as a small brief introduction about how the arrow functions can

13712 -> be used so far we have been creating functions in the type script just using the function keyword but

13716.32 -> that's not all you can actually go ahead and use your arrow functions and I'll show you the

13720.88 -> syntax for that in case for those people who are confused about it so moving back on to the

13725.68 -> documentation we opened it up in the last video as well we see that just above here we can see that

13731.52 -> this is all what we have discussed that the property length and all of that so this is all good

13735.6 -> now here the examples in the documentation are referring that you cannot just use a dot length on

13740.8 -> any of the parameter because it's not a guarantee that it's always going to be an array it could be

13745.36 -> string it could be just a number and on number we don't have the property of dot length so this is

13749.28 -> all what it is saying an interesting part comes up here on this part where we are taking input

13754.56 -> parameter as an array so this is one type how you can take input parameter as an array and this is

13760.24 -> also at type how you can take input parameter now both of them are exactly same we have seen that

13764.96 -> in the last video that there are a couple of ways how we can define arrays and the second one

13769.12 -> is also a type and the first one is also a type but when you actually go ahead and try to build

13774 -> this it can be a little bit confusing at some of the situation let me walk you through with

13778.08 -> so let me take you to the code part and we are going to define the almost exactly same this

13782.64 -> example up here so let me move to the code part all right so first what we're going to do is we're

13787.52 -> going to learn that how we can create or take an input as an array and what could be the possible

13792.24 -> cases of when we are returning some values so let's just say we're going to create a method which

13797.04 -> says get search products any you're searching a product doing an API call and through that

13804.56 -> things are coming in so we are going to define this as a generic so obviously this is the first

13809.28 -> part of how you define generic this is a template this is how you write it just like you write

13814.56 -> arrays with the square brackets this is how you define genetics so far we haven't defined what

13818.88 -> types of input we are taking what type of return type we are taking this is just basics this is

13823.36 -> how you define it with an angular bracket and t then comes up is the parenthesis and in this you

13828.32 -> define that what data type you're expecting in this one so let's just say somebody is giving us

13832.8 -> a product or a list of IDs whatever you want to take that's that's sort of just a generic name

13838.24 -> and then I'm going to go ahead and say that hey I am taking t as an input but this is not an

13842.32 -> ordinary input I'm taking array as an input now if I go back on to the documentation part we have

13847.12 -> seen that this is how you take types as an array but I can also go ahead and use this array type as

13851.84 -> well so both are exactly same now here's the interesting part the return type is also t and

13857.2 -> let's go ahead and try to return something now there could be a many cases that what you want to

13861.76 -> return maybe this is a search result you want to return the search index so in that case I would

13866.4 -> love to return a three which is not correct in this case because remember I told you this

13871.68 -> actually locks the value whatever the value are taking as an input so if I return that same type

13877.04 -> of value as an output this is not correct if you want to do something like this you obviously

13881.28 -> should have done something like the return value is going to be number which is an index but in

13885.68 -> the case where you want to have the t then you have to return the product itself and again remember

13890.8 -> this is an array so I have to say that hey whatever the products are coming up into that one value

13896.72 -> should be there there could be now three value so you're returning the third index which is fourth

13901.04 -> value so this is totally valid and totally fine but remember you have to think from a broader

13906 -> perspective this could be easier for a lot of experience programmer but this could be little tricky

13911.04 -> for somebody who is just getting started with types kids so remember the return type is the value

13916.48 -> that you're taking is an array of t types so the return value here I'm mentioning is t so that

13921.36 -> should be one of the value from that array okay got it okay let's go ahead and make this a little

13927.12 -> bit better so what we're going to do is we do some do some database operations and then we go ahead

13936.72 -> and define a value so we go ahead and say my index is three maybe after returning a lot of

13942.32 -> complex operations a method calling this comes up so we go ahead and call this one as my index so

13947.36 -> you get the idea how this is being designed so this part is all clear now how we can convert

13952.4 -> this exact same function into an arrow function because this is where the syntax comes up and this

13957.84 -> is where when you see or read other people's code on the GitHub you might find some things confusing

13963.68 -> so let's go ahead and clear that up so what we're going to do is we're going to call this one

13967.52 -> as simply const and we're going to call this one as get more mode get more search products yes you

13978.4 -> can pick up any name that you like now here we go ahead and define this so what is the syntax

13983.12 -> for defining a generics in a arrow function method it's really simple you first go ahead and

13987.36 -> define your t just like this remember this is an indication that this is going to come up as a

13992.8 -> generic so just like here we did the generic this is exactly what we do here after that we put a

13998.56 -> parenthesis any arguments are there or not then we provide a return type and then we go ahead and

14003.68 -> write our definition so before the definition this goes like this there we go so this is the basic

14008.64 -> syntax of how we define the arrow function this is little bit new otherwise if I go ahead and

14014.72 -> remove this this is a classic arrow function we have seen this many many times so in this case we

14019.36 -> are going to go ahead and say that hey this is a generic arrow method this is where we take the

14023.76 -> reference and after the colon we define the data type and then we go ahead and put an arrow

14028.48 -> function and the definition really simple nothing much so here also we want to define exactly same

14033.52 -> so we're going to go ahead and say hey products and we want to take products as an array so this

14038.08 -> can be of any type of array and the return type is going to be t it could be number but in this

14044.96 -> case I want to replicate the exact examples so we go ahead and do that we go ahead and say do

14050.72 -> some database operations and then we go ahead and say my index and this time the index is going

14060.8 -> to be let's just say four we are we are feeling very creative there and we go ahead and say return

14065.92 -> and then we go ahead and say hey products this time we're going to be returning my index again

14071.6 -> so get the idea this is easier but you have to look through the big picture up here so again

14075.6 -> if I go ahead and remove this one this is a regular function it could take numbers so I can go

14080.88 -> ahead and say hey this is numbers array and I'm going to return a number obviously I have to tweak

14086.08 -> the definition according to that but you get the point at how this is being done so really simple

14091.44 -> you have to look through the genetics as like yes this is also a data type and this which is a

14096.32 -> strange looking thing is a syntactical sugar okay so this is the basics what they have tried to

14101.12 -> define and once you are taking the input as an array then obviously through the arguments you can

14105.04 -> use the array properties which are available to them like length and all these things so further

14109.6 -> down we have generic types as well so they also walk you through that how you can create generic

14114.16 -> types which we've already seen and all of that so we'll talk about that a little bit later but

14118.8 -> this is the most important thing now one last thing before we close this video you're going to see

14123.04 -> a lot of code bases like this and this is not going to produce any error now this comma is there

14129.04 -> to mention that this is not an ordinary tag like h1 tag or a p tag this is a generic and this is

14135.28 -> a common syntax you're going to find this a lot especially people who are working with react

14139.68 -> they like to use these generics and they put this a comma here to mention that this is not a

14144.24 -> JSX syntax but rather a syntax for generic so keep that in mind you'll see this comma quite a lot

14150.56 -> in the code basis if you're reading other people's code so that's it for this video if you're enjoying

14155.04 -> this series hit that subscribe share the series this is really important when the value content

14159.36 -> comes up we need motivation that people are sharing the entire playlist and series so that we can

14163.92 -> come up with more that's it for this one let's catch up in next one hey there everyone

14168.88 -> if I share back again the other video and this is one more video in the generic topic now yes generic

14175.12 -> 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

14180.56 -> JavaScript developers that's why I'm taking my time to explain this all in depth and we can find

14185.44 -> out all the nuisance that it can probably create while understanding it if you're watching this

14190.64 -> video directly go ahead and watch last two videos because that are foundational base of the generics

14196.64 -> this video will not make much more sense if you haven't watched them so moving further so we

14201.12 -> have a small topic remaining up which is definitely one of the major one is classes that we are

14205.84 -> going to cover in this video but we'll cover more over the syntax part of it and some of the use

14210.16 -> cases of it but rather one more part that is being shown up here let me walk you through with the

14214.56 -> documentation it says using the type parameters in generic constraint this is something really

14219.52 -> important you need to understand the mindset behind this instead of just focusing on the syntax

14224.72 -> or memorizing it or something just understand why does it actually belong here on the very first

14229.68 -> place so let's try to understand the confusing documentation first and then I'll give you a

14234.64 -> simpler and easier example on to this one so it says you can declare a type parameter that is

14239.84 -> constrained by another type parameter okay got it for example we hear we'd like to get a

14245.52 -> property from an object given its name we like to ensure that we are not accidentally grabbing a

14250.72 -> property that doesn't exist on object so this time the developer is a little bit panning that I

14255.92 -> really want to have objects and nothing which looks like object or is not an actual object so here

14261.68 -> we say is get property and it's having a type and the key extends to the key of type so what this

14269.2 -> is doing so we can actually use an extends keyword and you can make sure the extends allows you to

14274.4 -> have a specific type of this one is this data as well now yes there could be a question that if

14280.48 -> we are that much panic why can we just say that this value that is coming up we can mention the

14285.2 -> type as object yeah actually you can do that there are a lot of ways of doing the things and this

14290.56 -> is what makes people a lot of confusing so instead of going through with the confusing

14294.4 -> documentation let me take you on to the code screen and show you that how this could be achieved

14299.12 -> so coming back on to our first example that we discussed that we want to create something

14303.2 -> like this where there is a function which takes two values that could be any values Boolean

14308.8 -> number or anything we don't want to use this syntax so that's where generics actually helps us

14313.76 -> so let's go ahead and say that this is another function feel free to name it anything much

14321.12 -> better than what I'm trying to do up here but we want to create a generic this time we'll take

14324.96 -> two inputs so you guessed it right this can be T and this could be you so UVN number of values

14330.64 -> that you can provide us as many as you wish to have now further this this is my type where I'll

14336.16 -> take the parameter and this is my return type so I'll say that what return type we want to have

14341.2 -> a return type of maybe an object so I'll just say an object just like this so right now returning

14349.2 -> not returning any object that is fine but important part is what I'm taking as an input so

14354.88 -> 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

14361.2 -> doing here is I want to return this so how I'm returning this I'm going ahead say that this is

14366.72 -> 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

14372 -> 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

14377.84 -> returning this object don't know why but I'm actually returning them both of them so value 1 separated

14382.96 -> by comma and value 2 so this is something which is a syntax you have learned new that there could be

14389.68 -> T there could be you there could be V as many as you would like to take as an input this is fine

14395.12 -> but there is something in this that let's just say for example you want to use this method so

14400 -> I'll just say that this is a function another function sorry this is another function and in the

14408.08 -> another function I want to say that hey this could be 3 and this could be a 4 but in a string

14414.56 -> format this is now expecting the values and it is taking them while you that's why the generic

14419.92 -> values exist but there could be a situation where you can go ahead and say hey this is going to be

14426.16 -> extends and we're going to go ahead and extend the number now it gives us a problem that hey

14431.28 -> strings are not allowed this could be a number or any type of number if I go ahead and say that

14436.16 -> hey this could be 3 or this could be 4.6 yes this is allowed because this is a number but again

14442.24 -> this defeats the point of having the generic yes you agree I would agree on that part

14447.12 -> but where this could be used first I hope you got this much and then I'll show you a real

14451.36 -> world use case scenario where this extends actually matters a lot so I go ahead back on to the

14456.48 -> documentation and I see that yes this is what exactly we are trying to do with the help of extends

14460.96 -> keyword but this is a bit of a complex example so it's not easier to understand so this is exactly

14466.88 -> I hope now by looking at this one you see that yeah this is making a little bit sense not much

14471.44 -> maybe but this is making a little bit sense okay let's go back onto the code part and show you

14476.16 -> something more interesting now let's just say this method is defined and there is an interface

14482.16 -> so let's define the interface let's call this one as database and this is a database interface

14488.48 -> there is a connection string into it which is a type of string and string if I can write that

14496.48 -> and there is also a username which is also a string there is also a password that is also a

14503.36 -> string so maybe you're defining a custom method in which you want to take that you could be

14508.32 -> anything but it should be a type of database so in that case you can actually rely that

14514.72 -> hey anything could come up here or I want to define a generic which actually go ahead and say

14520.08 -> extends database so in that ways you are although defining very generic but you are still

14526.4 -> restricting it that it should be a type of database yes there could be another way of handling

14531.36 -> this exact same situation but since time script offers us a lot of options I want to show you all

14536.16 -> the options and now obviously I have to go up here provide an object this object needs to have all

14540.8 -> the values like connection username and password you get the idea and yes you get also the idea

14547.28 -> that we could have directly said that this value should be of type database that also exists

14551.76 -> that can be there just wanted to show you couple of use cases maybe this might be useful in the

14557.04 -> complex thing that you are designing so wanted to introduce you with all the situations okay now

14562 -> there is one more thing up here which I wanted to first discuss in the documentation which is

14565.92 -> the last topic we'll be discussing about generic surely there could be more but you can also

14571.2 -> define class types in genetics so notice here they are creating a couple of functions here just like

14577.68 -> that it's fine but there is a class here which says B keeper then there is a zookeeper then there

14583.6 -> is a animal which B extends the animal there is a there's a lot of going on in this example

14588.72 -> and what they're trying to do is create an instance and all of that so yeah a lot of stuff not

14593.28 -> to really create example what they could have given in the classes and I'm pretty sure somebody might

14598.48 -> have written a better log on to this one let me take you on to this one so here what we're going

14602.88 -> to do is we're going to take an example of selling a courses and quizzes so these are two

14607.28 -> sellable items that you can sell and you want to create a class in which there could be a quiz there

14613.68 -> could be a course and you want to create some methods which work for both of them because both of

14618.88 -> them are sellable so let's go ahead and try this out so let's just say there is an interface and

14623.84 -> let's call this one as quiz now quiz is not that much complex it has a name which is a type of string

14631.12 -> and maybe there is a type as well there are a lot of types of quiz a quizzes for IIT quizzes for

14637.52 -> coding there could be a lot so this is one sellable there could be another interface where we could

14643.76 -> have the course and course is a little bit more complex maybe there is a name obviously there is

14650.4 -> also an author involved in the course just like books these days courses are authored and there

14656.72 -> is also a subject don't know why but there is a subject in the course not in the quiz and now

14662.88 -> you want to create a class which is not going to be one shot all it's not going to be class which

14666.72 -> will solve all of your problems but there could be a case where I can create a class which can handle

14672.8 -> some of these common cases let me show you by an example so I go ahead and say call this one as

14678.4 -> a class which is going to be sellable sellable yeah if that is correct or as a spelling I want to take

14686.56 -> that in this class I'm creating a genetic class the moment you see genetic function or anything like

14691.68 -> that these square bra these angular brackets and the t or any keyword there is a sign that this

14697.68 -> is a genetic class this is a genetic function and in that class you can take any type of values up

14704.08 -> here for example I just go ahead and say hey I want to create a public card which is available to

14709.84 -> everyone this is going to take the same type but an array of that and will initialize it with an

14715.76 -> empty one you get you see where I'm going with this one so now I have this card which is a type of

14722.08 -> 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

14728.4 -> a class which handles all the courses array or all the quizzes array or maybe later on you decide

14733.04 -> to have bundles as well so whatever you are thinking it can actually go ahead and work on with

14736.96 -> that now it's not a one-shot all but you can define some method like add to cart and this method

14744.16 -> maybe may take a lot of products so we are going to call this one as products

14751.2 -> products come on if I can write that and these products are going to be of type t you get the point

14757.6 -> and now I'm going to add these products so I'll just say this dot cart dot push and inside that

14766.64 -> we are pushing up this product so let's go ahead and say products or product would be better

14772.08 -> product you get the idea so this is a generic class which can handle any type of object that you

14779.44 -> can pass it on and can do operations on that remember in this class we are taking t as generic

14784.4 -> here so it's not limited to just quiz and courses there could be more or you can design more

14790.8 -> and I'm not with this you should take this statement that I'm not saying that this class is going

14795.6 -> to be one rocket for all this is not a bullet this is not a silver bullet which will handle all

14800.4 -> the cases but maybe maybe you can define certain classes which handles quizzes nicely certain

14806.32 -> classes which handles courses nicely but there could be could be one of the genetic class which

14811.92 -> might handle the common use cases in both of them and maybe also a future proof where you add more

14817.04 -> products which are sellable can handle those things as well so yes it actually helps you to write

14822.64 -> bigger code for a bigger projects in a much smoother way and much organized way so yes there's a

14828.56 -> lot of things we have learned about genetics I hope you have enjoyed this one if you enjoyed this

14832.8 -> hit that subscribe button and I'm going to surely catch you up in the next video hey there everyone

14837.2 -> face here back again the other video and in this video we're going to take a little bit of a different

14841.84 -> approach now whenever we are learning about programming or maybe building any stuff we usually

14847.2 -> think about the topics as these are the problem this is how we are going to get solution for

14851.76 -> example in the arrays we cannot store multiple values in variables so we use arrays in order to

14857.2 -> loop through the values we use loops but there are some examples with which are business case

14862.16 -> logics and there is no problem or solution kind of approach in them these are general cautionary

14867.92 -> stuff that you should know about it and I'll walk you through with some of the documentation and

14872.48 -> some of the use case example we'll be referencing directly from the documentation so that in case

14877.12 -> you need further information you can refer to these documentation so without a further deal let's

14882.16 -> go ahead and get started with that so we'll start with the typescript documentation directly from here

14887.68 -> and here if you closely look at this we have almost covered a lot here in fact almost all chunk has

14893.6 -> been covered the basics every day but there is also one thing known as narrowing this is marked here

14899.68 -> because there's a key important difference and this is something which is useful quite a lot if you

14903.92 -> click on this now this is where you try to narrow down what kind of a type or data type you are

14911.28 -> having in your variable for example it could be number it could be string there could be lot more

14917.36 -> the problem actually comes up is finding the type of the variable so let me just go ahead and show

14923.28 -> you by clicking on the inspect and it's not a problem for type script it's actually a classic

14928.16 -> JavaScript issues and yes even on their website also sometimes these stuff happens so nobody's

14933.36 -> 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

14938.88 -> know that this is a number if I go ahead and use a string I go ahead and it simply shows me that

14945.04 -> this is a string the problem actually comes up when you try to give it an array so if I go ahead

14949.68 -> and give it an array of numbers it gives me an object which can be little bit troublesome and

14955.12 -> problematic in that matter of case now also you'll notice that this type of is actually challenging

14961.6 -> in programming if you go ahead and use the empty string then also it gives you a string

14966.64 -> but again the literal null values are also objects so yes there's a little bit trick involved

14972.16 -> in the JavaScript and this is not something which is problem this is something that is the behavior

14976.88 -> of JavaScript and you should be aware of it and why we are talking about this so much up here

14981.28 -> let me show you with a code example that will actually make much more sense so in the detection

14985.92 -> dot TS we are going to be learning about some of the cases where you might want to be extra cautious

14990.96 -> and that's the whole video is all about so let's just go ahead and say hey this is my function

14995.28 -> I'm going to go ahead and say detect types and type would be great and I'm saying that the value

15002.4 -> comes up now this value could be a number or it could be a string now based on this if I go

15010.72 -> ahead and say hey I want to return the val dot to a lower case I'm not allowed to do so because

15020.32 -> right now there is no mechanism to 100% guarantee that this is an actual string where I can use this

15026.88 -> method this could be any right now because it could be a number it could be a string so right now

15031.92 -> the val is in kind of a state where it could be anything but again we can go ahead and write

15037.76 -> cases in fact we have learned about these cases that I can go ahead and use the statement that if

15042.32 -> the type of type of val is actually a number then I can go ahead or maybe let's just say we

15052.96 -> are going to go ahead and stick with the same example if it is a string then I can go ahead and

15057.04 -> say val dot to lower case so this is the value I want to use in this case this there is no problem

15064.16 -> the problem actually starts to come that you have checked the type and you have also checked

15068.56 -> you have said that hey this is going to return let's just say val dot value of there is not too

15077.12 -> much of the number so but I can go ahead and say a plus 3 so this is also totally valid so right

15082.32 -> now cannot be applied to a string because if it is here it should be number but still this is

15088.8 -> saying that hey we haven't checked it so probably want to check it out we have to make a similar case

15095.44 -> and we can go ahead and say return and then we can go ahead and say if this comes up here we can

15102.88 -> go ahead and say val plus 3 this should be all good now it is returning so it will reach to this

15107.84 -> point of code only and only the case when it is 100% sure it is number but there could be more

15112.88 -> things there could be more things here checked for this one but what about the case where it could be

15117.92 -> a number array so that is where the problem actually comes to start so I'll just not do it here

15124.24 -> but this is not something where you have to keep on checking for each one of them you have to

15128 -> be very cautious in writing the business case that there could be a number of arrays but we cannot

15133.12 -> go ahead and check that as an array we have to check that as an object so this is the most important

15137.6 -> case now there is also a similar case I'll just create another function and again these are all

15142.88 -> cautionary tales so make sure you pay attention on the caution not what could be the solution there

15148.24 -> could be a lot of business solution so for example this is a common case where we say provide ID

15154.8 -> provide ID why are you having issues implementation is missing okay no problem

15161.68 -> where somebody gives you an ID and that ID is a type of string and we go ahead and write the

15168.64 -> definition and we go ahead and say that if the ID is there or not so this is a common example

15176.8 -> where we want to find certain elements from the database and maybe there is no ID being provided

15181.84 -> in that method so in that case this could be a string but this could also be a null and again

15187.36 -> this is a cautionary tale so this is something that you might be doing quite a lot of time in your

15192.32 -> 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

15198.4 -> go ahead and say something like a console log that says please provide ID and we can go ahead and

15208.4 -> return the method here and if this is all good then we can go ahead and say that hey we did some

15213.92 -> classic database operation and after that we are returning ID with two lower case or something

15218.96 -> like that you get the idea that how this is being done now this is something not magical and this

15223.44 -> is not something which is related to TypeScript this is a simple code that you have been writing

15227.44 -> quite a lot in JavaScript but this is a code which is appreciated and even being highly considered

15233.6 -> that you should be writing because here this could be null and this could be string the reason for

15238 -> showing this is just like you're considering this as a null and you get extra cautious similar to

15243.84 -> here you should be extra cautious about the data type that is multiple in the format so make sure

15248.72 -> you treat null as anything like as a string or a number and you provide extra cautious here now

15254.16 -> there's one great example in the documentation let me show you that so where is that example

15260.48 -> and let me go ahead yeah here it is so notice here they give you a lot of similar example that it

15266.96 -> could be string and numbers and whatnot and you could also use the type of and all these things

15272.24 -> the thing which will catch your attention is notice they call this type of as a type guard so

15276.88 -> yes another fancy name for interviews but it is nothing more than that if you'll read the entire

15281.28 -> documentation which I have gone through line by line this is all they are saying just use the

15285.52 -> type of for making an extra guard about what type of variable is coming up instead of calling it

15290 -> as type of they call it as type guard another fancy name nothing more than that so this is all what

15294.8 -> they have now they also provide this one example here which you should also attention and this is

15299.84 -> all same JavaScript in case you watch my videos these are truthy values and falsey values they are

15304.8 -> not literal false but they produce the result now there is this example here I would like to

15309.68 -> actually borrow this example and we'll show you that so we'll copy this and we'll study this

15315.12 -> example this is something really interesting everybody should pay attention to this one so don't

15320.32 -> do this yes we are aware of that the notice here let's understand this example so it says print

15326.24 -> all where strings could be a string could be a string array and could be null also so three cases

15332.56 -> are there and we are checking that if the strings are there that means it is not null that means

15337.44 -> yeah obviously so this case is being taken care of and if the type of the string is an object

15342.4 -> when we just saw that array also results into as a type of object so okay that part is also covered

15348.8 -> and we're looping through it so no big deal else if the type is just as a general string

15354.24 -> then we just cancel log it and you might be saying yeah that's okay we have covered for the string

15358.64 -> we have covered for the string as an array and we have covered for the null that's great

15363.36 -> but what is the case that we haven't covered is an empty string and empty string is a little bit

15369.04 -> cautionary thing notice here this is the empty string and these are truthy and falsey values so

15374.08 -> this is exactly what they're mentioning here that the strings is truthy this at least prevents us

15380 -> from the dread errors like this but we haven't covered all the cases we haven't covered where the

15385.2 -> cases are that when the value is nothing and this is not gonna break our code but this is kind

15391.28 -> of a business case where you should be covering the case if the string value is totally empty so this

15395.84 -> is all they want to show you in the documentation again reading and understanding from the documentation

15400.64 -> could be a little bit boring but this is what is going to make your foundation absolutely amazing

15405.76 -> in the world of TypeScript there's a little bit more to this narrowing and there is nothing much

15410.72 -> like too much you haven't seen anything this is just a general discussion in which I think you should

15415.84 -> take part in it but in case this sounds boring to you welcome to the programming and reading from

15420.48 -> the documentation so that's it for this video let's catch up in the next one hey there everyone

15425.36 -> they share back again with another video and in this video we're still continuing the topic of

15429.6 -> type narrowing still in our TypeScript series and as we saw in the last video there are a couple of

15434.56 -> ways how we can specifically find the types but there are a couple of use cases mention in the

15438.56 -> documentation which are specifically meant for the flow that you actually follow in the TypeScript

15444 -> let me walk you through because the documentation has one such great example so we are still in the

15449.12 -> narrowing which we studied in the last video so you can see there is an equality of narrowing there's

15454.96 -> an inoperator narrowing and quite bunch of them now this inoperator is not something which is

15459.76 -> exclusive to TypeScript only it's easily available in TypeScript as well in fact we use this quite a

15464.8 -> lot now they mentioned this quite a number of times that the inoperator TypeScript take this into

15470 -> account as a way to narrow down the potential type and we can use this not just with the basics of

15476.24 -> objects because in the all JavaScript example you're going to see that this is being used to find

15481.28 -> out whether that property or key value pair in the key is available in that object or not so this

15486.72 -> is usually the use case we go ahead and check this out if swim in animals so we can see that this

15491.84 -> if it is available in animal or not but I'll give you a more better example that is actually make

15497.68 -> that makes sense in the TypeScript for example so let me show you as a really simple interface if

15503.44 -> you're working in TypeScript you'll be using like hundreds of interface left and right let's just

15508.16 -> say we have an interface of user and the user obviously is going to have a name and then you are

15514.24 -> also going to have an email which is also going to be a string all right this is a really basic

15519.6 -> interface then we go ahead and create another interface and this is admin interface now we also

15526.32 -> know that admin interface is almost same as the user it has a name it has an email which is also

15532.96 -> going to be a string but it has another Boolean property which is admin which is a simple Boolean

15540.4 -> now this is really basic and somehow you're creating a function so let's just say there is a

15545.76 -> function and you check out whether is admin or not now in this case let's just say a value is

15551.68 -> being passed on or an account is being passed on and you know that this account can be of type

15556.48 -> user or can be of type admin so there could be both of them and now all you got to do is check this

15565.44 -> whether this is admin or not now this is something really really tricky as of now because I cannot

15571.12 -> go ahead and say that hey this account if it is having a property of dot is admin it's not going

15578.64 -> to allow me to return this I cannot go ahead and go ahead and say hey return this because right now

15584.08 -> it says a property is admin doesn't exist on user it only exists on admin so I have to make sure

15590.4 -> that hundred percent this is admin and if this is admin I can actually verify that using pretty

15596.56 -> easily by the same operator we studied here so let me walk you through so notice here the in

15602 -> operator it actually helps you to narrow down which interface it is it could be used for

15608.32 -> the regular objects as well but in the world of typescript you're going to see that this is

15612.56 -> more use case scenario for such interface let me walk you through with the code remaining the

15616.64 -> code I'm pretty sure you have already walked through with that which is really simple so I can go

15620.88 -> ahead and check whether this is admin which is a property only available in that so I can just

15627.12 -> go ahead and say in and I can check whether is the same is admin is available in the admin so I'm

15634.72 -> going to go ahead and say admin is in account so there we go if this property exist in this account

15647.12 -> then only we are going to go ahead and say return and we're going to go ahead and say is admin so

15653.84 -> this is going to return us the property if it is true or not and all of that and we cannot

15658.24 -> actually go ahead and append that account dot is admin that would be better okay and otherwise

15665.36 -> we can return just a false so this is a much better code and if it has reached here notice here

15670.72 -> the account automatically changes that it is 100% admin because we're going to only follow or fall

15676.08 -> through into this if if a statement only because of this in statement which actually verifies whether

15682.4 -> this property and remember I should actually change this name here is admin or is admin account

15692.56 -> something would be better because otherwise it would be really confusing okay so this is a function

15697.2 -> which says is admin account and the account comes up as an interface and this could be any type

15702.8 -> of interface can be a user could be an admin and we are narrowing it using the in property and

15709.04 -> there is nothing too much to discuss there and if we are 100% narrowing it then we are making sure

15714.08 -> because this property is admin only exists if the interface type is a fragment so this actually

15719.52 -> validates and further boils down and narrows down the things on to that so let me walk you through

15724.64 -> so this is exactly what the examples are saying up the example that we have taken up is much more

15729.52 -> precise and clear but that's it that's all it is there to discuss about the in operator narrowing

15736.08 -> let's catch up in the next video hey did everyone wish here back again with another video and in

15740.48 -> this video we're going to be talking about the two more topics which are again belongs to the

15745.52 -> same category of type narrowing and the first one is easy the second one takes a couple of minutes

15751.04 -> to actually adjust but it's also easy not to worry I'm here everything is going to be easy so not

15756.16 -> to worry on that part I hope you're enjoying the series if yours do share it up with all of your

15760.4 -> friends and hit that subscribe in case you want to okay let's go ahead and talk about the two more

15765.44 -> type of how we can narrow down the type this entire portion of the series is about how we can

15770.96 -> go into the more preciseness of the type so that we can take better action and that's what the

15775.6 -> type script is all about getting the types all narrowed down so let me walk you through with the

15780.72 -> documentation again and these all examples that we'll be talking through some portion of these

15785.44 -> examples come from the documentation but I have modified them a little bit for the easier

15789.52 -> understanding but yes the source is always documentation so the next in the line is the

15794.72 -> instance of so this is how further down you can narrow down the things and they just do mention

15799.68 -> the prototype and all of that but the idea is the focus of your attention should be on anything

15805.6 -> that is or that can be constructed with the new keyword that's where this instance of actually

15811.04 -> comes into the picture so this is a common keyword it's something that is obviously there so you

15817.28 -> can just go ahead and check out anything is X is an instant of date so anything just you can

15823.28 -> use new keyword like we create a lot of classes we can also create arrays with the new keyword we

15828.08 -> can create objects with the new keyword all of that that can be find out I'll just borrow this code

15833.52 -> into the codeator so I can just show you a little bit more so we have gone through with this one

15837.68 -> so this is an instance of now again in the value they say is hey this is a parameter and all that

15842.88 -> will just get rid of that because we don't need this parameter we don't need this part let's

15848.16 -> let's adjust this code a little bit so it's easier to understand and there we go all right so what

15857.12 -> this function is doing it's a log value now notice here this X can be a date or can be a string so

15862.56 -> how can we find a date because remember date can be easily created any type of variable can be

15868.16 -> created just by saying new and then we create a date just like that a new date is being created

15872.88 -> similar to that you can actually go ahead and create an array like this so anything that uses this

15877.68 -> queue new keyword is there and this keyword instance of is almost like not literally but almost

15885.12 -> like type of type of checks you for the default types instance of check you whether this object

15890.88 -> was an instance of some class or maybe some something like that so here we checked whether the

15897.2 -> X is an instance of date so it just returns a true if that returns a true we are able to further

15903.28 -> narrow it down now notice here if I come up here we are 100 percent sure that X is going to be

15908.72 -> date in this case and in the other case it's going to be string so yes this is also a valuable

15913.52 -> keyword where the type of doesn't really cut through there you can check whether this is

15917.84 -> instance of and again remember from the docs it can only be used where there is a new keyword that

15923.12 -> there is a potential of having a new keyword so this is easy part now coming up one of the part

15927.92 -> which is little bit tricky which is the type predicates okay this is where TypeScript has

15934.88 -> nothing to do it's a bit of a logical flaw not flaw I wouldn't say but a logical kind of a flow

15941.76 -> that goes through and which sometimes matches and it introduces a new set of keyword let me show

15945.92 -> you and again we are going to be using the same example that is given up here pet fish and all of

15949.92 -> that so we'll just just going to literally line by line write this keyword but then we're only

15955.04 -> going to write this much and then to understand it we are going to use our own functions okay but

15961.36 -> first let's go ahead and use this one so we're going to go ahead and say function and this function

15967.76 -> there we go and this function we're going to say get food there we go and before we actually go

15974.32 -> ahead and define this get food and stuff we need to actually have a fish so again this is all

15978.96 -> coming up from the documentation not making anything up so there we go so this is a fish and

15983.76 -> we're defining a type of it which is going to be like this and we're going to say that hey you

15988.16 -> are going to have a method of swim and this is going to be a method like that this is not going to

15993.2 -> return anything so we're going to go ahead and say wide so this is really simple we're going to go

15997.84 -> ahead and put a semicolon duplicate that this is not a fish this is a bird and bird don't swim

16005.04 -> they actually fly so we're going to have a fly method now we have two types just like we had

16009.84 -> interface we could have type again both the same values and based on this now we can use an

16015.44 -> example that was given to us in documentation so we're going to go ahead and create a method which

16019.92 -> says is fish so obviously just like we had method like is admin this is a method which is going

16025.28 -> to validate whether the input value was given is a fish or not really simple it could be any

16031.6 -> variable well whatever you want to say it could be either a fish or it could be a bird so these

16037.68 -> are two values now what we want that this function should return us a true or false value now how

16043.04 -> they do it in the documentation is a little bit of a typecasting pet as fish and all of that so let

16048.32 -> me walk you through so what they do is first they say that pet let's cast this as fish so just

16054.64 -> like that let's wrap this up inside a parenthesis once we actually do this then they try to check

16060.08 -> the method so fish has a method of dot swim and if that method exists that means it cannot be

16066.72 -> unidentified so we're going to say if that is not equal to undefined did I say unidentified

16074.08 -> I mean to say undefined okay so what we're going to do is we're going to simply go ahead and

16079.12 -> say return there all right so really simple yet a little bit more of the code that is involved but

16085.12 -> here we are saying pet is a fish if it has a method of dot swim that is not undefined then true

16091.28 -> it is a fish so that is exactly what they're doing and they're exactly saying like this but

16095.84 -> things actually change a little bit so let's try to use this this much so far we have got the

16100.32 -> code from the documentation but let's try to implement that so further down the road I try to

16105.6 -> get some food for the fish so let's go ahead and get some food for the fish and I know that the

16110.56 -> food is different for fish and for birds so pet is going to be type of either fish that might come

16117.2 -> or it could be a bird all right now since I have the access of this method which is is fish I can

16123.92 -> use an if-and-else condition here I can go ahead and simply say is fish which is a method available

16129.68 -> 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

16135.92 -> go on to line 66 I'm 100% sure that whatever the value of the pet comes up that has already

16141.6 -> being identified for true for the fish case now let's go ahead and say that if this is the case

16147.2 -> then we're going to return as a fish food and if not then obviously it is a bird so we're going

16155.28 -> 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

16161.04 -> this pet here now in theory if we have defined it so well and we have done this so much this is

16166.88 -> coming up directly from the documentation by the time we reach line 66 the pet should be identified

16173.04 -> as truly as fish and on the line 69 it should be identified truly as bird but that is not the case

16179.76 -> if I hover over this pet it is still confused type script is still confused whether this is a fish

16185.36 -> or a bird here also goes same that it is a fish or a bird so still the value or the type of the

16192.4 -> value is not being identified although it is not giving us any error it will still work as it

16196.72 -> is fine but this method is truly not behaving because what this method is returning is a true

16202 -> and false value which is a Boolean in the in the case so returning a Boolean that is fine notice

16208.96 -> here it is returning a Boolean it is not returning me a type of fish or a bird okay so what does

16215.76 -> the documentation says documentation says that you can use pet is fish so you can instead of

16221.92 -> returning a Boolean you can use the syntax of pet is fish that means you are type costing it

16227.68 -> as a particular type for example I can come up here since here on the line number 60 I'm 100

16234.4 -> percent sure that if this returns as true then I'm sure the return type is fish and again you

16240.32 -> 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

16246.56 -> the true value returning Boolean is not going to cut through in this special case but if you go

16251.28 -> ahead and return the type which could be fish or anything else in your case is now a guarantee

16256.4 -> that we are returning truly not as true but actually as a fish when I come here now we are identifying

16262.08 -> that we are returning a fish or we are returning a bird yes this is a little bit of a weird syntax

16267.44 -> but this is fantastic how they have implemented it mind boggling but really really I absolutely

16273.76 -> love that how they have defined it yes the documentation is also almost like that but I have just

16279.04 -> tried to break it down this one is not so great explanatory I've just modified this example but

16284.32 -> again everything is coming from the documentation we don't learn anything from elsewhere it's just

16288.24 -> documentation so I hope you have enjoyed this one I'm super happy that you are hit that subscribe

16293.36 -> button and let's catch up in the next one hey dear everyone face your back again with another

16298.24 -> video and in this video we're going to talk about the final the final steps of the tight narrowing

16304.8 -> now this final step is broken down into two steps the first one which is absolutely bad I don't

16310.4 -> like it I don't appreciate it the second one is really something that makes sense so we're going

16314.64 -> to refer to the documentation we will be using the code example from the documentation but I have

16319.36 -> modified them again a little bit because it's easier when I am actually modifying them the code

16325.12 -> that is written here it's making sense it's great but I can make it a little bit easier so why not

16330.08 -> why do wait for it so let me walk you through that how this actually works so the two we are going

16334.48 -> to talk about actually they are mentioned as three in the documentation but these are actually

16338.4 -> just the two topping the first one is discriminated unions really mouthful and the second one is actually

16344 -> in a mix the never type and exhaustive checkness they actually kind of make sense when you talk

16348.4 -> about them together talking about them separately I was not going to make sense so let's first see

16354.48 -> what is this discriminated union so they're making a lot of examples so notice here only thing you

16359.92 -> should mention or notice here is that they are using shapes circles and square we are also going

16365.12 -> to use that but not like this I have made a better example and then we are going to go through with

16370 -> that I will take you back on to this never type in case you remember I briefly touched about the

16375.76 -> types when we're discussing that yes there is a never type as well you'd never want to use that

16379.76 -> this is the place where you want to use it but never want to be available to you in any code so

16386 -> this is the point where we actually talk about them and then this exhaustive checking we will come

16390 -> on to this exact same example almost same example up here so let's start with discriminated union just

16395.04 -> forget about it even exists I'll show you the concept that is actually much better and let me

16400.8 -> open a VS code here it is all right so this is all we can actually just talk about this in the

16407.52 -> detection only so we're going to go ahead and get started so what this first discriminated union

16412.96 -> really bad word what they are talking about is let's just say we have an interface we call this

16417.92 -> one as circle and we actually kind of have find out that in order to use any other way we have

16425.52 -> to actually know these interfaces well in advance for example in this interface I have to know all

16431.04 -> the properties to find out whether it's a user or not I also need to be well aware of the properties

16436.64 -> available in admin that there is an is admin so that I can check whether is in or instance off

16441.84 -> or something like that so what they are saying in the documentation is you can mention a property

16447.04 -> as the name as kind and you can name this as literal circle just like that and similarly you can

16454 -> have an interface and we can have a square and here also you can mention the exact same property

16460.72 -> and you can mention this as a square you get that where this is going on so have the property exact

16466.96 -> same name in all of your interface and then you can check that whether this is dot kind of square

16472.32 -> or dot kind of circle so not a big fan kind of a hacky way this could be a best practice at

16478.64 -> the best but having them in the documentation that doesn't feel really good so let's continue

16483.52 -> with this one so let's just say we are having this circle so obviously circle will have a radius

16489.52 -> or radii whatever you like to call that that will be a number but in the case of square it will

16495.92 -> have a side which will be a number now with this I would also like to declare another interface which

16502.96 -> will be let's just call this one as rectangle rectangle there we go okay in the rectangle

16509.68 -> obviously they mention that hey this is a good practice if you mention a kind of rectangle rectangle

16516.56 -> there would be and rectangle will have two sides so let's call this one as length which will

16523.52 -> be a number and will also have width which will also be a number so so far so good no problem at all

16531.92 -> and yes we kind of forget it that we can have a mention of kind in each one of them by the way

16537.12 -> it's not really compulsory that you say it kind you can say that a property find whatever makes

16541.6 -> sense to you and that's that is it that is it my friend that is it your discriminated unions they

16547.36 -> say that hey use the kind here the example here is actually a little bit shaky in this but you get

16552.72 -> the idea with my example I think it's much more easier that you can have a kind for all of them so

16557.36 -> yeah that's basically it that's your first topic yes and let's try to use this otherwise it will

16562.56 -> not make much sense so let's just say we are having first let's have a type here otherwise what

16567.52 -> we are going to check along so we're going to say that hey I am creating a shape that shape is going

16574.24 -> to be either a circle or is going to be a square there we go now we can create a function we're

16584.88 -> going to call this one as get true shape any arbitrary name is a good one here okay in this one

16591.68 -> we're going to say that hey a shape is going to come in which is going to be of type shape just

16596.64 -> like that and we can evaluate so the way how the first method says that you should be evaluating

16602 -> is by simply taking this shape and we know that each of this shape is going to have a value of

16608.64 -> kind and we can match it for anything for example I can match it for circle notice how well

16614.88 -> the auto suggestion now comes up because of this kind which is kind of a good we can go ahead and

16619.76 -> return a math dot pi so pi r square is the formula so we can go ahead and say shape now we are

16630.24 -> very sure that this is actually shape is a circle so notice here and I can go ahead and find out

16636.24 -> the radius and I can pi r square there we go so that's basically it and if this is not the case

16644.32 -> then I'm sure that if I move to line number 97 then it is a square so I can go ahead and return

16650.88 -> simply shape and notice here as I say dot it says side so side shape dot side whatever formula works

16661.76 -> for you so this is the implementation of the first method that we have used but there's also one more

16668.56 -> thing if you read the documentation this never type and exhaustive check so what does it do and

16674.4 -> how does it work so the basic idea is let's just say you're creating a function and this one is

16680.96 -> going to be get area and this also takes a shape which will be of type shape there we go

16689.04 -> now the idea is you do exhaustive switch and case check for this one so you can use a statement

16694.96 -> of switch yes that's available and I can just check the shape dot kind just like we do for the

16700.32 -> ratings we build a lot of applications together in the courses so rating dot five star two star one

16706.64 -> star all of that similar kind of a star so let's just say we have a case where this is a circle

16712.48 -> so we can go ahead and say I want to return albados some code don't want to write this again

16718.8 -> all right so there we go and this is it so we're going to go ahead and return this let's go

16725.12 -> ahead and say I am having a case of square and this should be indented a bit

16734.64 -> there we go and if that is the case I'm going to go ahead and return again we'll borrow a little

16740.32 -> bit of the code copy this and paste it up here okay this is good this is fine but what

16747.76 -> there could be some more cases so for example we are doing an exhaustive check here

16752.72 -> and that is working absolutely fine because we are having only two cases now this next step is a

16757.84 -> precautionary step for making sure that your code is future proof if you remember we defined a

16763.76 -> rectangle as well but we only checked for square and circle but there could be a case in future

16769.36 -> where now this is available for rectangle as well now this you can relate to something let's just

16774.64 -> say you have defined you are working with the payment gateways for stripe or maybe a razor pay or

16779.76 -> wherever you like now there are a couple of status in the payments maybe it has been captured it

16784.88 -> has been refunded it has been initiated but there is also a payment status which later on was

16790.08 -> introduced known as authorized you didn't worked out for that now you have created an interface

16794.4 -> for it and you have make sure this is it now if you'll go up here you'll notice that hey what this

16800 -> is this is obviously falling apart so this particular code is not working out and also on top of this

16808.64 -> this here seems like we are working through it but there is now another thing another case where

16813.76 -> we should be checking which we are not checking so I'm going to go ahead and come in this out for a

16818.64 -> minute now this is working out but we need an extra case for this one let me show you what the

16823.68 -> documentation says about it it says that you should always have a default case which should be

16829.2 -> of type never on to whatever the shape you are defining and you should return that now since this

16834.32 -> is made as a type of never which should never be used that is why this is important and

16839.44 -> trivial to have this is known as the never type so yeah this is all exactly they are mentioning

16844.48 -> up here so they are saying that hey you also have a case of defaults okay not case is actually

16850.24 -> default there we go so in the default what we're going to do is we're going to create a constant it

16856 -> could be any name so this could be default for shape it doesn't really mean this variable could

16863.6 -> be anything because it's a type of never so technically it should never be used and we're going

16868.72 -> to go ahead and define a shape on that and then we're going to go ahead and say return underscore

16874.32 -> default for shape and why are you yelling it's not assignable to type never so that is exactly

16880.56 -> why this is meant and right now this is giving me a problem because I'm not checking for all the

16886.8 -> exhaustive cases and this is exactly what you want because if a new type or interface is being

16892.32 -> defined and that is also being used you want your code to yell at you that hey you're doing

16897.36 -> something wrong there should be something where you should be checking so for example if I come up

16902 -> here and if I go ahead and do a check of the case now notice here I check for a rectangle case

16907.52 -> and I return shape dot length multiplied by shape dot width and notice here now this code is not

16920.08 -> running not acting and that is why the type never is never going to be assigned as a shape so that

16926.08 -> is why it is all happy and yes this is all a good practice so this is what I liked the discriminator

16931.6 -> type yeah okay but this never type is a really good check I can directly see the use cases not just

16938.16 -> for the payment gateway but for a lot of variety of checks because code always keeps on evolving you

16943.52 -> have new types keeps on coming new situations keep on coming and this makes me always happy that

16949.68 -> there is a default method which should never supposed to be running instead of just relying hey it

16954.4 -> will never run this is a nice checker I like this much so this is the end of all the values all

16960.88 -> the narrowing down that we can have so all the important ones I have discussed more you have now

16965.52 -> learned that how we can read from documentation so you can go ahead and do it so hit that subscribe

16970.24 -> button and that's it for this one let's go ahead and catch up in next one hey there everyone

16975.28 -> with this year back again with another video and welcome to the final official end of the type

16980.56 -> script series it is very important that you start a series but is it it is equally important that

16986 -> you end up a series as well start of the journey is important so is the end otherwise it's all

16991.04 -> just a tutorial hell now you have enough knowledge with yourself with this type of series that you can

16996.64 -> go ahead and implement type script in any production grade application or can start playing around

17001.36 -> with that in react angular or anything like that if you have reached so far I'm pretty sure you

17006.32 -> have learned this the type script is not associated with angular or react or anything else is just

17012.08 -> is a strong sense of writing production grade JavaScript which is probably less error prone and

17018.8 -> give you more strong types so that the chances of creating the errors are minimized that's all the

17024.72 -> type script is now apart from this let me walk you through I have also added the GitHub repository

17029.92 -> here on this so that anybody who is watching can actually go ahead and just learn this one

17035.12 -> and this is the official page type script youtube 22 so this is entirely it probably I missed

17042.08 -> typed it let me just go ahead and correct that so this is now it's all correct it was just showing

17047.6 -> me half of that so this is all the link that you should have otherwise just go on to my GitHub

17052.56 -> repository and you can just find it pretty easily it's super easy just go on to the repose and you

17057.6 -> can search for it and you'll find it at the top all the source code are mentioned up here now with

17062.96 -> this let me also mention this that there are probably a couple of topics that I might not have

17068.08 -> covered might have slipped out here and there in the crack but the most important part is if you

17073.36 -> have watched the concept of this entire series it was not just to teach about the type

17077.6 -> script but also to introduce you how to learn from the documentation I have explicitly chosen

17082.8 -> those example which are from the documentation so that you get an idea and sense of how to read

17087.52 -> from documentation so that if some topic is missing you can directly go ahead and read from there

17092.96 -> otherwise just let me know on my Instagram and I'm super active there and I'll try my best to

17097.52 -> add those topics into this series if they are sounding a little tough for you but how long

17102.16 -> you're going to be keep on asking for the videos go ahead and try it out on the documentation first

17106.88 -> and if it doesn't work out let me know I'm always here to help you out with that now go ahead and

17112.16 -> build some amazing stuff that is the most important part of brushing up your type script I'll try my

17117.12 -> best in the future so that I can come up with some projects that include TypeScript and together we

17122.24 -> can brush up some of our knowledge as well as I can teach you some of the production grade stuff

17126.56 -> of how to use TypeScript this was all it was an amazing ride I learned a so much about the TypeScript

17132.4 -> as well as bit more about the foundation of teaching as well as creating better thumbnails that

17137.28 -> the one thing I learned from the entirety of the series now one small request from my side that

17143.28 -> please go ahead if possible share the series the tutorial series where we teach something don't

17148.72 -> get that much of attention we don't get that much of the views and again it's it takes a little

17154.16 -> bit stress on the channel as well that we're pushing the series which are not taking much views so

17158.48 -> your small share or from your colleague from your college friends in your watch tab group in your

17163.68 -> discord channel in your telegram channel would be super helpful if that is possible from your side

17169.36 -> otherwise fantastic series I learned a lot about it I hope you have enjoyed a lot in that keep

17175.6 -> on supporting me I'll try to push more series like this and yes this was really fun thank you so

17181.2 -> much and we're gonna surely catch up in another such series

Source: https://www.youtube.com/watch?v=30LWjhZzg50