How to Import JQuery into a Typescript File?

In this post, I would suggest two ways to import the JQuery library into a TypeScript file.

Approach 1

If you have included jquery library somewhere in your project then below the line of code shows how to imported jquery in TypeScript file:

import { $ } from '../jquery-3.1.1';

Approach 2

You can install jquery using npm and then import into a TypeScript file like this:

First, install jquery using the following command:

npm install @types/jquery --save-dev

Now, import jquery into import into a TypeScript file:

import * as $ from 'jquery';

Example: This approach worked for me and here is the sample usage of this:

import * as $ from 'jquery';

export class Login {

    static readonly PARAM_USERNAME = "j_username";
    static readonly PARAM_PASSWORD = "j_password";


    login(loginId, password, sdkURL) {
        let data = {
            PARAM_USERNAME: loginId,
            PARAM_PASSWORD: password
        }
        this.loginService(data);
    };

    logout(loginId) {
        //
    };

    private loginService(data: any) {
        console.log("inside ajax - data :: " + data);
        $.ajax({
            method: 'POST',
            url: 'URL Here',
            data: data,
            async: false,
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            success: function (response) {
                console.log(JSON.stringify(response));

            },
            error: function (response, status, error) {
                console.log(JSON.stringify(response));
            }
        });
    }
}

Reference

https://stackoverflow.com/questions/43783307/how-to-import-jquery-into-a-typescript-file

Free Spring Boot Tutorial | Full In-depth Course | Learn Spring Boot in 10 Hours

---

Watch this course on YouTube at Spring Boot Tutorial | Fee 10 Hours Full Course