Typescript tutorials Hello World demo application examples

Typescript language basics

Typescript Tutorial Hello World Example

Typescript is an extended version of javascript with more features like static typing, Modules based code, Object-oriented support. Typescript is the opensource language from Microsoft.typescript will not run on any browser directly. You need transpiler to compile typescript to javascript.

Typescript Compiler/transpiler flow

The above diagram depicts the steps for execution code process

  • The developer writes the code using typescript language in Normal Editor/ Compatible¬†IDE. typescript files always contain .ts extension.
  • Either Use typescript compiler (tsc¬†command )or any other build tools to compile it.
  • Transpiler or compiler is processing converting code written in a programming language to another programming language.
  • The output of compilation process javascript code which runs in all popular browser.

Typescript Advantages or Pros

  • Static typing, type inference meaning variables will be declared with the type. You can assign another different type to this variable.¬†
  • Support Object-oriented concepts like interface, classes. This will be very easy to learn for developers who worked on Object-oriented languages like Java and C++
  • Integrated Support for all popular Editors like Visual Studio Code, Eclipse, and Intelli Editors
  • All the functionalities support in all popular browsers.
  • Code errors will be shown at compile time and very easy for developers to fix it instead at production.
  • Support NPM based applications as well as normal applications using typescript compiler
  • Supports Latest Javascript features like ES5 and ES6
  • Supports all popular frameworks like Angular, React and Vue.js
  • Modules/components Support
  • IDE supports¬†

Typescript disadvantages or Cons

  • One more language to learn. The learning curve is required.
  • The compilation is required to run code in the browser

Typescript IDE/Text Editors Support.

IDE is used for faster development. and get a lot of advantages with for Writing code, formatting code, Autosuggestion, compilation and Debugging support. and also tells the errors while typing the code. Typescript  support available in almost all popular Editors via  either inbuilt or  plugin extension

Eclipse Plugin for typescript:- Opensource eclipse has very good support for typescript language. You can check eclipse javascript IDE and commercial MyEclipse version has inbuilt support 

Visual Studio Code integrated typescript:- This is popular IDE in the javascript community for web application development.  It has inbuilt support for typescript language. And also has a lot of custom plugins for different frameworks.

Atom editor plugin support:- This editor has support via plugins. Atom-Typescript plugin has the latest version of typescript.

Intelli Webstorm support:- Intell has different IDE for java and javascript projects. Both IDE has support for this language. There are a lot of extension plugins you can add for other features.

You can also use normal notepad or Edit plus which you need to write manually code without autosuggestion feature.

Installation and setup typescript on windows.

The only prerequisite is to have a setup of NPM command working. if you don’t have npm command working Please install nodejs on your setup before installation of typescript.

C:\>npm --version  

Once npm command is working, please  follow for installation

`npm install -g typescript  
C:\>tsc --version  
Version 2.8.1  

-g option installs the typescript global module. if you want to install in project remove -g option.
**Linux/UNIX Installation ** is also same except you have to use Sudo command for root permission

`sudo npm install -g typescript  

TSC command basic syntax

`tsc [options] [file ...]  

please see below examples of this command

`tsc file.ts - compiles typescript file and generate file.ts  
 tsc --outFile output.js newfile.ts - cutomozie the outfile  

Typescript compiler options

The below are different options tsc command




out file name for compiled typescript code


directory for output of compiled typescript files


External Libraries required for compilation of typescript code. without this option, Default libraries are used to compile it. Use this option for Latest javascript libraries support es6


Create a Typescript prototype project with tsconfig.json file included


Include javascript files to compile


Compiler will not give an error if any unreachable code

Hello World Basic Example

`function HelloWordFunction(information) {  
var msg= 'Hello World First Typescript example';  

and see the compilation and generation of javascript using transpiler tsc command

`tsc HelloWorld.ts  
 Volume in drive B has no label.  
 Volume Serial Number is 0A9B-F96C  
 Directory of B:\typescriptdemo  
14-07-2018  20:14               153 HelloWorld.js  
14-07-2018  20:11               152 HelloWorld.ts  
               2 File(s)            305 bytes  
               2 Dir(s)  99,749,167,104 bytes free  

Similar Posts