7

Specifically imagine this scenario: I have a jquery plugin $.mega().

I can create a definition file for this plugin as follows:

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

// Extend jquery with .mega()
interface JQuery { mega(options?:any):void; }

// Declare an external module, to import mega using AMD.
// NB. You still need to setup require.js to find the bower module.
declare module mega { export function dummy():void; }
declare module "mega" { export = mega; }

Then I can invoke the plugin from a script using:

/// <reference path="../../defs/jquery/jquery.d.ts"/>
/// <reference path="../../defs/mega/mega.d.ts"/>
import mega = require('mega');
import $ = require('jquery');

((...r:any[]) => {})(mega);  // <---- WTF!

$('.target').mega();

Since typescript automatically trims and discards unused dependencies as an optimization step, without actually using a module, that module is discarded, so I'm forced to 'fake' usage of the module using:

((...r:any[]) => {})(mega);

Without this, the compiled javascript looks like:

define(["require", "exports", 'jquery'], function(require, exports, $) {
    //((...r:any[]) => {})(mega);
    $('.target').mega();
});

So, is there some way of ensuring that require includes are not 'optimized' when typescript compiles?

Either a compile flag, or a special way of building the definition file would work fine for me~

Nb. This is more for AMD, but it applies equal to commonjs modules.

Doug
  • 32,844
  • 38
  • 166
  • 222
  • possible duplicate of [TypeScript: compiling removes unreferenced imports](http://stackoverflow.com/questions/15267705/typescript-compiling-removes-unreferenced-imports) – thomaux Sep 16 '15 at 06:04

2 Answers2

4

You can use the amd-dependency to specify stuff you want hoisted in the amd define call e.g.: 

/// <amd-dependency path="mega" />
basarat
  • 261,912
  • 58
  • 460
  • 511
  • I have the same problem, however, this /// import sortable = require('sortable'); does nothing for me. Could you please give an answer with code example? – Ivan Koshelev Apr 25 '15 at 19:09
  • This seems to only work if at least 1 require call exists in the TypeScript file. – bcody Apr 27 '16 at 16:04
  • NB: This is deprecated but I can't tell from the TS docs what we're supposed to do instead. – iono Jun 17 '16 at 08:11
  • It has always been deprecated. But its the way to go. Instead you should look at something like webpack + commonjs that allows you to specify *dependencies* externally – basarat Jun 17 '16 at 23:05
4

A nicer solution (tested with TS 1.8):

import 'mega';

The amd-dependency triple-slash-directive seems to only work if there are other require imports; only having amd-dependency directives results in the TypeScript compiler generating JavaScript completely without a module definition.

bcody
  • 2,489
  • 1
  • 21
  • 21
  • I want to use an export of a module (`import {makeHtml} from 'vdom-module'`) with `"jsx": "preserve"` but since the `.tsx` is converted to `.jsx`, tsc simply ignores the jsx and removes the unused module, which I need in the `jsx` to render virtual dom. – K.. Jul 27 '16 at 23:02