Use JQUERY in Typescript

Question

I'm trying to intregate JQUERY into Typescript but I hit a brick wall and I don't know how to get over it. Bear in mind that I'm a newbie when it comes to Typescript (been messing with it for a couple of months only), so there is a chance that this problem is very easy to solve but I can't figure it out.

So, I have this very simple program in TS:

/// <reference path="node_modules/@types/jquery/index.d.ts" />

function PrintName()
{
    let name:any = $('#txtName').val();
    console.log(name);
}

But when I run it in the web I get the error: Uncaught ReferenceError: $ is not defined at PrintName

But, when I include this line in the HTML:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

It works just fine. So, how can I add Jquery to the Typescript ? I tried with this command:

npm install --save-dev @types/jquery

And then adding the reference to index.d.ts, but I get the same error. I'm using Visual Studio Code 1.27, tsc 3.0.1 and npm 3.5

Thanks!

Matt McCutchen · Accepted Answer · 2018-10-21 19:11:27Z

3

Installing @types/jquery only gives you type information for jQuery; you still have to load an implementation at runtime. Using a separate <script> tag is OK. If you want to produce a single JavaScript file that includes your code as well as libraries it depends on that are packaged in module form (such as jQuery), you'll need to use a module bundler such as Webpack, Rollup, or Browserify; the TypeScript compiler is not capable of doing this by itself.

answered Oct 21, 2018 at 19:11

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

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

1 Comment

El.Psy.Kongroo Over a year ago

Thanks for the reply, I would have to check those modules then. Thanks!

MartinDoes · Accepted Answer · 2018-10-21 19:18:09Z

-1

add dependencies: type in CLI.

npm --save jquery
npm --save jquery-ui-bundle

in angular-cli.json:

"scripts": [ 
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/jquery-ui-bundle/jquery-ui.js"], ...

then in your component use:

declare var jQuery:any; // jQuery is the same as $

answered Oct 21, 2018 at 19:18

MartinDoes

1371 silver badge2 bronze badges

Collectives™ on Stack Overflow

Use JQUERY in Typescript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related