CODEWITHSUNDEEP
c#visual-studio-2012typescript
Axel
Axel

Reputation: 454

Importing JQuery in typescript

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();
};

Upvotes: 1

Views: 2026

Answers (1)

WiredPrairie
WiredPrairie

Reputation: 59763

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).

Upvotes: 2

Related Questions