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

There are so many ways to convert a TypeScript file into regular JavaScript file so that you can use it anywhere. .ts is typescript file. Web browser won't run a .ts file. So we need to convert / compile TypeScript file into JavaScript file.

Instead of writing plain old JavaScript, it's 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's maintainable across multiple teams. It's just better.

Don't type plain JavaScript, Use TypeScript everywhere. ReactJS, Angular and such frameworks and libraries encourage you to use TypeScript. While working in ReactJS and Angular, you don't need to convert TypeScript into JavaScript. That happens in background by webpack or some other module bundler. But if you are working on standalone JavaScript code, then you need to configure a mechanism to convert TypeScript into JavaScript.

Don't get confused with
- Convert TypeScript into JavaScript
- Compile TypeScript into JavaScript
- Transpile TypeScript into JavaScript
- Transform TypeScript into JavaScript
These are all same. Just cheesy names to do similar thing.

One way to convert TypeScript into JavaScript is to use some online tool. You can go to Typescript official website and use this tool:

Paste Typescript code at the left side of editor and it will show compiled javascript code in the right side panel. You can also run code there and see it's output.

Second way is to use a good code editor like Visual Studio Code and then use its extension like: 'Compile Hero'. Once you have this extension installed in Visual Studio Code, You will see 'Compile Hero' link at the bottom. Click that link while .ts file is opened and you will get a dist folder containing compiled javascript file. Now on each file save command from code editor, you will get the JavaScript output in directory called 'dist' automatically. You can also configure this extenions by going to visual studio code settings. You can change 'output folder' or get minified javascript output by using those settings.

Third way is to install TypeScript globally in your machine along with NodeJS. This will be installed for your package manager like npm or yarn. Then from command line you can access typescript utility and use commands to compile typescript into javascript and you can also watch typescript files for changes. This utility will also give you command to create a typescript configuration file.

So these are few ways that you can use to get JavaScript output from a TypeScript file easily.

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#webstylepress #tutorials #webdevelopment #typescript #javascript #js #compiler #converter #ts

[webstylepress]

To watch more related videos, please LIKE, SHARE & SUBSCRIBE! WebStylePress needs your support.

[wgedwardsvideo]

Thank you for creating this video. It was just what I was looking for, and it was very well organized.

[traezeeofor]

Thanks for the Compile Hero referral. Apparently making my life easier already!👍

[ReOp]

Hey, how do you exclude files from being transpiled?

[VaibhavNaik]

What about .d.ts to .js or .ts ??

These methods don't work for .d.ts

[kseku]

Hi! nice tutorial but what's the theme?