Using Typescript in a new type of application

JavaScript was originally designed to manipulate the DOM in the small Document Object Model (DOM) tree. Over time, JavaScript has become popular and is now the mainstream language for the development of applications from small markets to large applications. As the popularity of JavaScript continues to increase, support for its developers in a variety of tools and languages has emerged, typescript is one such language.
What is Typescript? How does she work?

Typescript is a superset of JavaScript that allows you to write and generate more strongly typed and object-oriented JavaScript code, but retains the flexibility of the developer's favorite (or sometimes hateful) JavaScript. Typescript expands the scope of JavaScript to allow it to go into enterprise applications, web site development, and, in the past, unwieldy areas of lack of relevant tools.

Tsc.exe is an open-source typescript compiler/code generator that can be downloaded from the typescriptlang.org Web site. Typescript is a standalone compiler, so you can open a command prompt window at any time and execute tsc.exe with the appropriate parameters, as follows:

Tsc.exe--out outputfile.js inputfile.ts

Write the typescript code first, then put it in the compiler "turn", and Out is the JavaScript code that can be run. Although typescript is a code generator, it does not export unnecessary code (unlike the usual behavior of visual design tools), and does not convert variable names and adjust variable orders. This indicates that the final output is easier to debug because the output is straightforward JavaScript code.

JavaScript is already an object-oriented language, but its archetypal syntax is a big turnoff for many developers. To address this problem, Typescript adds functionality such as classes and interfaces to JavaScript, which is also a recommended feature for the ECMAScript 6 (ES6) standard. This makes typescript a syntax-tainted code generator, which in most cases reduces the amount of JavaScript code to be maintained. For example, the following code uses the archetypal syntax:

function Animal (name, species, Habitat) {this
  .
          name = name;
  This.species = species;
  THIS.HABITAT = Habitat;
}
Animal.prototype.sayHello = function () {
  console.log ("rawr!");
}
var animal =   new Animal ("Fluffy", 
  "Velociraptor", 
  "everywhere".
          Run and hide. ");
Animal.sayhello ();

The example above starts with a constructor, which is an extremely frequently used JavaScript pattern, with no encapsulated class definitions common in other object-oriented languages. In a constructor, use the This keyword to define a variable that is similar to a class instance member. Outside the constructor, it is the actual prototype method that binds the JavaScript method to the class. In Typescript, a class can write the same code as the previous example, but the syntax is more natural, as shown in Figure 1 .

Figure 1 Typescript Class

          Class Animal
{  
  name:string;
  species:string;
  habitat:string;
  Constructor (name:string, Species:string, habitat:string)
  {this
    .
          name = name;
    This.species = species;
    THIS.HABITAT = Habitat;
  }
  SayHello ()
  {
    Console.log ("rawr");
  }

For many developers, the Typescript code example in Figure 1 is much more readable than the corresponding traditional JavaScript code. Obviously, the above code acts as a function of the class definition and the member list, and shows the type of the parameter. Typescript also provides type checking, interfaces, static compile-time checking, lambda expressions, and generally compiled (not interpreted) languages. These extensions of the JavaScript language are useful because they allow you to avoid common coding traps.

Other common JavaScript challenges include the presence of too many variables with public scope in the JavaScript global namespace, which can cause global namespace pollution (these issues seem to occur too frequently). Fortunately, typescript the implementation of the module to help solve the problem, because the module behaves like a namespace and creates closures that prevent global clutter. The modules in Typescript are divided into two types: internal modules and external modules. The internal module contains the code declared in the current file, and if you want to import the external module, you must add the///<reference path= ' path/reference-file.ts '/> At the beginning of the current code file. To declare a module, simply use the module keyword and add curly braces at the end. The typescript module looks like this:

          Module Outermodule {
  "use strict";
  Module Innermodule {
    export function afunction {s:string};
    Export var variable = 1;
  }
}

The generated JavaScript looks like this:

          var outermodule;
(function (outermodule) {
  "use strict";
  var innermodule;
  (function (innermodule) {
    function afunction () {s:string}
    innermodule.afunction = afunction;
    innermodule.variable = 1;
  }) (Innermodule | | (Innermodule = {}))
(Outermodule | | (Outermodule = {}));

The code above creates a singleton module instance that can be accessed by applications from any Windows store in the Outermodule namespace. As you can see, the module renders as an anonymous function (that is, the Immediately invoked functions Expressions (Iife)). Any member variables marked with the export directive can be accessed globally, equivalent to C # 's member superscript internal keywords (i.e., project scope).