TypeScript 2.x By Example: Build engaging applications with TypeScript, Angular, and NativeScript on the Azure platform

One of the main features of JavaScript is that it's a dynamically typed language. This means a type of a variable is determined at runtime and the compiler does not generate any errors if there is a type mismatch until it fails. We can have the same variable hold a string, a number, an array, or an object and JavaScript will not complain, but it can cause errors at runtime if not handled. JavaScript uses type inference to identify the type of data stored in a variable, based on which it operates on the variable. The following is an example where type inference fails between a number and a string.

In the following code, when num is assigned a value of 1, JavaScript infers it as a number and performs addition when we try to add a value to num. Later, when we assign a string to num, JavaScript infers it as a string and performs concatenation when we try to add a value:

var num = 1;
num += 1;
console.log(typeof(num)); // returns: number
console.log(num);  // returns: 2
num = 'str';
Console.log(typeof(num));  // returns: string
num += 1; // retun: str1

Arrays are a very common example of where JavaScript dynamic typing fails. We define an array variable, score, which has the list of scores in it. To fetch the selected elements from an array, we use the slice function. Till the time score is an array, this works, but imagine if someone wanted to assign a single element in an array and instead they assigned a number. Now the same slice function will fail:

var score = [1,2,3,4,5,6];
console.log(score.slice(2, 4)); // returns: [3,4]
score = 10;
console.log(score.slice(2, 4)); // Uncaught TypeError: score.slice is not a function

If you have a number in quotes, JavaScript will determine it as a string but, if you do a comparison in an if statement to a literal number, then JavaScript will automatically try to convert the string into a number and perform the comparison:

var result = '1';
console.log(result == 1); // returns true
console.log(result === 1); // returns false

Now, this can be something which you may or may not have expected to happen, because sometimes we may not want JavaScript to do these type of comparisons. For small applications, you can make sure that you are passing proper types, but that's not so easy in the case of large-scale applications. One solution would be to use === rather than ==, which makes JavaScript not coerce the type of a variable. These solutions are not intuitive and we have seen many developers making this mistake.

Like dynamic type, JavaScript allows variables to be assigned null or undefined. Unless proper validations are done every time a variable is accessed, we get to see errors such as undefined is not a function or cannot read property x of undefined. This happens because there are no specific checks in JavaScript by the language to make sure we are not accessing or assigning any variable or function as undefined or null. TypeScript, with its type declaration, reduces the probability of having such issues and, in addition to that, TypeScript has a compiler flag, strictNullChecks, which allows the compiler to flag any instance where the application is assigning any null or undefined type. The TypeScript compiler also does control flow analysis to keep track of whether a variable can be null or undefined.

The control flow analysis means that TypeScript is able to scan through the code and identify whether a specific variable or property can be null or undefined.

<h2>Soft skill

Another challenge can be for the developer with the non-JavaScript background. A lot of developers move from server-side languages such as Java or C# and are accustomed to writing an object-oriented style of code. JavaScript, with its keywords of prototype, does provide a mechanism to achieve most of the object-oriented concepts but these concepts are not easy to understand and use.

TypeScript solves these problems by adding types to the variables, to parameters, and to the return value of functions. Having types defined helps TypeScript to identify and flag such scenarios. TypeScript maintains the flexibility of JavaScript with respect to types by not making it mandatory to define them. TypeScript, similar to JavaScript, infers the type based on the initial value assigned to the variable. If, at a later point in time, the same variable is assigned a conflicting type, TypeScript flags it at design time as well as at compile time.

Duck typing is the ability of a language to determine types at runtime. JavaScript follows the duck typing paradigm; it has types but they are determined dynamically and developers don't declare them. TypeScript goes one step further and adds types to the language. Having data types has been proven to increase productivity and code quality, and reduce errors at runtime. It's better to catch errors at compile time rather than have programs fail at runtime. TypeScript provides the feature of inferring types, thus allowing developers to only optionally define types. As seen in the following code, projectStatus is assigned the type number:

let projectStatus = 1;
projectStatus = 'Success';// Error: Type 'Success' is not assignable to type 'number'

TypeScript determined the type as number and then alerted us when we were trying to assign a string. TypeScript also provides features such as union types (we can assign multiple types to a variable) and intersection types. We will be discussing these in detail in the next chapter.

TypeScript provides type analysis based on the code flow. Types can be narrowed or broadened based on the code flow. This helps to reduce logical errors when we have multiple types of a variable and logic varies with type as shown in the following code:

function projectStatus (x: string | number) {
    if (typeof x === 'string') { // x is string | number
       x = 10;
    }
    return x; // type of `number
}

TypeScript by code flow analysis determined that the type of x returned from the function is a number.

Encapsulation is one of the key pillars of object-oriented programming, which states that objects of a function should only expose required members to external code and hide the implementation details. With encapsulation, we provide a flexibility to the system to change its implementation without changing the contract. TypeScript provides encapsulation through the concept of classes, modules, and access modifiers. Classes are like containers which contain common features. Classes expose only the required fields using access modifiers such as private/public/protected. Modules are the containers of classes and provide another level of encapsulation for the group of classes achieving specific functionality:

class News{
    public channelNumber : number;
    public newsTitle: string;
    private url: string;
}
let espn = new News();
espn.channelNumber = 1;
espn.newsTitle = 'NFL Today';
espn.url = 'http://go.espn.com'; // url is private and only accessible inside the class

The espn.url will throw an error because the URL property is private to the class.

In object-oriented programming, inheritance allows us to extend the functionality of a class from a parent class. In TypeScript, we use a keyword, extends, in a child class and refer the parent class. By extending the functionality in the child class, we can have access to all the public members of the parent class:

class Editor { 
  constructor(public name: string,public isTypeScriptCompatible : Boolean) {}

  details() {
    console.log('Editor: ' + this.name + ', TypeScript installed: ' + this.isTypeScriptCompatible);
  }
}

class VisualStudio extends Editor{
    public OSType: string
    constructor(name: string,isTypeScriptCompatible : Boolean, OSType: string) {
        super(name,isTypeScriptCompatible);
        this.OSType = OSType;
    }
}

let VS = new VisualStudio('VSCode', true, 'all');
VS.details();

The VisualStudio class extends the Editor class and hence the instance of VisualStudio inherits the details method.

The primary purpose of an interface is to drive code consistency. An interface is a contract defined and any class that implements the interface needs to implement all the properties of that interface. The interface is a pure TypeScript concept and is not part of ECMAScript; this means that when TypeScript code is converted to JavaScript, interfaces are not converted:

interface Planet{
    name: string;
    weather: string; 
}

class Earth implements Planet {
    name: string;
    weather: string;
}

let planet: Planet= new Earth();

TypeScript allows the flexibility to assign objects with different identifiers if they have the same attributes. This means that if two objects have the same set of attributes then they are considered to be of the same type and we can assign one object to another:

interface Planet{
    name: string;
    weather: string; 
}

class Earth implements Planet {
    name: string;
    weather: string;
}

let planet: Planet;

class Pluto{
    name: string;
    weather: string;   
}

planet = new Pluto()

Here, we assigned an instance of Pluto to planet even though Pluto does not implement Planet. This happens because the attributes and their type in the Pluto class are same as interface .

Decorators are a TypeScript-specific concept at the moment, although they are in a stage two proposal for JavaScript (https://github.com/tc39/proposal-decorators). The decorator is one of the structural design patterns from the Gang of Four, which implies adding additional responsibility to an object. In TypeScript, they are experimental features and we need to enable them in the compiler configuration (tsconig.json). TypeScript allows the use of decorators on classes, properties, methods, and accessors. Decorators are commonly used in Angular and we will see the examples in the upcoming chapters.

Visual Studio is a full-blown IDE provided by Microsoft for all .NET based development, but now Visual Studio also has excellent support for TypeScript with built-in project templates. A TypeScript compiler is integrated into Visual Studio to allow automatic transpiling of code to JavaScript. Visual Studio also has the TypeScript language service integrated to provide IntelliSense and design-time error checking, among other things.

With Visual Studio, creating a project with a TypeScript file is as simple as adding a new file with a .ts extension. Visual Studio will provide all the features of TypeScript out of the box.

VS Code is a lightweight IDE from Microsoft used for web application development. VS Code can be installed on Windows, macOS, and Linux-based systems. VS Code can recognize the different type of code files and comes with a huge set of extensions to help in development. You can install VS Code from https://code.visualstudio.com/download.

VS Code comes with an integrated TypeScript compiler, so we can start creating a TypeScript project directly. The following screenshot shows a TypeScript file opened in VS Code:

To run the project in VS Code, we need a task runner. VS Code includes multiple task runners which can be configured for the project, such as Gulp, Grunt, and TypeScript. We will be using the TypeScript task runner for our build.

VS Code has a Command Palette which allows you to access various different features, such as Build Task, Themes, Debug options, and so on. To open the Command Palette, use Ctrl + Shift + P on a Windows machine or Cmd + Shift + P on a macOS. In the Command Palette, type Build, as shown in the following screenshot, which will show the command to build the project:

When the command is selected, VS Code shows an alert, No built task defined..., as follows:

We select Configure Build Task and, from all the available options as shown in the following screenshot, choose TypeScript build:

This creates a new folder in your project, .vscode and a new file, task.json. This JSON file is used to create the task that will be responsible for compiling TypeScript code in VS Code.

TypeScript needs another JSON file (tsconfig.json) to be able to configure compiler options. Every time we run the code, tsc will look for a file with this name and use this file to configure itself. TypeScript is extremely flexible in transpiling the code to JavaScript as per developer requirements, and this is achieved by configuring the compiler options of TypeScript.

Declaring a function is straightforward, with the function name, set of parameters, and then, inside curly braces, the implementation. After the set of parameters is declared, we can also annotate the function with the data type of the return value from the function. By default, all properties and functions inside the class are public.

Before we look at the remaining functions in our class, let's look at the JavaScript generated so far for our code. If you are following along then, to generate the JavaScript file, use Ctrl + Shift + B on Windows and Cmd + Shift + B  on macOS. This command will build the code and generate a corresponding JavaScript file. If we have the sourcemap flag turned on in our taskconfig.json then the build will generate another file with the name filename.js.map, which in our case is todo.js.map.

As we discussed earlier, for an interface, no code is generated, hence we just see the code for our two classes in the JavaScript file:

var Todo = (function () {
    function Todo(name, description, completed) {
        this.name = name;
        this.description = description;
        this.completed = completed;
   }
    return Todo;
}());
var TodoList = (function () {
    function TodoList() {
    }
    TodoList.prototype.createTodoItem = function (
                                        name, description) {
        var newItem = new Todo(name, description, false);
        var totalCount = TodoList.allTodos.push(newItem);
        return totalCount;
    };
    TodoList.prototype.allTodoItems = function () {
        return TodoList.allTodos;
    };
    return TodoList;
}());
TodoList.allTodos = new Array;

You will see that for both of our classes, the TypeScript compiler generated an immediately invoked function expression (IIFE) and assigned it to the variables Todo and TodoList respectively. An IIFE is a JavaScript function which is auto-executed when the JavaScript file is parsed. To identify the IIFE, look at the parentheses at the end of the function. The methods createTodoItem and allTodoItems are converted to prototype functions in JavaScript. The prototype is a JavaScript function which allows us to add behavior to our objects. In this case, the createTodoItem and allTodoItems functions introduce new behavior to the TodoList object. We had an allTodos static array in our TodoList class, which in JavaScript is just an array. 

The next function in our file is a window.onload function which is called when the browser is loaded.  The window.onload function is a standard JavaScript function and here is a good example of TypeScript being a superset of JavaScript. All JavaScript functions can be used directly in TypeScript. In the window.onload function, we just attach the event listener to the add button:

window.onload = function(){
    let name= <HTMLInputElement>document.getElementById("todoName");
    let description = <HTMLInputElement>document.getElementById(
                       "todoDescription");
    document.getElementById("add").addEventListener(
      'click',()=>toAlltask(name.value, description.value)); 
}

TypeScript allows us to type cast one type of value to another using <> or the as keyword. We will discuss this in more detail in later chapters; here, we should just know that document.getElementById returns a type of HTMLElement and, because we know that this element is a input element, we type cast that into HTMLInputElement. The last function, todoAllTask, is called every time we click and add a function, which takes a name and description entered by the user as input, calls the createTodoItem function of the TodoList class and then fetches the updated list of all Todo items and assigns that to a div using an ordered list. These two functions, when looked at in a JavaScript file, will be almost the same as what we wrote in TypeScript.