Using jQuery (ajax) with TypeScript

Question

I have installed the jQuery typings in my TypeScript project. I can type $.ajax(...) without any compile errors in VS Code. However, when I check it in localhost, I get an error saying that "$ is not defined". I tried to fix it by importing jQuery like so:

 import * as jQuery from "jquery"

I imported express in the same way, and it works.

When I type "jquery." in VS Code, VS Code auto-suggests "ajax" as a method call, so it knows about my import. But when I check it in localhost again, it tells me jquery.ajax is not a function.

My test ajax call:

jquery.ajax("test.html", {
            success: function () {
                alert("success");
            },
            error: function () {
                alert("error");
            }
        });

How can you make an ajax call with jQuery with TypeScript?

You're probably not including the jQuery script in your HTML. — Heretic Monkey
– Heretic Monkey, Commented Aug 19, 2016 at 20:47

Katana314 · Accepted Answer · 2016-08-19 20:49:15Z

1

What typings do is tell your TypeScript what methods are safe to interact with a certain JavaScript (not TypeScript) file. They're like header files in C++. You still need to actually have the relevant code imported to your page in some way. A basic way to do so would be to add something like this in your HTML's <head>:

<script src="scripts/jquery.js"></script>

If you're not using a module system like CommonJS or AMD (something you would have to set up yourself), you may want to remove the import statement as it's liable to confuse you.

answered Aug 19, 2016 at 20:49

Katana314

8,6052 gold badges31 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Using jQuery (ajax) with TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related