How to compile TypeScript to JavaScript with jQuery, without any additional libraries or frameworks (NPM, etc.)

Question

I have an extremely simple single-page dashboard that does things like grab the weather, the subway alerts, etc. and I refresh it locally on my machine. It looked like:

project/
  index.html
  jquery-3.3.1.min.js
  script.js

And I wanted to convert it to TypeScript. I ported script.js to TypeScript, but in order to use jQuery had to download the definition file from here. I now have:

project/
  index.html
  jquery.d.ts
  script.ts

The first two lines of my TypeScript file are:

/// <reference path ="./jquery.d.ts"/>
import * as $ from "jquery"

When I run tsc *.ts, it compiles my script successfully, but the first four lines of the resulting/compiled JavaScript file are:

"use strict";
exports.__esModule = true;
/// <reference path ="./jquery.d.ts"/>
var $ = require("jquery");

And this fails in my browser with:

exports.__esModule = true; // Can't find variable: exports

I'm a pretty weak front-end developer beyond HTML/JS/jQuery, so I'm not sure where to start - I did some Googling but not much came up.

If you want to use JQuery via Module you have to use a packer like webpack or if you include it locally (inside html) you can use declare var $: JQuery — Tobias Fuchs
– Tobias Fuchs, Commented Mar 27, 2018 at 13:34
I don't need to use it as a module - I'd just like to be able to use it... at all. Is there an alternate non-module way to include jQuery without having to introduce another dependency/build step? — Craig Otis
– Craig Otis, Commented Mar 27, 2018 at 14:11
as far as i know is the Type of JQuery included in some versions (or splits) of typescript so you can just include it manually and the declare it in the file with declare var $: JQuery or if the type is not defined just use declare var $: any — Tobias Fuchs
– Tobias Fuchs, Commented Mar 27, 2018 at 14:39
@RichardFox The declare var $: any worked for me - feel free to add that as an answer. — Craig Otis
– Craig Otis, Commented May 2, 2018 at 12:44

Tobias Fuchs · Accepted Answer · 2018-05-03 12:01:59Z

1

If you mean so...

use declare var $: JQuery if the type is defined

else use declare vas $: any

for the case that your editor (f.e. VSCode) supports script var declarations use

{ 
 name: "$",
 type: JQuery (or any),
 ofReference: {
  scriptSrc: ["*jquery.js", "*jquery.min.js", "*code.jquery*"] 
 }
}

answered May 3, 2018 at 12:01

Tobias Fuchs

9385 silver badges8 bronze badges

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

1 Comment

Craig Otis Over a year ago

Thanks - copying my comment from above, declare var $: any worked for me!

Collectives™ on Stack Overflow

How to compile TypeScript to JavaScript with jQuery, without any additional libraries or frameworks (NPM, etc.)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related