How to Use jQuery With TypeScript
This tutorial provides the basic understanding and concept of using jQuery with TypeScript. It guides how jQuery is used in TypeScript with a coding example and outputs using various methods in TypeScript and gives knowledge about what jQuery is and why it is used.
What Is jQuery
From the official documentation of jQuery, it is defined as a fast, feature-rich and small JavaScript library. The jQuery creates things like HTML document traversal and manipulation, animation, Ajax and event handling much simpler with an easy-to-use API that works across many browsers.
Let’s have a coding example to get a better idea about jQuery.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(()=>{
$("button").click(function(){
$("h4").hide();
});
});
</script>
</head>
<body>
<h4>This is a heading</h4>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
</html>
The syntax for jQuery is tailor-made for selecting the elements of HTML and performing the actions on the element(s).
The basic syntax for jQuery is below.
$(selector).action()
- A
$sign is used to define jQuery. - A
(selector)is used to query HTML elements. - A jQuery
action()is used to perform a particular function on the element(s).
The above code selects the document object, and on the ready state, it fires an event in which it selects a button and on click action that hides a heading of the h4 tag. The HTML structure looks like this in the initial phase.
After an event is fired, the HTML will be changed to the following.
Now let’s dive into using jQuery with TypeScript with detailed guidelines.
Install @types Package to Set Up jQuery in TypeScript Project
Before we start using jQuery in TypeScript, we need to set up the jQuery in our project to utilize it with TypeScript. Let’s check the different and commonly used popular methods among the developer community to set up jQuery in our project and use it with TypeScript.
The commonly used method among the developers is installing the @types package for the project, which automatically helps the compiler resolve the definitions for the jQuery.
Packages under the @types organization are automatically published from DefinitelyTyped using the types-publisher tool.
To get the @types package inside the project, you need to run the command in the same folder as your package.json file.
npm install --save-dev @types/jquery
This will install @types/jquery as devDependency in your project, which will help TypeScript to compile properly. Also, install jQuery by running the following command.
npm install jquery
This will add jQuery as a dependency in your project and resolve all of the conflicts related to jQuery in TypeScript.
This will resolve all of the conflicts for jQuery in TypeScript in compiling the types.
Ibrahim is a Full Stack developer working as a Software Engineer in a reputable international organization. He has work experience in technologies stack like MERN and Spring Boot. He is an enthusiastic JavaScript lover who loves to provide and share research-based solutions to problems. He loves problem-solving and loves to write solutions of those problems with implemented solutions.
LinkedIn