Using TypeScript for Google maps API

After seeing Anders Hejlsberg video on TypeScript - ( lead architect of C# at Microsoft ) - I wanted to see how I can start using TypeScript for any of the current projects. Therefore, I created a page showing a Google Maps map.

TypeScript?

I'm assuming that you're familiar with TypeScript, but in short: TypeScript is a superset of JavaScript that adds more strongly typed behavior to JavaScript and is compiled to JavaScript. Therefore, everything in JavaScript is available in TypeScript, but also more: classes, interfaces, modules and more.

So, how do I get started?

Here's what I did:

Download and install TypeScript

First thing you need to do, is download TypeScript, and install it.

Then, you can either start a new project with the new project type 'HTML website with TypeScript', or you can just start using it an existing web app. I'm went for the last option, since I've got a sandbox project in which I try out different techniques.
So, what I did was create a TypeScript file in my /Scripts folder and started creating TypeScript.

To be honest, most of the times when I'm using JavaScript, I'm not taking full advantage of the weak typing in JavaScript. By far, most of the times I'm calling JQuery functions, JQuery plugins or other API's. At this point, I'm mostly interested in getting IntelliSense and compilation errors for calling the API's, than in building my own TypeScript domain with classes etc.

Get TypeScript type definitions

If you want to get started with calling the API's - you need to know the Definetely Typed repository on GitHub. This holds "TypeScript type definitions repository for popular JavaScript libraries.". The type definitions define the classes and interfaces of the API.

- Find the API you want to use, get the .d.ts file and place it in your project
- In your TypeScript, start 'using' this file by placing this at the top of your .ts file:

/// <reference path="GMaps.d.ts" />
/// <reference path="jquery-1.8.d.ts" />

Yes, JQuery as well, because it will give you awesome jQuery IntelliSense.

Now let's see what happens:

Sweet! JQuery with IntelliSense, thanks to the defintion files we loaded at the top. So, let's move on quickly create a new maps object:

That's easy too. However, the Maps class requires MapOptions in the constructor, which is an interface in the .d.ts file:

export interface MapOptions {
        backgroundColor?: string;
        center?: LatLng;
        disableDefaultUI?: bool;
        disableDoubleClickZoom?: bool;
        draggable?: bool;
        draggableCursor?: string;
        .....

So we need to create our own MapOptions that implements this interface like so:

     var opts: google.maps.MapOptions = {
         center: new google.maps.LatLng(-34.397, 150.644),
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         zoom: 8
     };

     var map = new google.maps.Map(mapDiv, opts);

I just looked up the Google Maps API example and noticed that these three properties needed to be set. Pass this opts into our maps and we're set.

Compile .ts to .js

If you add a TypeScript file to your project, it does not automatically compile this file to a JavaScript file. You can change the .csproj file and make sure it does this when the project compiles, but you can also do it manually. I did the latter.

Since the NuGet console is basically a PowerShell console, i did it from there. First, navigate to the correct folder ( use 'ls' to list the items in the folder, 'cd' to change folder ). Use 'tsc [filename]' to compile the file:

In your page you just have to make sure:

• You include a reference to jQuery
• A reference to the Goolge Maps API with you API key
• Have a div with id 'maps'

Like so:

And you're set!