3 Easy Ways to Compile TypeScript to JavaScript | 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:
www.typescriptlang.org/play/
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.
✅ How To Hide / Protect JavaScript Code - Techniques and Tools
• How To Hide / Protect ...
✅ React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS & JavaScript Debugging Fast
• React JS UNDEFINED Sol...
✅ Calculate Sum or Total from Values in Array & Array Object | Learn JavaScript | Reduce Method
• Calculate Sum or Total...
✅ Get URL Parameters in JavaScript | URLSearchParams
• Get URL Parameters in ...
✅ DIV to PDF, Iframe to PDF using JavaScript Only (with CSS & Images Support)
• DIV to PDF, Iframe to ...
✅ How To UnMinify JavaScript Minified Files Easily | Decrypt Complex JavaScript Code
• How To UnMinify JavaSc...
✅ Toggle Class in Vanilla JavaScript | Learn JavaScript
• Toggle Class in Vanill...
✅ How to Execute a JavaScript File by using NPM
• How to Execute a JavaS...
✅ Get User's Location (Country, State, City) with Free Unlimited API Access | PHP & JavaScript
• Get User's Location (C...
✅ Replace jQuery with Vanilla JavaScript Code Easily | jQuery vs JavaScript
• Replace jQuery with Va...
✅ Toggle in Vanilla JavaScript
• Toggle in Vanilla Java...
✅ MINIFY JAVASCRIPT FILES & FOLDERS in Multiple Ways (Command Line & Code Editor)
• MINIFY JAVASCRIPT FILE...
✅ JavaScript vs jQuery | Difference between JavaScript and jQuery
• JavaScript vs jQuery |...
✅ JavaScript Variable Redeclare & Reassign | VAR vs LET vs CONST | Practical Examples
• VAR vs LET vs CONST | ...
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: / webstylepress
Website: www.webstylepress.com
FaceBook: / webstylepress
Twitter: / webstylepress
Instagram: / webstylepress
LinkedIn: / webstylepress
GitHub: github.com/webstylepress
#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.

[@ReOp14]

Hey, how do you exclude files from being transpiled?

[@traezeeofor]

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

[@windelmarcelino160]

Thanks for sharing 😍

[@muhammadjonhabibov3569]

Thank you very much.

[@aguyfromparalleluniverse]

you earned a sub mate

[@webstylepress]

Thank you. Much appreciated.

[@kseku172]

Hi! nice tutorial but what's the theme?

[@VaibhavNaik26]

What about .d.ts to .js or .ts ??
These methods don't work for .d.ts

[@webstylepress]

.d.ts is the type definition files that allow to use existing JavaScript code (without type definition) in TypeScript. The d.ts file doesn't contain any implementation, and isn't compiled to JavaScript at all. You don't need to convert .d.ts files.