Saturday, July 14, 2018

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
5.6.0

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 
Options Description
outFile out file name for compiled typescript code
--outDir directory for output of compiled typescript files
--lib 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
--init Create a Typescript prototype project with tsconfig.json file included
--allowJS Include javascript files to compile
--allowUnreachableCode Compiler will not give an error if any unreachable code
Hello World Basic Example
function HelloWordFunction(information) {
    console.log(information);
}
var msg= 'Hello World First Typescript example';
HelloWordFunction(msg);

and see the compilation and generation of javascript using transpiler tsc command
tsc HelloWorld.ts
B:\typescriptdemo>dir
 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


Related article