I am trying to work out the position and the height/width of a DOM element through TypeScript/JQuery. Before TypeScript I simply did something like this:
function ActOnClick(itemClicked, loadPath) {
//sample code
var v1 = itemClicked.offset();
var v2 = itemClicked.width();
var v3 = itemClicked.height();
};
$(document).ready(function () {
$("#idCRM").click(function () {
ActOnClick($("#idCRM"), "/Widgets/GetCRM");
});
}
where idCRM is a 'section' in my cshtml document (but it could be any div etc.)
Now I am trying to move this code into TypeScript but what type do I expect in the ActOnClick function to come in from the jQuery's $("#idCRM")? Right now I choose 'Element' but a) it doesn't expose width, height etc and b) the ActOnClick call fails caused by the $("#idCRM")!
/// <reference path="../../ScriptsTS/jquery.d.ts" />
function ActOnClick(itemClicked: Element, loadPath: string) {
var v1 = itemClicked.offset(); <-- FAILS
var v2 = itemClicked.width(); <-- FAILS
var v3 = itemClicked.height(); <-- FAILS
};
$(document).ready(function () {
$("#idCRM").click(function () {
ActOnClick($("#idCRM"), "/Widgets/GetCRM"); <-- FAILS
});
}
If you need the code to just work, you can always use the Any
typescript type, like:
function ActOnClick(itemClicked: Any, loadPath: string) {
var v1 = itemClicked.offset();
var v2 = itemClicked.width();
var v3 = itemClicked.height();
};
Typescript basically shuts up on an Any
variable, and it won't issue any errors or warnings. However, $("#idCRM")
should return an object that implements the JQuery
interface, defined in jquery.d.ts
, so you should actually use:
function ActOnClick(itemClicked: JQuery, loadPath: string) {
var v1 = itemClicked.offset();
var v2 = itemClicked.width();
var v3 = itemClicked.height();
};
the offset()
, width()
and height()
methods are defined on that interface, and they return Object
, number
and number
, respectively.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With