TypeScript - referencing jQuery in classes

Question

Getting the following error "Uncaught ReferenceError: $ is not defined". I understand the error very well, jQuery isn't recognized inside my class. What I don't understand is how to ensure it gets picked up.

Here is what I've got so far:

./app.ts

/// <reference path="references.ts"/>
import Layout = require("./classes/Layout");

class Brooklyn {
    elementId: string;

    constructor(elementId: string) {
        this.elementId = elementId;
    }

    setupLayout() {
        console.log("building layout");
        var layout = new Layout(this.elementId);
        layout.build();
    }
}

./references.ts

/// <reference path="dfiles/jquery.d.ts"/>
/// <reference path="dfiles/jqueryui.d.ts"/>
/// <reference path="dfiles/jquery.ui.layout.d.ts"/>
/// <reference path="dfiles/node.d.ts" /> 

/// <reference path="classes/Layout.ts" />

./classes/Layout.ts

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

    class Layout {
        static layoutOuter: JQueryLayout;
        elementId: string;
        westSelector: string;
        eastSelector: string;

        constructor(elementId: string) {
            this.elementId = elementId;
        }

        build() {
            console.log("init layout");
            this.westSelector = "body > .ui-layout-west"; // outer-west pane
            this.eastSelector = "body > .ui-layout-east"; // outer-east pane


            Layout.layoutOuter = $(this.elementId).layout();  // Error from this line
        }
    }

export = Layout;

I've added the jquery.d.ts reference to the Layout.ts file but that doesn't help either, neither does passing jQuery into the class as a reference. How does each separate class get access to jQuery?

Since jQuery would be a global variable, perhaps this answer about referencing globals in TypeScript helps: stackoverflow.com/questions/13252225/… or this How to create basic TypeScript project using jQuery, RequireJS, and KnockoutJS — jfriend00
– jfriend00, Commented Jun 21, 2015 at 3:54
@jfriend00 from those, nothing works. I thought adding declare var $: JQueryStatic; or import $ = require('jquery') should work, but neither did. I'm not sure how to fiddle this as its multiple files, and I think the multiple files are the issue. — Andrew Grothe
– Andrew Grothe, Commented Jun 21, 2015 at 19:18

Andrew Grothe · Accepted Answer · 2015-06-22 21:06:39Z

0

My issue was using external TypeScript modules. Nw.js uses the node require to load node modules, not client side scripts like RequireJS does. Making my TypeScript modules internal solved the issue.

Also learned that external TypeScript modules do not share the same context as the main application (rather obvious now...) and that is why jquery wasn't getting recognized.

answered Jun 22, 2015 at 21:06

Andrew Grothe

2,3941 gold badge34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript - referencing jQuery in classes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related