Introduction

The Web is developing very quickly and new standards are being all the time adopted into the browsers. As through the past years we have seen lots of changes in the web browsers and web engines, the same happened to the language that propels them. JavaScript is changing also. A new standard has shown up – ECMASCRIPT 6. But not all browsers support it completely. Therefore few years ago we have been introduced with a language called TypeScript. Which is a typed superset of the JavaScript language and is supported by all browser engines.

You may ask how it is possible that TypeScript is supported by all browsers. The answer to this question is easy. TypeScript is compiled to JavaScript with the usage of the TypeScript compiler. And in the compilation process it returns a plain JavaScript file, ready to be used by the browsers or node.js or any other JavaScript engine which is ES3-compatible.

Alongside this article we have attached a TypeScript example code and its compiled version to JavaScript. It is in the typeScriptDemo.zip attachment.

Why use TypeScript?

First of all TypeScript syntax is far more similar to languages like ActionScript 3.0 and Java. TypeScript offers the usage of classes, modules and interfaces. Thus making it an ideal tool for structuring large scale web projects. It is also worth noting that TypeScript is strictly typed. This means we can specify the type of the variables like in Java and other strongly typed programming languages. TypeScript also supports static checking, symbol-based navigation, statement completion, and code refactoring

Also, it is worth mentioning that TypeScript is gaining on popularity (fig. 1) together with frameworks like Angular.js and Angular.js 2. It can be used in these frameworks as the base coding language. Even the Phaser 3 game engine, renamed to Lazer will also allow to program using TypeScript. So all in all TypeScript is taking the ground from some time now.

In this article we will show how to use TypeScript in Tizen development. 

Figure 1 – TypeScript popularity is rapidly increasing over CoffeeScript – Google Trends

Tools and prerequisites

In order to use TypeScript, you must first install the necessary package using npm. This can be done by typing in the console, in Ubuntu the following command.

npm i -g typescript

This will install TypeScript globally and will allow you to use the tsc command to start the compiler using the command line interface in Ubuntu. Just go to the directory with your TypeScript code and run the following command.

tsc yourTypeScriptFile.ts

As you may have observed the TypeScript files have a .ts extension. The example above will compile  the TypeScript code and as the output you will get a yourTypeScriptFile.js file in the same folder.

A more convienient way of compiling using the TypeScript compiler is to set a watcher on a specific folder. Then, whenever you make a change to a .ts file the compiler will automatically compile all the TypeScript files in that folder and produce JavaScript files.

You set the TypeScript watcher by going into the directory with your TypeScript code and using the following command

tsc –w

From now on all your TypeScript files, whenever changed, will be automatically compiled to JavaScript.

Above we have showed a quick example how to use TypeScript. But the proper way to use it is to create a TypeScript project, with the following command in the appropriate directory is below.

tsc --init

Invoking this command will create a TypeScript project file – tsconfig.json. Inside it you can configure how your TypeScript compiler should behave when compiling .ts files. As you can see from the configuration file below, you can set the type of modules which will be used in TypeScript or the target JavaScript version. You can also set the root directory of your TypeScript project and the output directory for your compiled JavaScript files. You can set a lot of things, including if the files should be compiled on save, built on save or if the comments should be removed or not. Or should the compiler create source maps for the code.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es3",
        "noImplicitAny": false,
        "outDir": "built",
        "rootDir": ".",
        "sourceMap": false
    },
    "exclude": [
        "node_modules"
    ]
}

So this is mainly the quickest way to create compiled JavaScript code from TypeScript code. The tsc compiler is one way of doing that. The second way is to use the Atom code editor and the atom-typescript plugin.

You can install Atom by typing the following commands in the Ubuntu command prompt.

 sudo add-apt-repository ppa:webupd8team/atom
 sudo apt-get update
 sudo apt-get install atom

After this step we should install the atom-typescript plugin which provides TypeScript syntax detection and compiling TypeScript to JavaScript. In order to install the plugin initiate the following commands in the Ubuntu command prompt using the atom package manager (apm). Just remember that apm needs git in your path.

apm install atom-typescript

After that step you are ready to code in TypeScript with Atom and produce .ts files. Then every time when you save a TypeScript file (ctrl + s) the plugin will automatically compile the .ts file to a .js file. In order to generate a tsconfig.json configuration file in Atom just use the key combination cmd or ctrl + shift + p. Then you should see a popup (fig. 2) with commands. Then in the popup type in “Typescript: Create tsconfig.json Project File”. This option should show up. Click it and then by doing this you will set up a TypeScript project like it was shown earlier in the tsc compiler case.

Having done that it is finally the time to show an example of TypeScript and compiled JavaScript.

Figure 2 – The option to choose in order to generate a tsconfig.json file in Atom

TypeScript compilation to JavaScript

Now we will show an example of typical TypeScript code and its JavaScrpt output. Below we have created a very simple class in TypeScript named Person. This class has a function getPlayerInfo() which outputs a String with all information about the person.

  class Person {
      myName:String;
      mySurname:String;
      myAge:number;

    constructor(name:String, surname:String, age:number) {
      this.myName = name;
      this.mySurname = surname;
      this.myAge = age;
    }

    getPlayerInfo() {
      return String("Player " + this.myName + " " + this.mySurname + " has gained " + this.myAge + " points");
    }

  }

  var newPerson = new Person("John", "Franklin", 32);
  var fullPlayerInfo = newPerson.getPlayerInfo();

  var myDiv = document.getElementById('first');
  myDiv.innerHTML = fullPlayerInfo;

  console.log("Player full info = " + fullPlayerInfo);

After using the compiler on the TypeScript file, you can see in the output file the plain old JavaScript we all like and use.

var Person = (function () {
        function Person(name, surname, age) {
            this.myName = name;
            this.mySurname = surname;
            this.myAge = age;
        }
        Person.prototype.getPlayerInfo = function () {
            return String("Player " + this.myName + " " + this.mySurname + " has gained " + this.myAge + " points");
        };
        return Person;
    }());

    var newPerson = new Person("John", "Franklin", 32);
    var fullPlayerInfo = newPerson.getPlayerInfo();
    var myDiv = document.getElementById('first');
    myDiv.innerHTML = fullPlayerInfo;
    console.log("Player full info = " + fullPlayerInfo);

Summary

As you can see using TypeScript tools to create and compile TypeScript code to JavaScript is very easy. You can also easily create Tizen Web applications using TypeScript. Even if the TypeScript compiler does not know the Tizen API, it will emit the Tizen API code as is and it will be working fine after compilation. TypeScript is getting more popular as projects and libraries that support it show up all the time in the web, like Angular 2 or Lazer (Phaser 3). Also a great benefit worth nothing is that TypeScript lets you structure code like in mature languages, using classes, interfaces and modules. This makes it an ideal language for building large, stable and scalable Tizen web applications. And for sure it will gain much popularity in the future.

We hope that this article is useful to you and that it will encourage you to use TypeScript in Tizen Web applications.

To get more information about TypeScript we encourage you to visit the official TypeScript website.