1

Just found out about Typescript, and after messing around with it I decided that I wanted to test it with JQuery and OMG I can't make it work.

The instructions seems fairly simple: Get jquery.d.ts -> Add it to the project -> Add /// <reference path="jquery.d.ts" />

It seems to work fairly well, auto-complete and everything. The only issue is that the code won't compile. This is the error I'm getting: 0x800a1391 - JavaScript runtime error: '$' is undefined

This is the Jquery.d.ts that I'm using: https://github.com/borisyankov/DefinitelyTyped/blob/master/jquery/jquery.d.ts

And here's my code:

/// <reference path="jquery.d.ts" />
class Greeter {
element: HTMLElement;
span: HTMLElement;
img: HTMLElement;
timerToken: number;

constructor(element: HTMLElement) {
    this.element = element;
    this.element.innerHTML += "The time is: ";
    this.span = document.createElement('span');
    this.img = document.createElement('img');
    this.img.setAttribute('src', "http://static5.businessinsider.com/image/52447d4becad0431644a8db2-1200/sean-raiger-of-sacramento-won-silver-for-the-partial-imperial-beard.jpg");
    this.img.setAttribute('style', "height:500px;width:500px;");
    this.element.appendChild(this.span);
    this.span.innerText = new Date().toUTCString();
    this.element.appendChild(this.img);
    $('img').click((event: JQueryEventObject) => { this.span.innerHTML = "aaaaaa"});
    //$(this.img).click(ActOnClick($(this.img)));
}

start() {
    this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
}

stop() {
    clearTimeout(this.timerToken);
}

}


window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};
5
  • 1
    You'll need to include the current jquery.js in your HTML page in a script tag. The .d.ts is just the interface definition file, it does not contain the jQuery functionality. Commented Jan 29, 2014 at 19:35
  • Well that's a shame. But adding <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> before <script src="app.js"></script> in default.html doesn't solve the issue Commented Jan 29, 2014 at 19:44
  • 1
    Could you clarify -- is this at runtime or compile time? The error suggests run-time, but you said it was at compile time. Commented Jan 29, 2014 at 19:54
  • Yeah you were right it was at runtime. However the code now works, which is weird since I tried to run it after adding the script tags. I'll just say that maybe a clean/recompile with the extra tags fixed it. If you write your comment as a response I can mark it as solved Commented Jan 29, 2014 at 20:02
  • why is this tagged c#?? Commented Feb 17, 2017 at 19:14

1 Answer 1

2

Make sure that you've included the script for jQuery on your HTML page:

<script src="/assets/jQuery.min.js"></script>

The .d.ts files serve only as the definition for jQuery and not the actual implementation. If you load the jQuery JavaScript files before your compiled Typescript => JavaScript files, it should work without issue (you may need to clear your browser cache/refresh the web page if it doesn't work immediately).

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.