A list of reasons for why I like to use TypeScript - Part One

With this article I like to post my thoughts about TypeScript and some of the advantages of the language that I use on my everyday programming tasks.

  1. Types, types, types

Who does not know or have not implemented code like the following in JavaScript:

    var person = {
        firstname: "Christos",
        lastname: "Monogios"
    };
    
    // Lines of code...
    
    person.skills = ["TypeScript"];
    
    console.log(person);
 

The console will log an object with three properties. This means that in JavaScript we are able to change the structure of an object in every position of code where the object is not undefined. This was a simple example, however, what happens if the structure of this object is not well documented? Or if the addition of a new property happens after many lines of code? You do not have the security of a typed language and you cannot be sure the next time you use this object that this object will contain the same properties.

On the other hand with TypeScript you can define an interface which will contain the definition of the properties of an entity. This interface defines a new type and this type can be used from objects in your code:

    interface Person {
        firstname: string;
        lastname: string;
        skills: string[];
    }
    
    var person1: Person = {
        firstname: "Christos",
        lastname: "Monogios",
        skilss: ["TypeScript"]
    };
 

Now you have standarized the Person type and every object that wants to be of this type, has to implement all three properties. If you want to add a new property to the Person type, then you simple add it in your interface, and you get directly informed from the compiler in which objects in your code you have to add the new property. In the previous example person1 implements the contract Person and has to implement all of its three properties.

By defining new types you also get Intellisense while you write the properties of a type and the most important advantage is that you cannot store in a property a value with a type other than the defined.

Of course interfaces only exist in TypeScript and no code is generated when you build the code. If you want to make the properties of an interface optional then use the ? symbol. For example: lastname?:string;.

If you are not sure about the type of a property then you can use the bitwise OR operator and define a combination of types to your property:

 var age: string | number;

With the bitwise OR operator you can use not only primitive types but also complex ones, like the Person type we saw before.

  1. Define properties inside your classes, just like C#

With ECMAScript6 we can write code structured in classes; actually there are no real classes in JavaScript but at least we get reserved keywords such as class or constructor, which we use also in other object oriented languages.

However in JavaScript we cannot define any properties directly inside the body of the class, but only inside the constructor. Consider the following example:

    class Animal {
        public name;
        
        constructor(name) {
            this.name = name;
        }
    }
 

This will throw an error, since the name property was defined out of the constructor of the class. We can only define them inside the constructor of the class by using the this keyword. So in the previous example you will have to remove the public name; row.

In TypeScript however, you can define properties inside the body of a class and apart from that you can define their accessibility (public, private, protected) and of course the type of the property, as we saw before. Consider the following example:

    class Animal {
        public name: string;
        
        constructor(name: string) {
            this.name = name;
        }
    }
 

I like the TypeScript variation because it reminds me of C# code and it is the way I would code a new class. However, I have to mention that behind the curtains, when TypeScript is compiled to JavaScript and ES6 is used, you get the same result as shown in the first example. But this is just fine for me. As a developer I have to do with TypeScript code; the generated JavaScript code is a compiler-issue and I do not have to care about it.

comments powered by Disqus