Using jQuery and TypeScript

Current Location：Home > Learning > PROGRAM > TypeScript >

Python PHP Java Go TypeScript C++ Vba Node.js C语言 MATLAB

Using jQuery and TypeScript

Author：JIYIK Last Updated：2025/04/15 Views：

This article provides the basic understanding and concepts of using jQuery with TypeScript. It guides on how to use jQuery in TypeScript through a coding example and outputs using various methods in TypeScript and provides knowledge about what jQuery is and why it is used.

What is jQuery

From the official documentation of jQuery, it is defined as a small JavaScript library that is fast and feature-rich. jQuery creates features such as HTML document traversal and manipulation, animation, Ajax, and event handling, which can run on many browsers using an easy-to-use API, making it simpler.

Let's have a coding example to understand jQuery better.

<!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>

jQuery's syntax is tailored for selecting HTML elements and performing operations on them.

The basic syntax of jQuery is as follows.

$(selector).action()

The above code selects documentthe object and in readythe state, it triggers an event in which it selects a buttonand on clickaction which hides h4the title of the tag. The HTML structure looks like this at the initial stage.

jQuery in TypeScript

When the event is triggered, the HTML will change to the following.

jQuery in TypeScript - Click Button

Now let’s dive into how to use jQuery with TypeScript with a detailed guide.

Install `@types`the package to set up jQuery in a TypeScript project

Before we start using jQuery in TypeScript, we need to setup jQuery in our project to use it with TypeScript. Let’s look at different and commonly used popular methods among the developer community to setup jQuery in our project and use it with TypeScript.

A common method used by developers is to install @typesthe package for the project, which automatically helps the compiler parse the definition of jQuery.

@typesPackages under the organization are automatically published using types-publisher 工具From DefinitelyTyped.

To get the package in your project @typesyou need to package.jsonrun the command in the same folder as the .

npm install --save-dev @types/jquery

npm install type package

@types/jqueryThis will install TypeScript in your project devDependency, which will help TypeScript compile correctly. Additionally, install jQuery by running the following command.

npm install jquery

This will add jQuery as a dependency to your project and resolve any conflicts related to jQuery in TypeScript.

npm install jquery

This will resolve any conflicts when compiling jQuery in TypeScript.

Previous: None

Next：Update TypeScript to the latest version using NPM

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >