Skip to Content

TypeScript

2017-06-29

In this article I will try to explain all the features of TypeScript for more comfortable application development on Angular 2.

Before describing the main features, it should be noted that TS supports most of the ES6 opportunities (let, import, arrow function, etc.).

Static Types

Static types is one of the key differences between TS and JS. If in JS we do not specify a types for the variable, we can specify the types in TS, and we even must to. If the type is not specified, the variable will be of type "any". Speaking about the types in TS, they are 9:

  • Boolean
  • Number
  • String
  • Array
  • Tuple
  • Enum
  • Any (Arbitrary type)
  • null, undefined
  • Void (Absence of a specific type)

So, the variables in TS are created as follows:

let x: boolean = true;

If the value of the variable does not match the type, then during compilation the compiler will throw an error and we won’t be able to start the application.

Static types help in cases when we want the function to work with one type of data. For example, the following function, depending on the input data, can perform different actions: add numbers, paste lines, etc. And it is not clear what is going on until we launch the program.

function sum(a,b) {
return a + b;
}

TypeScript solves this problem: just specify the type of the input parameters of the function.

Classes

TS has implemented object-oriented approach. The "class" keyword is used to declare a class. There are fields and methods of the class in the class definition.

class Person {
name: string;
lastname: string;
getFullName(): string {
return this.name + "  " + this.lastname;
}
}

In addition to methods, classes also contain constructors. Constructors are special functions that perform primary initialization of an object. In TypeScript, you can define multiple versions of the constructor to specify different numbers and types of arguments.

Classes are inherited using keyword extends.

Interfaces

Interface defines the properties and methods that an object should implement. The interface is defined with the interface keyword as follows:

interface IPerson {
name: string;
age: number;
}

Let's create an object that implements this interface:

let employee: IPerson = {
name: "Bob",
age: 30
}

This implementation imposes some restrictions on the employee: it must implement all those properties and methods of the IPerson interface, i.e. in our case it should include the properties name and age.

Interfaces in TS, in addition to objects, can be applied to all basic constructs (classes, arrays, functions, etc.).

I believe that TS is more suitable for larger projects than JS, due to several features of TypeScript, those are:

  • Static types (reduces the number of potential errors that might occur when developing in JavaScript);
  • TypeScript implements all those concepts that are inherent in object-oriented languages;
  • TypeScript is a superset of JavaScript, which means that any program on JS is a TypeScript program. Moreover, the code on TS is compiled into JS, which is supported by an absolute majority of browsers (since it is oriented on the EcmaScript 3 standard, but it supports other language standards).

Author: Ivan Trutnev

Mifort, Mifort-blog, Mifort-articles, Web Development, JavaScript, TypeScript