An introduction to TypeScript

What is TypeScript? Why should you use it? .. and is it true that Angular 2 will be built on TypeScript. Yeah, that’s true.

TypeScript is a language created by Microsoft which complies to JavaScript. it forces you to rethink how you write your JavaScript by giving you some strict rules to code by. When writing TypeScript, most of the error will happen at compile-time, not runtime (which is a beautiful thing, no?).

Getting started

The easiest way to get started is by downloading TypeScript 1.4 for Visual Studio 2013, and then installing it.

When you’re ready we can start writing your first lines of code. Try creating a TypeScript (.ts) file in Visual Stuido.

Writing TypeScript

In TypeScript you can create classes and interfaces – and modules. It almost becomes object oriented!

Strict typing

The best thing about TypeScript though, is the strict typing. You can now imply what type of variable you’re using in a function or a object.

Like if you’re creating a Car class for example:

class Car {
 model : string;
 year : number;

 constructor(_model : string, _year : number {
 this.model = _model;
 this.year = _year;
 }
}

Now you can’t create a new instance of Car without specifying the correct variables.

var c = new Car(2, 2);

Argument of type ‘number’ is not assignable to parameter of type ‘string’. 

var c = new Car("V70", 2);

Compiles!

Interfaces and classes

Let’s create a Car and a Garage. Firs the interface(s) as you probably know from C# or similiar.

interface ICar {
 model : string;
 year : number;
 toString : Function; 
 print : Function;
}

interface IGarage {
 owner : string;
 cars : Array<ICar>;
 addCar : Function;
 print : Function;
}

I’ve now set a few variables and functions for the interfaces for Car and Garage. A class that implements one of these interfaces must now include all of these.

Let’s implement Car:

class Car implements ICar {
 model : string;
 year : number;
 toString() {
 return this.model + ", " + this.year;
 }
 constructor(_model:string, _year:number) {
 this.model = _model;
 this.year = _year;
 }
};

Oh, I forgot the print() function!

Class ‘Car’ incorrectly implements interface ‘ICar’.Property ‘print’ is missing in type ‘Car’.

I can now add this print() function and it will compile.

class Car implements ICar {
 model : string;
 year : number;
 toString() {
 return this.model + ", " + this.year;
 }
 print() {
 console.log(this.toString());
 }
 constructor(_model:string, _year:number) {
 this.model = _model;
 this.year = _year;
 }
};

Modules

Modules make it easy to divide your file into sections. You’re probably used to namespacing your .js files? Well, I hope you are.

You would probably divide similliar to this (simple example):

var GM = GM || {};
GM.UI = GM.UI || {};
GM.CSOM = GM.CSOM || {};
GM.Helpers = GM.Helpers || {};

You don’t need to do this in TypeScript. If you’re creating a class in GM.Helpers, just do this:

module GM.Helpers {
export class URLHelper {}
}

That’s all you need! Use the export statement to make it accessible outside of your module. Without it, you can only access it within GM.Helpers.

The compiled JavaScript will look like this:

var GM;
(function (GM) {
 var Helpers;
 (function (Helpers) {
 var URLHelper = (function () {
 function URLHelper() {
 }
 return URLHelper;
 })();
 Helpers.URLHelper = URLHelper;
 })(Helpers = GM.Helpers || (GM.Helpers = {}));
})(GM || (GM = {}));

d.ts files

Another great thing about TypeScript is the d.ts file you can get! From this repository you can get TypeScript-intellisense (and strict typing) for most JavaScript libraries out there.  If you’re working with SharePoint like me, SharePoint.d.ts is a musthave!

Read more

Official site
Playground with realtime-compile
anders-hejlsberg, the man behind TypeScript, talks about it
TypeScript for JavaScript Programmers (Book)