Getting Started with TypeScript

Any doubt you may have had about TypeScript should have melted away with the recent announcement of Angular 2 being written in TypeScript. Google and Microsoft putting aside their egos (and money) to build an open source project together certainly indicates something amazing about AngularJS and TypeScript. I don’t need to tell you how awesome AngularJS is, so in this post I’d like to show you how awesome TypeScript is.

Dude, Where’s My Types?

One of the flexible things about JavaScript is that it’s a dynamic language. Pass in a string, number, or even function into the same parameter and JavaScript won’t complain. When creating large scale JavaScript applications though, this can become a maintenance and debugging nightmare. Also producing an API for your application for other developers make it daunting to use and heavily reliant on good documentation. Enter TypeScript… you can optionally decorate your parameters with annotations as so:

function getPerson(id: number) {
  return {
    id: id,
    firstName: 'John',
    lastName: 'Doe'
  };
}

Interfaces

Giving structure to your objects no longer make it a guessing game in JavaScript. For example, I can define the return type of the function above:

function getPerson(id: number): Person {
  return {
    id: id,
    firstName: 'John',
    lastName: 'Doe'
  };
}

The function is returning a “Person” type, which can be an interface as so:

interface Person {
  id: number;
  firstName: string;
  lastName: string;
}

If my return object doesn’t match this signature, I will get an intellisense and compile error.

Adding Some Class

It would make sense if we made “Person” a class instead of an interface. That way, we can create new instances of “Person”:

class Person {
  id: number;
  firstName: string;
  lastName: string;
 
  constructor(id: number, firstName: string, lastName: string) {
    this.id = id;
    this.firstName = firstName;
    this.lastName = lastName;
  }
 
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

Declaring classes in TypeScript looks sexy because it is taken from the EcmaScript 6 specification. I even added a dynamic property called “fullName” that concatenates first and last name on the fly.

Now I can do this with my original function:

function getPerson(id: number) {
  return new Person(id, 'John', 'Doe');
}

I don’t have to tell TypeScript that “getPerson” has a return type of “Person” anymore since it is inferred in the return statement. And I still get all the goodies of intellisense and compiling checks.

I can even define the parameters in my constructor as public properties without needing to explicitly assign them in the constructor logic:

class Person {
 
  constructor(public id: number, public firstName: string, public lastName: string) {
    // Don't have to do anything here anymore
  }
 
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

Conclusion

Are you in love yet? This is only the tip of the iceberg of what TypeScript is. Also, everything gets compiled into pure JavaScript files, so keep in mind that TypeScript was created for the development process, yet remains cross-browser compliant. Add arrow functions, class inheritance, function overloading, module dependency management, and you have a true object-oriented paradigm in JavaScript. Marry that with AngularJS and we have a solid path to the JavaScript promise land.

Happy Coding!!