Learn how to use TypeScript to build Angular Apps

Scalability

The biggest issue with JavaScript is, that it does not scale very well. And that makes perfect sense, considering its origin, right? There is a big difference between a button, changing its color and a framework like Angular.

Typescript is trying to get rid of this problem, by introducing a class/interface, object-oriented, structure. If you know languages like C# or Java, you will recognize some familiarities. Also, if you can write C# or Java code, you will have no problems writing Typescript.

Less Errors

Since Javascript has a very limited type system, the capabilities for checking for errors at build time are very limited, as well. Often times, JavaScript errors can only be found at runtime. That does not only result in lower productivity, but also in a higher number of errors overall. Actually, some of this runtime errors will make their way into the actual product.

As I mentioned before, Typescript brings a lot of concepts of the big, object.-oriented, languages to JavaScript. One of these concepts are strict types. Guess where the name Typescript comes from…

Types

In Typescript you have the possibility to define the type of variables, parameters or return values. That way you can get immediate feedback in the editor if you try to pass in a variable with the wrong type.

Furthermore, you get very good assistance. For example, the autocomplete and code-suggestion feature is much better, than it can be for JavaScript.

But the best part is yet to come: Types are completely optional! Don’t get me wrong here. You should definitely use the type-feature as often and consistently as possible. But, especially when working with external JavaScript libraries, that don’t come with type definitions, the option to ditch types is a huge lifesaver!

The IDE

There are many IDEs out there that support Typescript. Atom, Sublime Text, Webstorm, Eclipse, Visual Studio… To name only a few of them. My favorite IDE is Visual Studio Code. It comes with build in Typescript support, has a very clean and minimalistic interface and can be customized via extensions.

Afterall it comes to personal preference which editor to choose. It really does not matter. You could even use the good old notepad and the command line to compile.

The Any Type

Typescript also provides a special type called any. With that type, you explicitly tell Typescript, that you don’t care about the type. It can be literally anything. Using that, you are back in Javascript ‘mode’.

Parameters

Of course, a function can have parameters, as well. That works just like in Javascript, with the difference that you can define the type of the parameters using a colon.

function someFunction(param1: string, param2: number) {}

It is also possible to mark parameters as optional, by passing a default value.

function someFunction(param1: string, param2: number = 1) {}

Return types

Most of the time, the Typescript compiler can figure out the return type of a method or function by looking at the return statement. However, that is not always the case. Then, you should assign the type manually. This can be done using the colon operator as follows:

function someFunction(): string {}

Personally, coming from a C# and Java, I feel like you should explicitly assign the return type to every function. That way, your code is much better to understand and maintainable. But I also know that programmers are lazy sometimes. I catch myself, not assigning a type, as well. However, I think it should be done. Especially when working in a team and/or on a larger project. I made the experience, that linting tools, that mark inconsistent syntax right in the editor help to train good coding practice.

Accessing members of the class

Depending on the modifier (see below) of the class, the properties and methods can be accessed from inside the class, or from the outside.If you want to access from a method inside the class, you can use the this keyword.

let someProperty = this.someProperty

From the outside, use the instance followed by a dot.

let instance = new ExampleClass()
let someProperty = instance.someProperty

Instantiation

Before we can use a class, we need to instantiate one. Only afterward our class became a real object. This object is called an instance of a class. The class itself is only the blueprint. Instances of a class can be created using the new keyword.

let instance = new ExampleClass()

Constructor

When we instantiate a class, the so-called constructor of the class is called. Inside of the constructor, we do all the work, that is required to create the class. For example, setting the value of someProperty.

class ExampleClass {
  constructor() {
    this.someProperty = 1
  }
 
  someProperty: number
  someMethod(param: string): number {
    return 1
  }
}

Passing values to the constructor We can also pass parameters to the constructor, as some instances need external input to be created.

 constructor(prop: number){
  this.someProperty = 1;
}
 

We then create an instance as follows:

let instance = new ExampleClass(5) // pass any number

Modifiers

Modifiers are a way to artificially restrict the access to your class’s properties or methods. There are three basic modifiers available: Public, Protected and Private. The modifier are used before the name of the property or method:

 public example(): string {}
protected example(): string {}
private example(): string {}
 

Notice: Modifier can only be used in classes.

Properties or methods marked with the public modifier are accessible by everyone; Inside of the class itself or any other class or function. That includes inherited classes, as well.

Properties or methods marked with the protected modifier are not publicly accessible. They can only be used inside of the class with the this operator. Furthermore, it can be used inside of all inherited classes.

Properties or methods marked with the private modifier are not publicly accessible. They can only be used inside of the class with the this operator.

One more thing…

Well, I lied to you. There are four modifiers. Another one is ‘readonly’. But because the first three are much more common, I put this modifier separate. All it is also used in addition the modifiers before. Properties with this modifier can only be modified in the constructor of the class.

Inheritance

Inheritance is another ‘borrowed’ principle. With inheritance, a class can inherit properties and methods from another class. To inherit from another class, you can use the extends keyword.

class ExampleClassChild extends ExampleClass {}

Since ‘someProperty’ is public, we can use it in the inherited class, as well.

class ExampleClassChild extends ExampleClass {
  constructor() {
    this.someProperty = 5
  }
}