.js file, rename it to have a
Cassette and TypeScript
The Fly in the Ointment: Asset References
- A comment of the form ///
adds a dependency on the source file specified in the path argument. The path is resolved relative to the directory of the containing source file.
- An external import declaration that specifies a relative external module name (section 11.2.1) resolves the name relative to the directory of the containing source file. If a source file with the resulting path and file extension ‘.ts’ exists, that file is added as a dependency. Otherwise, if a source file with the resulting path and file extension ‘.d.ts’ exists, that file is added as a dependency.
The problem is that Cassette *also* supports Visual Studio XML reference comments to drive Asset References. The upshot of this is, that Cassette will parse the
/// <reference path="*.ts"/>s and will attempt to serve up the TypeScript files in the browser... Calamity!
Pulling the Fly from the Ointment
Again I'm going to take the demo from last time (the References branch of my CassetteDemo project) and build on top of it. First of all, we need to update the Cassette package. This is because to get Cassette working with TypeScript you need to be running at least Cassette 2.1. So let's let NuGet do it's thing:
And whilst we're at it let's grab the jQuery TypeScript typings - we'll need them later:
Now we need to add a couple of classes to the project. First of all this:
Now we're in a position to use TypeScript with Cassette. To demonstrate this let's take the
Index.js and rename it to
Index.ts. And now it's TypeScript. However before it can compile it needs to know what jQuery is - so we drag in the jQuery typings from Definitely Typed. And now it can compile from this:
To this: (Please note that I get the TypeScript compiler to preserve my comments in order that I can continue to use Cassettes Asset Referencing)
So that's it - we're home free. Before I finish off I'd like to say thanks to Cassette's Andrew Davey who set me on the right path when trying to work out how to do this. A thousand thank yous Andrew!
And finally, again as last time you can see what I've done in this post by just looking at the repository on GitHub. The changes I made are on the TypeScript branch of that particular repository.