0

I am trying to get AJAX working in typescript, so i've found a way how to add Jquery to Typescript. I called these commands in VS code terminal:

npm install jquery --save
npm install --save @types/jquery
npm install @types/jquery --save-dev

After that i added these rows at the top of my main typescript file:

import jquery = require("jquery");
const $: JQueryStatic = jquery;

After I use tsc scripts.ts i get scripts.js file and move generated .js file to the project i get the error in the chrome browser: Uncaught ReferenceError: exports is not defined. https://i.stack.imgur.com/u1WAn.png

This is not react or angular project.

I don't know why, but it hard to find working answer on my question.. It seems like majority is using react or angular, so answers not fits to my problem.

All i want is to use AJAX calls via Typescript.

Mark Grindcore
  • 77
  • 8
  • You do *not* need jQuery to use ajax. Just use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). – Heretic Monkey Jul 22 '20 at 13:15
  • Does this answer your question? [How to use jQuery with TypeScript](https://stackoverflow.com/questions/32050645/how-to-use-jquery-with-typescript) – Heretic Monkey Jul 22 '20 at 13:16
  • @HereticMonkey i need it to be working in IE as well unfortunately. – Mark Grindcore Jul 22 '20 at 13:17
  • @HereticMonkey what? Error is different from the url you provided. – Mark Grindcore Jul 22 '20 at 13:17
  • @HereticMonkey Also as i told, i am NOT USING angular or react. – Mark Grindcore Jul 22 '20 at 13:21
  • I know; only 2 of the 10 answers even mention Angular. The [highest voted answer](https://stackoverflow.com/a/32052431/215552) details exactly the steps needed to get jQuery working with TypeScript, with no mention of Angular or React. – Heretic Monkey Jul 22 '20 at 13:24
  • IE supports [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest), which is the basis of ajax. I mean, if you want to use jQuery for other things, rock on. Just seems a waste to pull in a largish library for a simple thing like ajax. There's also axios, which is a popular abstraction for ajax operations. – Heretic Monkey Jul 22 '20 at 13:31
  • @HereticMonkey XMLHttpRequest is not a good option, because of CORS policies. – Mark Grindcore Jul 22 '20 at 14:01
  • *sigh* I've been doing "ajax" since before it was called ajax. [jQuery uses `XMLHttpRequest` behind the scenes](https://github.com/jquery/jquery/blob/master/src/ajax/xhr.js#L6), so any issues you think are unique to that technology will occur there too. CORS affects any HTTP connection you make from a browser to a server that implements CORS. – Heretic Monkey Jul 22 '20 at 14:06

1 Answers1

0

First if you use typescript not sure why you would use require. Second

npm install --save @types/jquery
npm install @types/jquery --save-dev

You just need one npm install @types/jquery --save-dev you do not need your types in dependencies.

Hope it helps, if not maybe we can try something, some code example would help.

Edit:

Check Krzysztof Grzybek solution His example is with moment js, but i think it can work for your problem. Try adding in your tsconfig.json

{
   "compilerOptions": {
    ...
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    ...   },
...
}
pavlovic265
  • 491
  • 2
  • 8
  • Please show all relevant code on this site, not only on an external site. – Heretic Monkey Jul 22 '20 at 13:25
  • here is the error i get when using tsc command: "tsc scripts.ts scripts.ts:3:8 - error TS1259: Module '"D:/cr/Scripts/node_modules/@types/jquery/index"' can only be default-imported using the 'esModuleInterop' flag 3 import $ from 'jquery'; ~ node_modules/@types/jquery/index.d.ts:35:1 35 export = jQuery; ~~~~~~~~~~~~~~~~ This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag." – Mark Grindcore Jul 22 '20 at 13:31
  • @HereticMonkey The code is nothing special Just installing `npm install --save @types/jquery` and `npm install @types/jquery --save-dev` `import $ from "jquery"; $.ajax({ method: "get", url: "https://jsonplaceholder.typicode.com/todos/1" }).then(console.log);` Anyway what I found is from [this post on stackoverflow](https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file) This example is with moment might help you with jquery So in your tsconfig add(change) `esModuleInterop` and `allowSyntheticDefaultImports` to true. – pavlovic265 Jul 23 '20 at 04:14
  • If you got inspiration from another answer on Stack Overflow, the proper thing to to is to give attribution, *in the answer*, along with the code, *in the answer*. See [answer]. – Heretic Monkey Jul 23 '20 at 11:26
  • @HereticMonkey thanks. To correct my answer. Check [Krzysztof Grzybek solution](https://stackoverflow.com/a/56348146/7028003) His example is with moment js, but i think it can work for your problem. Try adding in your `tsconfig.json` `{ "compilerOptions": { ... "allowSyntheticDefaultImports": true, "esModuleInterop": true, ... }, ... }` – pavlovic265 Jul 23 '20 at 12:13
  • I'm not having the problem. I'm trying to get you to [edit] your answer so that it follows the guidance established for answers, and doesn't get downvoted or deleted. – Heretic Monkey Jul 23 '20 at 12:37