javascript - Typescript and Jquery import - $ is not a function - Stack Overflow

admin管理员组

文章数量:1335615

I'm using typescript with jquery, but I keep getting

Uncaught TypeError: $ is not a function

Has anybody seen this before?

I'm piling typescript to ES2017, then transpiling to ES5 using webpack.

//tsconfig
{
      "pileOnSave": true,
      "pilerOptions": {
        "module": "es2015",

        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es2017",
        "noImplicitAny": false,
        "outDir": "Output",
        "esModuleInterop": true

      }
    }

How jquery is being used

import * as $ from "jquery";
 var form = $(document.createElement('form'));

The browser sees jquery ($)

But then I get this

I'm using typescript with jquery, but I keep getting

Uncaught TypeError: $ is not a function

Has anybody seen this before?

I'm piling typescript to ES2017, then transpiling to ES5 using webpack.

//tsconfig
{
      "pileOnSave": true,
      "pilerOptions": {
        "module": "es2015",

        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es2017",
        "noImplicitAny": false,
        "outDir": "Output",
        "esModuleInterop": true

      }
    }

How jquery is being used

import * as $ from "jquery";
 var form = $(document.createElement('form'));

The browser sees jquery ($)

But then I get this

• javascript
• jquery
• typescript
• npm

Share Improve this question Follow asked Feb 7, 2018 at 21:59 AnishAnish 3,17233 gold badges3030 silver badges3030 bronze badges 3

• prntscr./iblrdv so there's something wrong with your jquery – An0num0us Commented Feb 7, 2018 at 22:03
• is jquery the path of your JQuery Library?? you have to type the path of your JQuery library – Kenry Sanchez Commented Feb 7, 2018 at 22:03
• stackoverflow./questions/28969861/… – An0num0us Commented Feb 7, 2018 at 22:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Found the solution. To use $ as a function, I had to import the default from the the jquery npm module. With this import statement, it works.

import $ from "jquery";

I also had to turn this on in tsconfig.json

"allowSyntheticDefaultImports":  true

Seems like you are missing jQuery type definitions which are needed by typescript piler. You need to install both jQuery and jQuery type definitions. If you are using npm to install packages, the below steps will work. (Otherwise make sure you have both the packages installed in your environment)

1.Install jQUery

npm install --save jquery

2.Install jQuery type definitions

npm install -D @types/jquery

Now, you can import jQuery in your code as below

import * as $ from 'jquery';

本文标签： javascriptTypescript and Jquery import is not a functionStack Overflow