What is Typescript and why we need it for hybrid mobile app development?

For developing hybrid mobile apps on the Ionic framework, it is necessary for us to understand the Typescript programming language.

Essentially, the core programming language that makes an ionic app is Javascript. You could simply write your entire app using Javascript and deploy it with the help of the ionic framework - it will behave exactly like a mobile app.

However, there are several limitations of Javascript which makes it extremely difficult to use it as a programming language for building large scale or complex applications. Javascript lacks a good code structure - having too much of javascript code in an application can make it unwieldy making future code changes/enhancements and code reuse extremely tedious. Javascript also lacks severely in important features such as - object orientation, strict type checking, compile-time error checks, etc.

Hence javascript is not a suitable language for enterprise scale app development.

Typescript was therefore introduced to overcome the limitations of Javascript and then harness javascript's capability in building multi-platform mobile apps. You can view Typescript as a modern version of Javascript which along with an IDE makes enterprise-scale application development easier. It is a superset of javascript, which means that any javascript code is also a valid typescript code.

While javascript files have a .js extension, typescript files have a .ts extension. A .ts file in itself does not run when you run your mobile app. Multiple .ts files are created inside a compatible IDE (such as Atom, Visual Studio Code, etc.) and comprise your application source code. When compiled, the .ts codes are converted into javascript codes and are bundled along with html & css files, other assets such as images & icons, and a platform specific browser such as UIWebView (for iOS) or WebView (for Android), to form your complete app. We all know that javascript is portable across multiple browsers, hence the resulting app becomes cross-platform compatible. The bundling of your codes is done by ionic to generate a package which we call a mobile app.

As I mentioned, typescript is a superset of javascript or you can say that javaScript is a subset of typescript. This means that you can rename any .js file to .ts and include it in your application code structure along with other typescript files. It will eventually get compiled back into javascript along with other .ts files and become an integral part of your hybrid mobile app.

Let us look at a sample typescript code just to get a picture of what a .ts file may look like.

Do not worry if you do not understand this code. It is not important at this stage.

 import { Component } from '@angular/core';

 @Component({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>
              <p>Email: {{email}}</p>
             `,
 })

 export class AppComponent {
   name = 'Rajeev Kumar';
   email = 'rkumar@ctsindia.com';
 }

When compiled in ionic, the above .ts code will get converted into a .js code which will look somewhat like below code.

 "use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length;
   var r = c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc;
   var d;
   if(typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
   else
     for(var i = decorators.length - 1; i >= 0; i--)
	  if(d = decorators[i])
	   r = (c<3 ? d(r):c>3 ? d(target,key,r) : d(target,key)) || r;
   return c > 3 && r && Object.defineProperty(target,key,r), r;
 };

 var __metadata = (this && this.__metadata) || function (k, v) {
   if(typeof Reflect === "object" && typeof Reflect.metadata === "function")
     return Reflect.metadata(k, v);
 };

 var core_1 = require('@angular/core');

 var AppComponent = (function() {
   function AppComponent() {
     this.name = 'Rajeev Kumar';
     this.email = 'rkumar@ctsindia.com';
   }
   AppComponent = __decorate([
     core_1.Component({
            selector: 'my-app',
            template: "<h1>Hello {{name}}</h1>\n <p>Email: {{email}}</p>\n",
        }),
        __metadata('design:paramtypes', [])
    ], AppComponent);
   return AppComponent;
 }());

 exports.AppComponent = AppComponent;

As is clearly evident, if you were to write the above .js code directly, won't it be very complicated? Your can clearly see how ionic with typescript makes coding so much simpler.

Thus, TypeScript (along with an IDE) is just a development aid that you use at coding-time to improve the quality of your JavaScript codes and make them more readable and maintainable. All TypeScript codes eventually are converted into their JavaScript equivalent for the purpose of execution. The converted/generated JavaScript can therefore make use of all existing JavaScript frameworks, tools, and libraries.

TypeScript is an open-source language created by Microsoft. Other similar languages include - CoffeScript, Dart. It is a strongly typed, object oriented, compilable programming language. Note that unlike typescript, javascript is an interpreted programming language. The compiled version of typescript is javascript.

Another way of looking at Typescript is - it is Javascript with add-on features that enables you to write well structured codes and gives you better code hinting in your editor (the IDE). It also enables you to check for errors at compile time itself unlike javascript - you would be well aware that javascript codes can be tested for errors only at run-time, i.e. by actually running them. Further, the typescript error messages are quite developer friendly and easy to decipher thus speeding up the development process.

If you do not wish to use Typescript, Ionic allows you to use the standard Javascript. But if you are indeed serious about app development, you cannot afford to ignore typescript. My sincere advice is - Learn Typescript. It is quite similar to other object oriented programming languages such as C#, Java, or PHP. If you have ever worked with any object oriented language and done some development in the MVC architecture, you will find mobile app development a cakewalk.