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

• 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

2 Answers 2

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';