CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-types--jquery

TypeScript definitions for jQuery, the popular JavaScript library for DOM manipulation, event handling, and AJAX operations

—

Pending
Overview
Eval results
Files

jQuery TypeScript Types (@types/jquery)

jQuery TypeScript type definitions provide comprehensive type safety for jQuery, the most widely used JavaScript library for DOM manipulation, event handling, and AJAX operations.

Overview

jQuery is a fast, small, and feature-rich JavaScript library that makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API. The TypeScript types provide complete type safety for all jQuery features including DOM selection, manipulation, events, effects, AJAX, and utility functions.

Package Information

  • Package Name: @types/jquery
  • Package Type: npm (TypeScript definitions)
  • Language: TypeScript
  • Installation: npm install --save-dev @types/jquery
{
  "name": "@types/jquery",
  "version": "3.5.9999",
  "dependencies": {
    "@types/sizzle": "*"
  }
}

Core Imports

ESM Import

import * as $ from 'jquery';
import { JQueryStatic, JQuery } from 'jquery';

// Usage
const elements = $('div');

CommonJS Require

const $ = require('jquery');
const jQuery = require('jquery');

// Usage  
const elements = $('div');

Global Usage

// When jQuery is loaded globally via script tag
declare const $: JQueryStatic;
declare const jQuery: JQueryStatic;

// Usage
const elements = $('div');

Basic Usage

DOM Selection

// Select elements by CSS selector
const divs: JQuery<HTMLElement> = $('div');
const byId: JQuery<HTMLElement> = $('#myId');
const byClass: JQuery<HTMLElement> = $('.myClass');

// Type-safe element selection
const inputs: JQuery<HTMLInputElement> = $('input');
const buttons: JQuery<HTMLButtonElement> = $('button');

DOM Manipulation

// Add content
$('#container').append('<div>New content</div>');
$('#container').html('<p>Replace content</p>');
$('#container').text('Plain text content');

// Modify attributes and properties
$('#myInput').attr('placeholder', 'Enter text');
$('#myInput').prop('disabled', true);
$('#myElement').addClass('active');

Event Handling

// Attach event handlers
$('#button').on('click', function(event) {
    console.log('Button clicked:', event.target);
});

// Type-safe event handlers
$('#form').on('submit', (event: JQuery.SubmitEvent) => {
    event.preventDefault();
    // Handle form submission
});

AJAX Requests

// GET request
$.get('/api/data')
    .done((data: any) => console.log(data))
    .fail((xhr: JQuery.jqXHR) => console.error('Error:', xhr.statusText));

// POST request with type safety
interface ApiResponse {
    success: boolean;
    data: any;
}

$.ajax({
    url: '/api/submit',
    method: 'POST',
    data: { name: 'John', email: 'john@example.com' },
    dataType: 'json'
}).done((response: ApiResponse) => {
    if (response.success) {
        console.log('Success:', response.data);
    }
});

Architecture

jQuery's TypeScript architecture consists of several key components:

Core Types

// Main jQuery interfaces
interface JQueryStatic {
    // Static methods available on $ or jQuery
    (selector: string): JQuery<HTMLElement>;
    (element: Element): JQuery<Element>;
    ajax(settings: JQuery.AjaxSettings): JQuery.jqXHR;
    extend<T>(target: T, ...sources: any[]): T;
    // ... many more static methods
}

interface JQuery<TElement = HTMLElement> {
    // Instance methods available on jQuery objects
    length: number;
    [index: number]: TElement;
    
    // DOM manipulation
    append(content: string | JQuery | Element): this;
    html(): string;
    html(content: string): this;
    
    // Events
    on(events: string, handler: Function): this;
    off(events?: string, handler?: Function): this;
    
    // ... hundreds of instance methods
}

Namespace Organization

declare namespace JQuery {
    // Core types
    type Selector = string;
    type htmlString = string;
    interface PlainObject<T = any> {
        [key: string]: T;
    }
    
    // AJAX types
    namespace Ajax {
        type TextStatus = "success" | "error" | "timeout" | "abort";
        interface AjaxSettings<TContext = any> {
            url?: string;
            method?: string;
            data?: any;
            success?: (data: any, textStatus: string, jqXHR: jqXHR) => void;
            error?: (jqXHR: jqXHR, textStatus: string, errorThrown: string) => void;
        }
    }
    
    // Event types
    interface Event {
        type: string;
        target: Element;
        currentTarget: Element;
        preventDefault(): void;
        stopPropagation(): void;
    }
    
    // Animation types
    interface EffectsOptions<TElement> {
        duration?: number | "fast" | "slow";
        easing?: string;
        complete?: (this: TElement) => void;
        progress?: (animation: Animation<TElement>, progress: number, remainingMs: number) => void;
    }
}

Type Safety Features

jQuery's TypeScript types provide extensive type safety through:

  • Generic Type Parameters: JQuery<TElement> maintains element type information
  • Method Overloading: Multiple signatures for flexible parameter combinations
  • Event Type Mapping: Type-safe event objects for different event types
  • AJAX Response Typing: Generic types for request/response data
  • Plugin Extension: Interface merging for type-safe plugin development

Capabilities

DOM Selection and Traversal

Complete API for selecting and navigating DOM elements with full type safety.

// Element selection with type inference
const divs = $('div'); // JQuery<HTMLElement>
const inputs = $('input'); // JQuery<HTMLInputElement>

// Traversal methods
const children = divs.children('.active');
const parents = divs.parents('section');
const siblings = divs.siblings(':visible');

DOM Manipulation

Comprehensive methods for modifying DOM structure, content, and attributes.

// Content manipulation
$('#container').append('<div>New</div>');
$('#container').html('<p>Replaced</p>');
$('#container').text('Plain text');

// Attribute/property manipulation
$('input').attr('placeholder', 'Enter text');
$('input').prop('checked', true);
$('div').addClass('active highlight');

Event Handling System

Type-safe event binding, delegation, and custom event system.

// Event binding with type safety
$('#button').on('click', (event: JQuery.ClickEvent) => {
    event.preventDefault();
    console.log('Clicked:', event.currentTarget);
});

// Event delegation
$(document).on('click', '.dynamic-button', handler);

// Custom events  
$('#element').trigger('custom:event', [data1, data2]);

Effects and Animation

Animation system with easing, queuing, and Promise-based completion.

// Basic animations
$('#element').fadeIn(500);
$('#element').slideUp('fast');
$('#element').animate({
    opacity: 0.5,
    left: '+=50'
}, {
    duration: 1000,
    easing: 'swing',
    complete: () => console.log('Animation complete')
});

AJAX Operations

Comprehensive AJAX API with Promise support and type-safe request/response handling.

// Simple requests
$.get('/api/users').done(users => console.log(users));
$.post('/api/users', userData).done(response => console.log(response));

// Advanced AJAX with full configuration
$.ajax({
    url: '/api/data',
    method: 'PUT', 
    contentType: 'application/json',
    data: JSON.stringify(payload),
    beforeSend: (xhr, settings) => xhr.setRequestHeader('X-Token', token)
}).done(response => {
    // Handle success
}).fail(xhr => {
    // Handle error
});

CSS and Styling

Complete CSS manipulation including computed styles, animations, and positioning.

// CSS property manipulation
$('#element').css('color', 'red');
$('#element').css({
    'background-color': '#fff',
    'font-size': '14px'
});

// Dimensions and positioning  
const width = $('#element').width();
const offset = $('#element').offset();
$('#element').height(200);

Utility Functions

Helper functions for common operations like iteration, type checking, and data manipulation.

// Iteration utilities
$.each(array, (index, value) => console.log(index, value));
$.map(array, (value, index) => value * 2);

// Type checking
$.isArray(obj);        // boolean
$.isFunction(obj);     // boolean  
$.isPlainObject(obj);  // boolean

// Data utilities
$.extend(true, target, source);    // Deep merge
$.param(object);                   // Serialize to query string

Deferred Objects and Promises

Promise-like objects for managing asynchronous operations with full type safety.

// Create and resolve Deferred
const deferred = $.Deferred<string>();
deferred.resolve('Success data');

// Promise-style chaining
deferred.promise()
    .done(data => console.log('Done:', data))
    .fail(error => console.log('Failed:', error))
    .always(() => console.log('Complete'));

// Combine multiple async operations
$.when(ajax1, ajax2, ajax3).done((result1, result2, result3) => {
    // All operations completed successfully
});

Each capability area includes complete API documentation with TypeScript signatures, parameter details, return types, and practical usage examples to enable productive development without needing to reference the source code.

Install with Tessl CLI

npx tessl i tessl/npm-types--jquery
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@types/jquery@3.5.x
Publish Source
CLI
Badge
tessl/npm-types--jquery badge