Categories
Programming

TypeScript AMD Dependency Comment

This TypeScript feature doesn’t have much official text surrounding it, but it does (currently) work (and to be honest is so useful it would be a shame if were to be removed).

Basarat illustrates the problem when he describes this feature…

“This feature is badly documented, but oh-so-useful!” – Basarat Ali Syed

So what is it?

If you are using AMD in TypeScript you may come across a situation where you depend on a module being loaded even though you don’t directly use the module. Even if you add an import, the compiler cleverly removes unnecessary modules. For example…

import ko = require('./knockout');
import Other = require('./other');

var x = new Other();

Results in the following JavaScript:

define(["require", "exports", './other'], function(require, exports, Other) {
    var x = new Other();
});

Oh no! Knockout has gone missing. Changing the statement to a reference comment doesn’t help either:

///<reference path="./knockoutd.d.ts" />

So you end up going on the fiddle, like this:

import ko = require('./knockout');
import Other = require('./other');

var meh = ko; // scuzzy fix
var x = new Other();

Which gets the expected output, but with a bit of code noise:

define(["require", "exports", './knockout', './other'], function(require, exports, ko, Other) {
    var meh = ko;
    var x = new Other();
});

Noiseless Solution

So this is where the badly documented but rather useful feature comes in.

///<amd-dependency path="./knockout" />
import Other = require('./other');

var x = new Other();

This results in the required output:

define(["require", "exports", './other', "./knockout"], function(require, exports, Other) {
    var x = new Other();
});

So go ahead and use this at your own risk – it isn’t in the current specification so there are no guarantees it will remain in the compiler. Don’t say I didn’t warn you.