Can't import JQuery into TypeScript file

Question

After installing jquery and @types/jquery I can't seem to get JQuery to work in my typescript file.

If I use:

import * as $ from 'jquery';
$("#test").addClass("className");

I get the following error on $("#test"):

TS2349: Cannot invoke an expression whose type lacks a call signature.

If I follow WebStorm's recommended change of changing the import to:

import $ from 'jquery';

Then no errors show but when trying to compile the file I get the error:

error TS1192: Module '"C:/Users/Home/Desktop/react/hello-world/node_modules/@types/jquery/index"' has no default export.

I've looked at a dozen other StackOverFlow posts and nothing has helped. Any ideas?

If I try something simple like `$.each([],() => {});` I still get $ is undefined? — AlwaysNeedingHelp, Jan 07 '19 at 00:50
seems to work properly with `import $ from 'jquery';`: https://stackblitz.com/edit/typescript-2sfodn?file=index.ts — Andriy, Jan 07 '19 at 01:21
Wanna chat? https://chat.stackoverflow.com/rooms/186280/jquery-types — Ruan Mendes, Jan 07 '19 at 01:42
@Andriy I think it has something to do with React transpilation interacting with Babel — Ruan Mendes, Jan 07 '19 at 02:20
If you don't have an answer by the weekend, send me a zip file, and I can try hacking it again. I'll be in that chat for the next 10 minutes — Ruan Mendes, Jan 09 '19 at 14:27

score 0 · Answer 1 · answered Jan 07 '19 at 09:00

0

Try to add allowSyntheticDefaultImports flag to your tsconfig or --allowSyntheticDefaultImports to your script.

Another option would be to try esModuleInterop flag.

References:

You need TypeScript 1.8.0 or later

answered Jan 07 '19 at 09:00

Andriy

It doesn't work I'm afraid. I was able to reproduce it from a bare `create-react-app`, installing jquery, importing with `import * as $ from 'jquery';` (or any other variation) in `index.tsx` and compiling with `tsc --jsx react-native *tsx`. There's always some error. – AlwaysNeedingHelp Jan 07 '19 at 13:53

1 Answers1