CODEWITHSUNDEEP
javascriptgoogle-closure-compiler
ansiart
ansiart

Reputation: 2571

Closure Compiler @extends doesn't work when using "Class" container objects

I'm in the process of annotating all my javascript for closure compiler, however -- the code I have currently heavily depends on defining classes within objects i.e:

Class.SomeClass = function() {};
Class.SomeOtherClass = function() {};

rather than:

function SomeClass() {};
SomeClass.prototype = {};

However, it gives me an warning when trying to annotate an extends ... the compiler is stating that i can't determine what type Class.SomeClass is:

JSC_TYPE_PARSE_ERROR: Bad type annotation. Unknown type Class.SomeObject 
*  @extends Class.SomeObject

Paste the following code below into closure compiler with ADVANCED_OPTIMIZATIONS:

// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// ==/ClosureCompiler==

(function($) {

    "use strict";

    var Class = {};

    /**
     *  @constructor
     */
    Class.ObjectA = function() {};
    Class.ObjectA.prototype = {};

    /**
     *  @constructor
     *  @extends Class.ObjectA
     */
    Class.ObjectB = function() {};
    Class.ObjectB.prototype = $.extend(new Class.ObjectA(), {
        initialize: function() {}
    });


    window.test = new Class.ObjectB();
    window.test.initialize();

})(jQuery);

Upvotes: 3

Views: 1033

Answers (2)

Chad Killingsworth
Chad Killingsworth

Reputation: 14411

The answer isn't obvious. You simply need to add an @const to your Class namespace.

/** @const */
var Class = {};

Upvotes: 6

lennel
lennel

Reputation: 646

well the easiest, since you will be compiling it in advance mode anyway is to maybe use goo.provide and just link the base.js in. then obviously you should use goog.inherits for your inheritance since advanced mode understand the base.js functions a lot better than say $.extends.

so my code to achieve the same would look like this:

// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// @use_closure_library true
// ==/ClosureCompiler==

goog.provide('Class.ObjectA')

/**
*  @constructor
*/
Class.ObjectA = function() {};

goog.provide('Class.ObjectB');
/**
*  @constructor
*  @extends Class.ObjectA
*/
Class.ObjectB = function() {};
Class.ObjectB.prototype =
{
    initialize: function() {}
}

goog.inherits(Class.ObjectB, Class.ObjectA);


window.test = new Class.ObjectB();
window.test.initialize();

In the compiler ui, you have to select the option to add the closure library which will add goog.base.

Now you also have several jqueury style foo's in your approach like (function($) {})(jQuery); which i would reassess the use of if you are starting down the advanced compilation route (i would personally reasses the use of jquery versus the closure library, but I do know of people who continued using jquery with advanced). going down the advanced mode I would also recomend that you look at a build system like plovr.

Upvotes: 1

Related Questions