I’ve been getting stuck into TypeScript recently and hit a few bumps along the way, so thought I’d be all nice and internety and share some tips. Firstly and foremostly:

It’s great.

Use TypeScript. If you have to do Javascript, and it’s becoming something of an inevitability these days, do it in TypeScript. TS is object-orientated, strictly typed and you can have classes. These things make me very happy. For an old(ish) coder still pining for the days of Flash, TypeScript is much more like the structured coding of AS3 compared to the flabby, flaccid, unstructured mess that is JS.

You might not like the idea of strict typing the way having to declare what kind of things an array is going to hold irks me, but the discipline is good for you. Like porridge, morning runs, and getting hit with soap in a sock at a posh boarding school. So here are some of the things I had trouble with, in the hope of saving you time and frustration.

Speaking of arrays, I started by declaring them as

var array_of_things:Array;

This broke the TS compiler. I’ve not really looked into it in more detail, but apparently the correct way to define arrays is by specifying the variable type that you want your array to contain, like so:

var array_of_numbers: number[];

You define an array of instances of a Class by using the class name:

var array_of_class_instances: YourClassName[];

 

Not sure what type to use?

Use “any”, like so:

var unknown_thing:any;

Generally best to use a specific type where possible, because then you get all the benefits of TS – namely autocompletion and in-IDE error checking.

 

Lambda (or “fat arrow”) functions:

TypeScript is a superset of Javascript, and uses “this” a lot – mostly fine and dandy, but there are a few places it can catch you out. You can assign a scope for “this” to functions when they run, but the syntax isn’t always obvious.

Usually in JS (and specifically using JQuery) you assign functions and callbacks like this:


class Parent
{
	addListener()
	{
		$( window ).resize( functionName );
	}
}

then when the function fires its scope is $( window ), so you can access whatever goodies it holds. In this situation, you’d normally still be able to easily access variables from a parent object due to Javascript’s crazily open scoping – but in TS you have to access properties of class instances and objects using

this.propertyname;

All well and good, until you find yourself not in the scope of the object any more. In the above example, the functionName callback’s this is $( window ), not the Parent you assigned the function from, so this.propertyname will attempt to access propertyname within $( window ) – and you’re locked out of the Parent vars you probably want to access.

To stop this, use lambda functions, like so:


class Parent
{
	addListener()
	{
		$( window ).resize( () => functionName() );
	}
}

Now the listener function you’ve specified will be called within the scope of the Parent class, meaning you can access all its “this” variables  without any fuss.

I got stuck for a while trying to work out how to pass parameters to lambda functions, but you just add the params to the both set of brackets:


class Parent
{
	addListener()
	{
		$( window ).resize( ( params ) => functionName( params ) );
	}

	functionName( params:any )
	{
		//  do stuff
	}
}

 

Project setup and File Watchers

I’ve been using PHPStorm for front-end work, and it’s great. After installing the TypeScript compiler you can also set up File Watchers that will automatically transpile your TS code into JS (and then use something like Closure Compiler to go straight to a minified file if you like).

PHPStorm also allows for automatic upload of files when they’re changed, so I’ve got all my TS and JS files in one folder. When I edit a TS file PHPStorm auto-transpiles it into JS, which is minifed and then automatically transferred to a localhost folder for viewing in a browser. Source files, such as TS/SCSS files are excluded from the auto-transfer, so the localhost folder is ready for deployment – I just zip it and go, or upload to an alternative server straight from the IDE.

It’s not a perfect workflow, but it’s definitely better than doing everything manually every time!

NB PHPStorm 6 doesn’t support the latest version of TypeScript, unfortunately. It will (mostly) compile but will also give you annoying errors in the IDE – try the Early Access Program version of PHPStorm or WebStorm 7 instead. They’re a bit more flaky, seeing as they’re betas, so save often :)

 

Definitions

Because TS uses strict typing, you’ll also need to tell the compiler about the values and parameters of any other libraries you’re using (eg JQuery). These definitions come in the form of .d.ts files, which you can crack open and poke around in, or even just make your own. Thankfully you probably won’t have to: https://github.com/borisyankov/DefinitelyTyped is a great resource with definitions for lots and lots of things, and anything that’s not there can usually be found with a bit of googling.