Change language

3 Easy Ways to Compile TypeScript to JavaScript | TS to JS Conversion

3 Easy Ways to Compile TypeScript to JavaScript | TS to JS Conversion

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