Typescript — Hello World Program

Typescript — Hello World Program

In this lesson, we are going to learn about the basic structure of a TypeScript program and understand a few concepts of the compilation process. Then we will see how we can run the compiled JavaScript program using node and ts-node.

In the previous lesson, we learn about the history of JavaScript and how TypeScript solves some of the problems linked with the JavaScript development in general. We also understood the process of compiling a TypeScript program to JavaScript using the built-in TypeScript compiler so that we can run it inside a browser or Node.

When you install TypeScript, you get the tsc command that invokes the TypeScript compiler. The TypeScript compiler is designed to process TypeScript program files (ending with _`.ts__ extension_) and converting them to vanilla JavaScript files (_ending with _.js_` extension)._

The tsc command takes the file paths of these TypeScript programs as command-line arguments as well as compiler-options to customize the compilation settings using command-line flags. The command-line API of TypeScript has been explained in detail in the Compiler Flags lesson (coming soon).

We can provide this information from a configuration file tsconfig.json as well. When you execute the tsc command without any command-line arguments, the TypeScript compiler looks for the tsconfig.json in the current directory. The file structure of tsconfig.json and how TypeScript compiler searches for it is explained in detail in the Compilation lesson (coming soon).

When the TypeScript compiler processes TypeScript program files (let’s call them _**_source files**) and checks for any type related issues, it emits JavaScript files in an output directory. The output directory can be controlled using command-line flags or the tsconfig.json but if no value for it is provided then the output directory is the current directory.

TypeScript compiler can emit JavaScript in one of the two mode. The first and the default mode is the source-to-destination mapping. In this mode, each source .ts file will have its corresponding compiled .js output file in the output directory.

In this mode, the output file has the same name as the original source file, only the extension is changed from .ts to .js. TypeScript also likes to maintain the folder structure, therefore if a source file path is a/b/c.ts, then the output file is emitted with the same folder structure inside the output directory such as /dist/a/b/c.js. This is quite useful if you want to maintain the same file structure of the project in the output.

The second mode is bundled. In the bundled mode, all source .ts files are compiled into a single .js file. In this mode, you can give any filename you want to the output .js bundle file. This is useful when you want to ship a project as a library that can be imported from a single .js file in the browser (using a _`

programming javascript web-development typescript nodejs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire NodeJs Developer

Looking to build dynamic, extensively featured, and full-fledged web applications? **[Hire NodeJs Developer](https://hourlydeveloper.io/hire-dedicated-node-js-developer/ "Hire NodeJs Developer")** to create a real-time, faster, and scalable...

Hire Nodejs Developer

Looking to **hire NodeJS Developer**[https://www.dataeximit.com/node-js-development/](https://www.dataeximit.com/node-js-development/ "https://www.dataeximit.com/node-js-development/") to build a perfect back-end to your website or...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.