diff --git a/types/jquery/index.d.ts b/types/jquery/index.d.ts index 2d5543cb3a..d497b698ac 100644 --- a/types/jquery/index.d.ts +++ b/types/jquery/index.d.ts @@ -932,7 +932,7 @@ interface JQuery { * @see {@link https://api.jquery.com/height/} * @since 1.0 */ - height(): number; + height(): number | undefined; /** * Hide the matched elements. * @@ -1024,7 +1024,7 @@ interface JQuery { * @see {@link https://api.jquery.com/innerHeight/} * @since 1.2.6 */ - innerHeight(): number; + innerHeight(): number | undefined; /** * Set the CSS inner width of each element in the set of matched elements. * @@ -1044,7 +1044,7 @@ interface JQuery { * @see {@link https://api.jquery.com/innerWidth/} * @since 1.2.6 */ - innerWidth(): number; + innerWidth(): number | undefined; /** * Insert every element in the set of matched elements after the target. * @@ -1534,7 +1534,7 @@ interface JQuery { * @see {@link https://api.jquery.com/outerHeight/} * @since 1.2.6 */ - outerHeight(includeMargin?: boolean): number; + outerHeight(includeMargin?: boolean): number | undefined; /** * Set the CSS outer width of each element in the set of matched elements. * @@ -1554,7 +1554,7 @@ interface JQuery { * @see {@link https://api.jquery.com/outerWidth/} * @since 1.2.6 */ - outerWidth(includeMargin?: boolean): number; + outerWidth(includeMargin?: boolean): number | undefined; /** * Get the parent of each element in the current set of matched elements, optionally filtered by a selector. * @@ -2177,10 +2177,11 @@ interface JQuery { * @since 1.3 * @since 1.4 */ - toggleClass(className: string | ((this: TElement, index: number, className: string, state: boolean) => string), - state?: boolean): this; + toggleClass(className: string | ((this: TElement, index: number, className: string, state: TState) => string), + state?: TState): this; /** - * + * Add or remove one or more classes from each element in the set of matched elements, depending on + * either the class's presence or the value of the state argument. * * @param state A boolean value to determine whether the class should be added or removed. * @see {@link https://api.jquery.com/toggleClass/} @@ -2314,7 +2315,7 @@ interface JQuery { * @see {@link https://api.jquery.com/width/} * @since 1.0 */ - width(): number; + width(): number | undefined; /** * Wrap an HTML structure around each element in the set of matched elements. * diff --git a/types/jquery/jquery-tests.ts b/types/jquery/jquery-tests.ts index 02eb9f0695..03c8d18360 100644 --- a/types/jquery/jquery-tests.ts +++ b/types/jquery/jquery-tests.ts @@ -249,6 +249,463 @@ function JQuery() { } } + function css() { + // TODO: .css() getters can return 'undefined' for properties that don't exist. Consider changing the return types to reflect this after adding specialized signatures. + function css() { + // $ExpectType JQuery + $('p').css('cssProp', 'value'); + + // $ExpectType JQuery + $('p').css('cssProp', 20); + + // $ExpectType JQuery + $('p').css('cssProp', function(index, value) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + value; + + return 'value'; + }); + + // $ExpectType JQuery + $('p').css('cssProp', function(index, value) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + value; + + return 20; + }); + + // $ExpectType JQuery + $('p').css('cssProp', function(index, value) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + value; + }); + + // $ExpectType JQuery + $('p').css('cssProp', function(index, value) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + value; + + return undefined; + }); + + // $ExpectType JQuery + $('p').css({ + myProp1: 'value', + myProp2: 20, + myProp3(index, value) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + value; + + return 'value'; + }, + myProp4(index, value) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + value; + + return 20; + }, + myProp5(index, value) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + value; + }, + myProp6(index, value) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + value; + + return undefined; + } + }); + + // $ExpectType string + $('p').css('myProp'); + + // $ExpectType PlainObject + $('p').css([ + 'myProp1', + 'myProp2' + ]); + } + + function height() { + // $ExpectType JQuery + $('p').height('200px'); + + // $ExpectType JQuery + $('p').height(400); + + // $ExpectType JQuery + $('p').height(function(index, height) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + height; + + return '200px'; + }); + + // $ExpectType JQuery + $('p').height(function(index, height) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + height; + + return 400; + }); + + // $ExpectType number | undefined + $('p').height(); + } + + function innerHeight() { + // $ExpectType JQuery + $('p').innerHeight('200px'); + + // $ExpectType JQuery + $('p').innerHeight(400); + + // $ExpectType JQuery + $('p').innerHeight(function(index, height) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + height; + + return '200px'; + }); + + // $ExpectType JQuery + $('p').innerHeight(function(index, height) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + height; + + return 400; + }); + + // $ExpectType number | undefined + $('p').innerHeight(); + } + + function outerHeight() { + // $ExpectType JQuery + $('p').outerHeight('200px'); + + // $ExpectType JQuery + $('p').outerHeight(400); + + // $ExpectType JQuery + $('p').outerHeight(function(index, height) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + height; + + return '200px'; + }); + + // $ExpectType JQuery + $('p').outerHeight(function(index, height) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + height; + + return 400; + }); + + // $ExpectType number | undefined + $('p').outerHeight(); + + // $ExpectType number | undefined + $('p').outerHeight(true); + } + + function width() { + // $ExpectType JQuery + $('p').width('200px'); + + // $ExpectType JQuery + $('p').width(400); + + // $ExpectType JQuery + $('p').width(function(index, width) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + width; + + return '200px'; + }); + + // $ExpectType JQuery + $('p').width(function(index, width) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + width; + + return 400; + }); + + // $ExpectType number | undefined + $('p').width(); + } + + function innerWidth() { + // $ExpectType JQuery + $('p').innerWidth('200px'); + + // $ExpectType JQuery + $('p').innerWidth(400); + + // $ExpectType JQuery + $('p').innerWidth(function(index, width) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + width; + + return '200px'; + }); + + // $ExpectType JQuery + $('p').innerWidth(function(index, width) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + width; + + return 400; + }); + + // $ExpectType number | undefined + $('p').innerWidth(); + } + + function outerWidth() { + // $ExpectType JQuery + $('p').outerWidth('200px'); + + // $ExpectType JQuery + $('p').outerWidth(400); + + // $ExpectType JQuery + $('p').outerWidth(function(index, width) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + width; + + return '200px'; + }); + + // $ExpectType JQuery + $('p').outerWidth(function(index, width) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType number + width; + + return 400; + }); + + // $ExpectType number | undefined + $('p').outerWidth(); + + // $ExpectType number | undefined + $('p').outerWidth(true); + } + + function offset() { + // $ExpectType JQuery + $('p').offset({ + left: 20, + top: 50 + }); + + // $ExpectType JQuery + $('p').offset(function(index, coords) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType Coordinates + coords; + + return { + left: 20, + top: 50 + }; + }); + + // $ExpectType Coordinates + $('p').offset(); + } + + function position() { + // $ExpectType Coordinates + $('p').position(); + } + + function scrollLeft() { + // $ExpectType JQuery + $('p').scrollLeft(200); + + // $ExpectType number + $('p').scrollLeft(); + } + + function scrollTop() { + // $ExpectType JQuery + $('p').scrollTop(200); + + // $ExpectType number + $('p').scrollTop(); + } + + function addClass() { + // $ExpectType JQuery + $('p').addClass('className'); + + // $ExpectType JQuery + $('p').addClass(function(index, currentClassName) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + currentClassName; + + return 'className'; + }); + } + + function hasClass() { + // $ExpectType boolean + $('p').hasClass('className'); + } + + function removeClass() { + // $ExpectType JQuery + $('p').removeClass('className'); + + // $ExpectType JQuery + $('p').removeClass(function(index, currentClassName) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + currentClassName; + + return 'className'; + }); + + // $ExpectType JQuery + $('p').removeClass(); + } + + function toggleClass() { + // $ExpectType JQuery + $('p').toggleClass('className', true); + + // $ExpectType JQuery + $('p').toggleClass(function(index, className, state) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + className; + // $ExpectType true + state; + + return 'className'; + }, true); + + // $ExpectType JQuery + $('p').toggleClass('className'); + + // $ExpectType JQuery + $('p').toggleClass(function(index, className, state) { + // $ExpectType HTMLElement + this; + // $ExpectType number + index; + // $ExpectType string + className; + // $ExpectType boolean + state; + + return 'className'; + }); + + // $ExpectType JQuery + $('p').toggleClass(false); + + // $ExpectType JQuery + $('p').toggleClass(); + } + } + function on() { function false_handler_shorthand() { $().on('events', false); diff --git a/types/jquery/test/example-tests.ts b/types/jquery/test/example-tests.ts index d2c0a8464d..961e239192 100644 --- a/types/jquery/test/example-tests.ts +++ b/types/jquery/test/example-tests.ts @@ -1822,8 +1822,8 @@ function examples() { } function finish_0() { - var horiz = $('#path').width() - 20, - vert = $('#path').height() - 20; + var horiz = $('#path').width()! - 20, + vert = $('#path').height()! - 20; var btns: { [key: string]: () => void; } = { bstt: function() { @@ -1992,13 +1992,13 @@ function examples() { } $('#getp').click(function() { - showHeight('paragraph', $('p').height()); + showHeight('paragraph', $('p').height()!); }); $('#getd').click(function() { - showHeight('document', $(document).height()); + showHeight('document', $(document).height()!); }); $('#getw').click(function() { - showHeight('window', $(window).height()); + showHeight('window', $(window).height()!); }); } @@ -4935,13 +4935,13 @@ function examples() { } $('#getp').click(function() { - showWidth('paragraph', $('p').width()); + showWidth('paragraph', $('p').width()!); }); $('#getd').click(function() { - showWidth('document', $(document).width()); + showWidth('document', $(document).width()!); }); $('#getw').click(function() { - showWidth('window', $(window).width()); + showWidth('window', $(window).width()!); }); }