or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ajax.mdcore-selection.mdcss-styling.mddeferred-promises.mdeffects.mdevents.mdindex.mdmanipulation.mdutilities.md
tile.json

tessl/npm-types--jquery

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@types/jquery@3.5.x

To install, run

npx @tessl/cli install tessl/npm-types--jquery@3.5.0

index.mddocs/

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.