#1 - What is TypeScript || Install Typescript || TypeScript vs JavaScript

hey guys this is Navia welcome back to navine automation labs and with this series we are going to start with the typescript so if you haven't seen my JavaScript series please go and watch more than 35 videos are already there in the JavaScript series and uh the good thing is typescript is actually using JavaScript internally so if you're lacking in JavaScript you won't be able to enjoy typescript properly right so what is typescript typescript is a JavaScript with the syntax of types types means the data type that what type of data it is it's a string or it is number or it's a Boolean or what right so typescript is a super set of JavaScript remember it's a programmer language I would say in terms of giving you a lot of flexibility that you can Define the type of the variable and everything but those things we cannot Define in the JavaScript so what exactly typescript does that whatever the code that you are writing here then it will be converted into the JavaScript with the help of typescript compile so it will be compiled into TS2 do JS and then from the JS it will be executing on your browser or with the node or anything right so whatever the code that we are writing into the TS we have to convert that code into the JS so this is called the compilation step why JS what is the problem with the JS problem with the JS is that it's a runtime language it will not give you the error at the compile time when we run it that time we will see okay yeah this error is coming but in the typescript before running the program itself we will get to know that what kind of error it is just like we do it in Java or C most of the compile time programming language JavaScript is not a compile time language JavaScript is actually a runtime language it means everything will be decided at the run time if I have created a variable also it will be decided at the runtime that this variable is the a number type or a string type A Boolean type a floating type or what but in the typescript it will give you the flexibility to decide the number that what kind of or decide the variable that what kind of variable it is a string or number or whatever right so it is actually developed by Microsoft and then it's actually open source absolutely free of cost you don't need to pay anything for that and it is actually a compile time language and then convert the code into typescript to JavaScript and then at the run time with the help of some JavaScript environment like node or browser or anything you can execute your Js file but when we write the code in the typescript we have to use the TS extension here okay so typescript is a strongly typed programming language that builds on top of JavaScript giving you better tooling at skill fine what is typescript again typescript add additional syntax to JavaScript to support tighter integration with your editor catch the errors early in your editor at the compile time itself a result you can trust typescript code converts to Java JavaScript which runs anywhere JavaScript runs it means on your browser on your phone on your node environment or anywhere where exactly the JavaScript runs so you can execute that you can convert your typescript code to JavaScript in browser node or Doo or in your apps typescript understand JavaScript and type inference to give you great tooling without additional code so my code will be much better and then I can decideed okay yeah what will be the type of that particular data that's why the name itself is written like type script so type is very important here so I'll tell you what you mean by type inference and everything in the upcoming chapters okay so what we have to do we have to download the typescript before writing the code so what we have to do we will just simple check that do I have the typescript is available in my system so see typescript is already available in my system so how to check that simple open your command prompt or open your terminal and then you simply try TSC minus V so you can see in in my system TSC means the typescript compiler is already available here so for example let's say if I uninstall it so I'll do one thing that uh let me just simple uninstall the typescript here okay so first time if you are using the typescript and then you run this TSC minus V it says that command not found it means typescript is not available in my system so I'll do one thing make sure that okay you are having the node plus you are having the npm package also so that with the help of npm we can uh download or install the typescript here so what is the first thing that you have to do you can simple go to the downloads page and then you can download via npm or directly in your Visual Studio code also we are going to download with the npm so what we have to do simple WR if you're using Mac machine if you are if you are not the admin user you have to give with the Pudo other way you simply write npm install minus D minus d means I really want to install typescript globally so that from anywhere I can run this particular typescript code whatever the code I'm writing it and then you just simply write a typescript here and that's it okay so see this it is actually downloading it and then again now I'm checking TSC minus B now you can see that 5.2.2 version is available here same thing you can uh check it here also that what is the current version the current version is 5.2 is now available 5.3 is currently in beta which will be available in future perfect it means now the typescript is available now I have to write the code in order to write the code we will use the same thing Visual Studio code so let's open that Visual Studio code see from the visual studio code terminal also you can execute that you can download npm and everything okay you can download with npm install typescript also from the visual studio code here but what we have do we have already downloaded typescript now what we we just need to do we need to create a folder here so let's see I'll go to my documents I'm going to create one simple folder and let's see the folder name that I'm writing TS code here whatever the folder name that you want to give and uh I'll just open that folder here so let's open the folder the folder that I have created under documents TS code and in this particular folder I'll start writing my code here but before that you do one thing just simply go to uh extensions here and here in the extension please download Lo this es lint extension also here so it's already there so for example let's see if I'm uninstalling it so once again I'm installing it here and then es lint this is integrate es lint JavaScript into vs code perfect and after that simply close it and come back here okay so under this particular folder you can cre multiple folders or directories or you can maintain your code so for example let's see here I'm writing a simple JavaScript sorry typescript code here so how will you write it for example let's say I'm creating name dot what is the extension that you have to write name do TS so you can see the symbol is also given the TS means the typescript and let's see I'm printing console.log hello typescript that's it now I really want to execute that so first what we have to do as I told you that if you really want to execute you have to convert it means whatever the TTS file that you have return after that with the help help of TSC TSC is what TSC is the typescript compiler and then this TS file will be converted into JS and now this JS wherever you see any JavaScript runtime environment for example on your browser you can execute that with the help of nodejs also you can execute that or on your apps where the node environment is available or any JavaScript environment which is available you can execute this JS file so the first thing is that we have to convert name. TS tojs okay the code and everything will remain same but there are some slightly other differences also we will see that what are the other differences in terms of typescript versus JavaScript we have they have introduced the decorators they have introduced the interfaces also and the type of the variable you can Define it here perfect so see this I'm opening the console or opening the terminal with the help of TSC let me check quickly that TSC version is getting displayed here or not so TSC minus V yes 5.2.2 is already there and then with the help of TSC whatever the name. TS file I'm compiling it okay so it will create one JS file after the compilation so here you can see that namejs file is available here so you can see that in the namejs exactly same code is available so both are JavaScript actually the code is Javascript but from the TS we have converted to the name. JS so whatever the code that you are writing you have to compile it and then it will generate the JS file with the same name extension will bejs and then we have to execute with what you can execute on the browser also or with the node so let's see I'm running with the node so here I'm writing node and what is a file name name. JS here so again namejs is giving me hello typescript getting printed on the console simple perfect I'll do one thing let me remove this namejs from here and uh see I'll tell you how exactly typescript is helping me to catching to catch the error in the beginning itself okay so see this here I'll do one thing that uh let's write one Javascript file also so let's see here the file name is lang. JS and I'm creating a function here okay the function name is get info function and this function says that uh here I'm using one let's see something some variable here with the if condition let's see I'm writing the first name dot do length if it is length is greater than 10 then here I'm writing console do output and then I'm Printing Pass here else I'm Printing console.log and I'm printing fail here so see this what is the output of this program the output of this program if I'm calling this particular get info method from here the output of this program will give me the error at the run time but at the compile time while writing the code I have no idea where exactly the problem right so let me just execute this so here I'm writing node lang. js this is a JavaScript code not the typescript and you can see the first name is not defined so when I executed that that at the run time I got to know that first name is not defined here why because we are not giving any information what is the value of first name on what basis it will check the length it is a string or what right so if I write the same code in the typescript so now let's see name. TS is there I'm writing exactly same thing here let's see I'm changing the name let's see get info test method that I have return can you see that is giving me the error at number five it says cannot find the first name it means it's giving me the error in the beginning itself at the compile time itself just like we do uh you know we do get the error with the Java or C or other languages at the compile time itself in the editor so here it will be easy for me to catch the error before running the program that is the major problem with the JavaScript that okay when you run the program at the run time it will be decided and then at the run time it will give you the error so obviously this code will if you move it to the production for example on the browser and then obviously this code will crash but here you can easily fix the problem here you can just decide what is the type of this first name or whatever you can decid it here okay so this is the major thing another example if you see it here for example let's see in the typescript I'm creating one object here see let's see I'm creating one user object which is equal to and uh let's see here I'm writing that the user first name will be uh Tom whatever and then here I'm writing age is 20 only two properties let's see in this particular user object that I have defined then I'm writing that okay fine give me console.log user dot user. City do we have the city here in this particular user object no we don't have that so see at the compile time it's immediately giving me the s error because of the TS this is a typescript file that I'm writing it says that property city does not exist in this particular object but if I do the exactly same thing in the JavaScript code in the JavaScript code I'm not getting any error so let's see I have created somebody has created this particular object and after 100 lines of code I'm writing user. City I have no idea what different properties are there in this particular user object so I assume that okay user. city is there but actually user. city is not there so when I run this program see I'm running it and uh from here let me just simple clear the console and then I'm running lang. JS so at the run time I'll get to know what is the problem so let's run it lang. JS and now you can see undefined it means you are getting undefined here that city is not defined here so I'm not getting any output here not error but undefined we are getting but here in the beginning itself I'm getting the problem here that city is not there so I hope this is clear so this is exactly same example that here given that when you write the typescript code in the editor check itself it will give you that property name does not exist on this please fix it please add the name property here because you we are using user.name which is not there this is the power of typescript right other than that it give you the flexibility of writing the objectoriented programming concept also we will use it here it is more readable more maintenance mtab ility point of view it will be very easy because we are defining the data in the beginning itself how to define the data for example let's see if I really want to Define some a data so for example let's see age age is what age is a number so you can simply write number and then you can write let's see age is equal to 30 here for example like this so let age equal to 30 so let's Define couple of other things and then here I'm writing that name is what name is the string type and which is equal to which is equal to let's see naven here for example okay then or let's write something name is already somewhere declared so let's write a first name I'm writing it here fine then I'm writing let's see Boolean value so here I'm writing that user is active or not so this is a kind of Boolean so here see I'm defining the type of the data and the Boolean is let's see user is active here like that right here so here if you read this particular code or somebody is reading your code it will be easy for me to determine that okay age is what number so I have to operate or I have to perform all the number based operations I can perform it first name is a string so I can do any kind of a string manipulation on this it's a Boolean so I can use it in my if else condition so I'm already aware of it right so now let's see what kind of of uh JavaScript equivalent JavaScript code is generating so what we have to do we have to compile this code so what is the file name name. TS so let's compile it so see it is compiling it and then the name. JS will be created and let's see namejs here so can you see that in the namejs obviously uh JS does not support any colon number or colon string or anything so see Age first name is active so this is the equivalent JavaScript code of this particular file can you see Age first name is active we have Define the number this is the typescript syntax same syntax will not work here so it is automatically converting into the name. JS perfect so this is more flexible for the editor point of view for the IDE of for a programmer point of view that programmer is or developer is writing the code in the Javas with the typescript I'm already aware of that what kind of error or what kind of issues could be there at the runtime so let's catch those issues in the beginning and the code I can write in a more static way more means more uh type way I can write it here so this is called the static type language JavaScript is not I have no idea that what is age or first name or whatever okay I hope this is clear so please uh start using uh typescript download it and then do this basic level of compilation practice and then I'll see you in the next chapter that's all for this thank you so much

Channel: Naveen AutomationLabs

Views: 8,502

Keywords: TypeScript, TypeScript tutorial, Learn TypeScript, TypeScript for beginners, TypeScript fundamentals, TypeScript basics, TypeScript programming, TypeScript crash course, TypeScript for web development, TypeScript course, Advanced TypeScript, TypeScript for JavaScript developers, TypeScript type annotations, TypeScript classes, TypeScript interfaces, TypeScript functions, TypeScript best practices, TypeScript tips and tricks, TypeScript debugging, TypeScript vs JavaScript

Id: GrL86rlRvpA

Length: 17min 32sec (1052 seconds)

Published: Thu Oct 12 2023