
Welcome to webstylepress. There are so many ways to convert a typescript file into regular javascript file so that you can use it anywhere dot ts is type script file web browser wont run a dot ts file instead of writing plain old javascript its better to use typescript typescript adds static type definitions to javascript typescript code is better than javascript it validates that your code will work properly and it will be compatible for all platforms and web browsers also type script ensures that code that youre writing is maintainable across multiple themes its just better dont type plain javascript use typescript everywhere react.js angular and such frameworks and libraries encourage you to use typescript while working in drag.js and angular you dont need to convert typescript into javascript that happens in background by webpack automatically or some other module bundler but if you are working on standalone javascript code then you need to configure a mechanism to convert typescript in javascript and here is how you would do it method number one convert typescript to javascript online go to typescript website and use this tool tools and this is playground script dot org slash play and here weve got this code var n and this is the type for this and that is number and we have used some number here and we are using console.log to display that number and then function hello and we have got this name this argument and this argument should be string and then we are displaying hello name and we are giving it the name and this is our typescript code with type checking and this is its output in plain javascript without types this is typescript this is javascript output and we can even run it and well get this output basically this variable will be like this now were in it and well get this value and this is our javascript output let me paste it here save so one way is to use online tools or online editors that provides facility that you write typescript and you can get the output in javascript second way is to use a good code editor like visual studio code then use extensions like compile hero this is typescript code that you just saw and ive got it written in scripts.ts file the extensions.ts this is typescript file now and i am going to this area extensions and just search compile hero and look at this extension this is compile hero its multi-purpose extension and it can compile typescript into javascript after you install it you will see this compile hero option at the bottom of your code editor so im closing it i have got this extension enabled and as you can see ive got this compiled here over here this is typescript file i will just hit this compile hero option from here i will save the document save this file again and as you can see this folder appeared here dist with the name test and its got the scripts.js output that is the output from this dot ts file now on each file save if its dot ts file you will get the javascript output in directory called dist you can also configure this extension by going to visual studio code settings you can change output folder or get minified javascript output as well so this is setting icon and you go to settings from here and then we will search this from this menu under extensions find this extension compile hero and as you can see its got some options here that you can configure from these options you can see javascript output directory that is selected as dist here type script output directory test and then this generate minified javascript only so you can configure options for this extension from the settings as well i will delete this folder and i will turn compile hero off now we have got the scripts dot yes again and for the third option we have to install typescript globally so this is our folder and i am selecting git bash here you can open terminal and then you can install typescript globally yawn global ad type script or if you use npm you can use npm install type script with dash g flag yawn global add type script enter after you install it you can check if its been installed as global dependency for your package manager or not and it was installed lets check our global dependencies yarn global list and as you can see weve got this type script installed clear to check typescript installation and version we can also do it like tsc and enter clear or we can just use tsc version and it will just give us version so in our folder lets create a basic configuration and setting file for typescript typescript configuration file it will be at the root level of your project to create tsc config file we will use command tsc --init enter and weve got this tsconfig.json file and its got some configuration these are settings for typescript compiler you can add just these to your liking if you have this file at the root level of your project type script to javascript output will be based on these settings now here is how we will run typescript compiler and get javascript output by using terminal so this is our terminal i will use clear i will use command tsc scripts dot ts scripts scripts.ts is our file name here in the same folder ill hit enter and i will get scripts.js file output right in this folder as you can see this file was generated here this is scripts file this is javascript output from typescript file and here is how we can see the compiled javascript code result or output node scripts.js and this is the number 700 and this is hello john doe output for this js file we can also watch typescript file so that we dont have to use command to compile typescript every time tsc hyphen hyphen watch scripts scripts.ts we are watching this file scripts.ts and enter and now starting compilation watch mode now if i use 500 here and use only john here and i hit save then you can see our result has changed here you can see 500 and here you can see john i will close this file web style press save and as you can see the javascript file changed and we can open another terminal in this folder and we can give command node scripts dot js to see the output hundred and hero web style press so these are few ways you can use to get a javascript output from a typescript file i will use ctrl+c and ill close this terminal to recap one method is to use online tools to convert typescript into javascript and then second method is to use some extension like compile hero and third method is to use terminal and install typescript globally and use tsc command to compile typescript into javascript or to watch a typescript file to compile typescript file into javascript file as soon as typescript file will change you will get the updated output in javascript file alright like share comment and subscribe stay tuned and i will see you in the next video