Why Java Developers might love TypeScript

2015-07-24

I’ve met a lot of Java developers that don’t like JavaScript. Weak typing, inequality of equality, the scope of variables et cetera. I encourage them not to use only plain JavaScript. AngularJS and jQuery for example brings the best out of JavaScript. But I particulary understand their skepticism. The last days I was playing around with TypeScript and it seems I really love it. TypeScript feels like JavaScript made right (and thats no wonder, because it was designed by the guy behind Turbo Pascal, Delphi and C#). TypeScript brings a lot more structure and object oriented goodness, thought under the hood it compiles to JavaScript.

class Person {
    //fields
    private _firstname:string;
    private _lastname:string;

    //constructor
    constructor(firstname:string, lastname:string) {
        this._firstname = firstname;
        this._lastname = lastname;
    }

    //methods
    public getName():string{
       return "Name: " + this._lastname + ", " + this._firstname;
    }

    //properties
    public get firstname():string {
        return this._firstname;
    }

    public set firstname(value:string) {
        this._firstname = value;
    }

    public get lastname():string {
        return this._lastname;
    }

    public set lastname(value:string) {
        this._lastname = value;
    }
}

Or even shorter with a syntactic sugar constructor.

class Person {
    //constructor
    constructor(private _firstname:string, private _lastname:string) {
    }

    //methods
    public getName():string{
        return "Name: " + this._lastname + ", " + this._firstname;
    }

    //properties
    public get firstname():string {
        return this._firstname;
    }

    public set firstname(value:string) {
        this._firstname = value;
    }

    public get lastname():string {
        return this._lastname;
    }

    public set lastname(value:string) {
        this._lastname = value;
    }

}

What I really, really like is the inheritance concept in TypeScript. You can use the extends keyword to extend from a base class. You can also override methods. A derived class will inherit all public members from it’s base class.

class Person {
    //fields
    _firstname:string;
    _lastname:string;

    //constructor
    constructor(firstname:string, lastname:string) {
        this._firstname = firstname;
        this._lastname = lastname;
    }

    //methods
    public getName():string{
       return "Name: " + this._lastname + ", " + this._firstname;
    }

    //properties
    public get firstname():string {
        return this._firstname;
    }

    public set firstname(value:string) {
        this._firstname = value;
    }

    public get lastname():string {
        return this._lastname;
    }

    public set lastname(value:string) {
        this._lastname = value;
    }
}

class Employee extends Person{
    //fields
    private _salary:number;

    //methods
    public getName():string{
        return "Name: " + this._lastname + ", " + this._firstname + "(" + this._salary + ")";
    }


    //properties
    public get salary():number {
        return this._salary;
    }

    public set salary(value:number) {
        this._salary = value;
    }
}

And now just one for the book: Let’s have a look at the JavaScript Version of the example above.

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() {
      this.constructor = d;
    }

    __.prototype = b.prototype;
    d.prototype = new __();
  };
var Person = (function () {
  //constructor
  function Person(firstname, lastname) {
    this._firstname = firstname;
    this._lastname = lastname;
  }

  //methods
  Person.prototype.getName = function () {
    return "Name: " + this._lastname + ", " + this._firstname;
  };
  Object.defineProperty(Person.prototype, "firstname", {
    //properties
    get: function () {
      return this._firstname;
    },
    set: function (value) {
      this._firstname = value;
    },
    enumerable: true,
    configurable: true
  });
  Object.defineProperty(Person.prototype, "lastname", {
    get: function () {
      return this._lastname;
    },
    set: function (value) {
      this._lastname = value;
    },
    enumerable: true,
    configurable: true
  });
  return Person;
})();
var Employee = (function (_super) {
  __extends(Employee, _super);
  function Employee() {
    _super.apply(this, arguments);
  }

  //methods
  Employee.prototype.getName = function () {
    return "Name: " + this._lastname + ", " + this._firstname + "(" + this._salary + ")";
  };
  Object.defineProperty(Employee.prototype, "salary", {
    //properties
    get: function () {
      return this._salary;
    },
    set: function (value) {
      this._salary = value;
    },
    enumerable: true,
    configurable: true
  });
  return Employee;
})(Person);

Any further questions? ;)