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, Nov 18 '16 at 13:24
@Devilscomrade When I did that, I see: Cannot resolve referenced file: — soamazing, Nov 18 '16 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, Nov 18 '16 at 14:08
@JuanMendes HTML ok, because this function has inside jQuery, but bootswitch doent exist inside jQuery. — soamazing, Nov 18 '16 at 18:37
Possible duplicate of [Using jQuery plugin in TypeScript](http://stackoverflow.com/questions/12719529/using-jquery-plugin-in-typescript) — Heretic Monkey, Nov 18 '16 at 19:16
If the d.ts file exists, and the reference path is correct, tsc should compile just fine. Check that the reference paths are correct. IIRC reference paths are relative. — Dzulqarnain Nasir, Nov 18 '16 at 20:11

score 0 · Answer 1 · edited May 23 '17 at 11:59

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

score 0 · Answer 2 · answered Nov 18 '16 at 14:04

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 '16 at 14:04

Hitmands

13,491
4
34
69

I'll try, but, the question is, imagine if I have use the plugin that doesn't have .ts file. – soamazing Nov 18 '16 at 15:42
@soamazing Is your question how to use a plugin in TypeScript that doesn't already have a typescript definition in a `.d.ts` file? – Ruan Mendes Nov 18 '16 at 19:00
probably here is what you need: http://stackoverflow.com/questions/26540165/typescript-and-libraries-such-as-jquery-with-d-ts-files – Hitmands Nov 19 '16 at 10:43

Using jQuery plugins inside Typescript file

2 Answers2