Using jQuery plugins inside Typescript file

Question

I'm using typescript for the first time in my company projects, and I have this JS file:

/// <reference path="jquery.d.ts" />
/// <reference path="bootstrap-switch.d.ts" />    
function CreateIdeSkuValidoSwitch() {
     $("[name='actived_ideskuvalido']").bootstrapSwitch();
}

But when I will use this in my Typescript function, the compile say: property does not exist on type 'jQuery'.

I want to know, how I use this jQuery plugin switch inside my ts files with jQuery.

Sorry my bad english.

Pretty sure TS just compiles JS. Try referencing the path to the compiled JS file instead of the TS file. I might be wrong, especially since its friday. — Olaf
– Olaf, Commented Nov 18, 2016 at 13:24
@Devilscomrade When I did that, I see: Cannot resolve referenced file: — soamazing
– soamazing, Commented Nov 18, 2016 at 13:41
Really confused, if jquery.d.ts and bootstrap-switch.d.ts exist in the same directory, this error should not be happening unless neither definition file was found. Do you get an error if you have code like $("[name='actived_ideskuvalido']").html('hello')? — Ruan Mendes
– Ruan Mendes, Commented Nov 18, 2016 at 14:08
@JuanMendes HTML ok, because this function has inside jQuery, but bootswitch doent exist inside jQuery. — soamazing
– soamazing, Commented Nov 18, 2016 at 18:37

Hitmands · Accepted Answer · 2016-11-18 14:04:07Z

0

As you can see here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/bootstrap-switch/bootstrap-switch.d.ts the jQuery type is extended with the bootstrapSwitch method, so, if the reference is correctly added to the stack, you shouldn't have problems...

answered Nov 18, 2016 at 14:04

Hitmands

14.2k4 gold badges41 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

soamazing Over a year ago

I'll try, but, the question is, imagine if I have use the plugin that doesn't have .ts file.

Ruan Mendes Over a year ago

@soamazing Is your question how to use a plugin in TypeScript that doesn't already have a typescript definition in a .d.ts file?

Hitmands Over a year ago

probably here is what you need: stackoverflow.com/questions/26540165/…

Community · Accepted Answer · 2017-05-23 11:59:55Z

Your question is unclear; however, from your comment "imagine if I have use the plugin that doesn't have .ts file" it seems like you are asking: How can I use a jQuery plugin that doesn't already a .d.ts definitions file.

The reason jQuery is defined in TypeScript is because are using a jQuery definitions file. That file tells TypeScript that $() is a function that returns an object with the known jQuery functions.

If you create a new plugin, you should create a .d.ts file that will let users of your plugin reference your code from TypeScript.

If you use a plugin that doesn't have a TypeScript definition file, you have to create a definition yourself, or you can cast your jQuery object to any. The first option is much better because the IDE and the compiler will still help you.

Let's say you create a new plugin that replaces the content of the object with the words "Hello World";

(function( $ ) {
    $.fn.helloWorld = function() {  
      this.html('Hello World');
      return this;
    }
})(jQuery);

// Either the plugin author provides the definition, or you write them yourself
interface JQuery {
    helloWorld();
}

TypeScript allows you to define an interface multiple times, combining it with previous definitions, so the above definition won't overwrite the existing definition.

See Using jQuery plugin in TypeScript

And here's an example that shows that you can add behavior to existing interfaces

Definitely Typed is a resource maintains definition files that allow you to use regular JavaScript libraries from your TypeScript and it has a number of definition for popular jQuery plugins

Collectives™ on Stack Overflow

Using jQuery plugins inside Typescript file

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related