Oct 022012
 

Today, Microsoft announced TypeScript, a brainchild of the famous Anders that adds some type safety to JavaScript. The idea is that TypeScript is a superset of JavaScript, which means that any valid JavaScript is valid TypeScript. But TypeScript gives you some additional goodness such as classes, interfaces, and type safety. You can use these features and use the TypeScript compiler to compile to JavaScript which you then include in your applications. It is very similar to CoffeeScript, but CoffeeScript doesn’t use the idea of a superset, so valid JavaScript is not necessarily valid CoffeeScript.

TypeScript is right up my alley, because I know that JavaScript seems to be all the rage these days, and I have to learn to love it, but I am very reluctant to give up the type safety of languages like C# or F#. I decided to set out and get TypeScript working. It wasn’t too hard, but there were a couple of snags. If you are looking to dive into TypeScript and want to get it hooked into Visual Studio 2012, this post should give you all the info you need to get started. I would expect a guide like this to be created by the TypeScript team and available on their site. But I didn’t see it, so here we go…

Installing the Plug-In

Simple enough. Download the Visual Studio 2012 plug in. Run it. Click Next a couple times and you are good to go.

Add a TypeScript file to your app

At this point, you can add TypeScript files to your app like you would anything else. Go to Add > New Item within the Solution Explorer and one of the options is TypeScript File. TypeScript files us a *.ts extension by default, and I recommend keeping that so that those files are easy to find when you go to compile them.

Write some TypeScript

Okay, you’ve got a blank TypeScript file. Now let’s put some TypeScript in it. The template includes some boilerplate involving shapes, but I wanted to do something of my own. For my sample code, I used the following which is similar to the ubiquitous “Hello World” example from the TypeScript site.

class Greeter {
	greeting: string;
	constructor (message: string) {
		this.greeting = message;
	}
	greet() {
		return "Hello, " + this.greeting;
	}
}   
 
(function () {
    var greeter = new Greeter("TypeScript!");
    alert(greeter.greet());
})();

That is definitely not JavaScript, but it is close enough that the knowledge from that language transfers pretty readily. And with beautiful, beautiful type safety. You even get syntax highlighting and red squigglies if you screw something up. It is enough to make a geek weep…

Compile to JavaScript

Your web browser won’t understand that code, so it has to get transformed into JavaScript. This is where I ran into trouble. When you add the TypeScript file, you get HelloTypeScript.ts and HelloTypeScript.js as an item under that. I expected, therefore, that when I changed the TypeScript code and saved it, the underlying JavaScript file would get updated. This didn’t happen. Okay, so it must happen when I build the project? Nope.

It turns out you have to add a before build section to your project file to execute the tsc.exe compiler which is installed with the plug in. Edit your *.csproj file and include the following. Include it right at the bottom of the file before the </Project> tag.

<Target Name="BeforeBuild">
<Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

When you reload the project and build it, you should see your JavaScript get updated when you change the TypeScript file and then build. Thanks to Hanselmen’s post on the subject for filling in this missing piece for me. I’m hoping that in future versions of the plug in, this project tweaking is done for you. But I’ll cut them some slack for now since it is pretty cool stuff and they have only been in production for 1 day.

That’s it!

Now you have *.js files that you can include in your project like you would any other JavaScript file. Obviously the power of TypeScript will be found in larger, more complex applications which the loose typing of JavaScript can get you in trouble. But this guide can at least get you started in the right direction.

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>