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: http://stackoverflow.com/questions/13252225/call-a-global-variable-inside-typescript-module or this [How to create basic TypeScript project using jQuery, RequireJS, and KnockoutJS](http://stackoverflow.com/questions/25924288/how-to-create-basic-typescript-project-using-jquery-requirejs-and-knockoutjs) — jfriend00, Jun 21 '15 at 03: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, Jun 21 '15 at 19:18

score 0 · Answer 1 · answered Jun 22 '15 at 21:06

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.

TypeScript - referencing jQuery in classes

1 Answers1