Question: closure compiler externs problem.

[martin19]

I'm trying to get rolling with generating externs for google closure compiler with tsickle.
Here is my setup.

main.ts

import Bar = require("externalmodule");
console.log(Bar.Foo.EPSILON);

foo.d.ts

declare module 'externalmodule' {
   export class Foo {
     public static EPSILON: number;
  }
}

The following files are generated.

main.js

goog.module('src.main');var module = module || {id: 'src/main.js'};
/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */

var Bar = goog.require('externalmodule');
console.log(Bar.Foo.EPSILON);

extern.js

/**
 * @externs
 * @suppress {duplicate,checkTypes}
 */
// NOTE: generated by tsickle, do not edit.
// externs from src/test.d.ts:
/** @const */
var tsickle_declare_module = {};
// Derived from: declare module "externalmodule"
/** @const */
tsickle_declare_module.externalmodule = {};
/**
 * @constructor
 * @struct
 */
tsickle_declare_module.externalmodule.Foo = function() {};
 /** @type {number} */
tsickle_declare_module.externalmodule.Foo.EPSILON;

closure compiler outputs:

grunt
Running "closure-compiler:build" (closure-compiler) task
Warning: Command failed: java -jar "./closure-compiler/build/compiler.jar" --js "src/extern.js" --js "src/foo.js" --js "src/main.js" --js_output_file "C:\Users\marti\tsi
ckle\test/dist/lib/output.min.js" --externs externs/extern.js --compilation_level "ADVANCED_OPTIMIZATIONS" --language_in "ECMASCRIPT6_STRICT"
src/main.js:7: ERROR - Required namespace "externalmodule" never defined.
var Bar = goog.require('externalmodule');
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

1 error(s), 0 warning(s)
 Use --force to continue.

What is the problem here?

[mprobst]

In TypeScript external modules always generate an import, e.g. a "require()" call. In tsickle, we translate these imports into "goog.require" calls. Closure Compiler then tries to satisfy the goog.require(), but cannot find any code for it. The question is where you get "Foo.EPSILON" and the other symbols from at runtime. A common case is a library you load that's external to your Closure Compiler bundle, with the library installing global symbols on "window". For that case, you can write a JavaScript shim file (not TS!): ``` goog.module('externalmodule'); exports = window.TheGlobalSymbol; ``` Closure Compiler will compile this into your bundle, and then at runtime resolve your module import using `window.TheGlobalSymbol` (or whatever).

[martin19]

Thank you for the help.

After some days of tsickling...

• removing circular dependencies from ts code
• removing jsdoc
• removing "module" and "namespace" declarations
• moving enums to separate files and use "export" after enum definition (only works like that)
• postprocessing tsickle output to lowercase all goog.module, goog.require, goog.forwardDeclare names
  because casing of the output is incomprehensibly wrong.

...I've found out (closure output):

• webgl2externs for closure compiler are not available yet
• ES6 transpilation of 'assigning to a super property' is not yet implemented.

And I'm left with:

0 error(s), 3057 warning(s), 71.9% typed
and 52kb output file that doesn't do anything.

I'm a bit disillusioned. Even if the readme has warned about that.

[evmar]

Gonna fold this into the general "externs are a mess" #1041