How to Import JQuery into a Typescript File?

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF