I'm referencing jquery in my typescript file but visual studio is telling me that it...
Could not find symbol '$'
Any ideas how to get rid of these errors?
ps - I am referencing jquery at the top of my typescript file as follows...
/// <reference path="./js/lib/jquery.min.js" />
You need to reference the jquery definition file jquery.d.ts, not the javascript file. So :
/// <reference path="./jquery.d.ts" />
You can get this file from here : https://github.com/borisyankov/DefinitelyTyped/tree/master/jquery
You can see sample usage here : https://github.com/borisyankov/DefinitelyTyped/blob/master/jquery/jquery-tests.ts#L1
You probably want to use the jQuery definitions from https://github.com/borisyankov/DefinitelyTyped. This way you'll gain intellisense, typechecking etc as well.
The more hackish approach is to simply add:
declare var $;
This will tell typescript that the variable $ is defined somewhere else. This is useful at times where there are no definitions available, or when you don't care about having working intellisense.
Related
I have added the following bit of code in my angular2 app to help MDL re-register the components when moving around the app...
ngAfterViewInit() {
componentHandler.upgradeDom();
}
And although it seems to be working ok (as expected) I am getting the following error...
(16,5): error TS2304: Cannot find name 'componentHandler'.
I'm still quite new to angular2 and typescript but I guess I need to import something so my code knows what componentHandler is(even though it must know what it is because it works and doesn't work without this code??? confused)
It should help you to add
declare var componentHandler: any;
at the top of your code. Please refer to the corresponding handbook section on Working with Other JavaScript Libraries in TypeScript.
if you are using cli.angular tool for generating your app
do this, so that no need to duplicate the code everywhere.
add below line into typings.d.ts file
declare var componentHandler: any;
reference the file into your component file as below
/// <reference path="../typings.d.ts" />
I guess you need to add
declare componentHandler;
componentHandler.upgradeDom();
See also Calling JavaScript directly from TypeScript
I'm trying to get Visual Studio Code 0.3.0 to recognize my JavaScript libraries. However, intellisense is complaining. Here's a repro:
Open Visual Studio Code
File > Open Folder (select a freshly created empty folder)
Add a file mytest.js to that folder
Download jquery-2.1.4.js (full/uncompressed) to that folder (appears in the side bar)
Enter this in mytest.js:
var x = jQuery('body');
Result: squiggly green lines under jQuery. Note that jQuery is just an example, I've had the same issue with libraries such as KnockoutJS and QUnit, etc.
I've tried adding a triple-slash reference like so:
/// <reference path="jquery-2.1.4.js" />
Heck, it even autocompleted the path for me. I've tried varying the path a bit, e.g. a ./ at the start, but the result is thus far invariably:
Hovering jQuery gives a popup saying:
Cannot find name 'jQuery'.
any
Still squiggly green lines. I hate squiggly lines though. How can I get rid of them?
You Need To Refefence the jQuery TypeScript Definition File.
You need a 'typings' folder in the root of your app or site. Within the 'typings' folder you need a jquery.d.ts file.
Your reference to the file should be similar to the following depending upon where the file reference is located in relation to the typings/jquery.d.ts file and folder:
/// <reference path="../../typings/jquery/jquery.d.ts"/>
Here's a TypeScript Definitions File reference for Node.js:
/// <reference path="typings/node/node.d.ts"/>
The easiest way to accomplish this is to click on the green squiggly in VSCode then click the light bulb and select Add /// reference to 'XYZ.d.ts'. This will automatically add everything you need.
In a comment above the Definitely Typed web site was referenced if you want or need to do this manually.
I don't know about VS Code, but regular Visual Studio often complains when you try to access "global" variables like this. I find that this pattern helps me to both avoid these warnings and keep my code more modular:
(function($) {
var x = $('body');
})(jQuery);
This has the added advantages of keeping your declared variables (x, e.g.) scoped within the file instead of globally, and allowing you to safely use short names (e.g. $) for your libraries internally, while avoiding naming conflicts. It also opens up an easy migration path if you end up needing to use requireJS or something like that for dependency loading.
Hopefully it will also get rid of your green squigglies?
When I use Visual Studio to edit an external Javascript file and use Javascript within the page, it unsurprisingly is unaware of JQuery, because the web page that owns it hasn't loaded the Javascript file.
//test.js:
$(document).ready(function () {
alert("If you really need a code example");
});
As a result, I get this error:
Error 1 Could not find symbol '$'
Again, this is a design time error, not a runtime error.
Is there a way to make the Visual Studio Editor a little smarter or at least suppress these errors?
Update:
I think it was the Typescript editor that I was in that just complained that there was an error, no error is shown when editing the rresulting javascript file.
Modified Question:
How can I make the TypeScript file editor happy? I think the "editor" may be Web Essentials add in and that there may be a directive to make it ignore the $, perhaps. Or am I thinking of JSLint?
I''m new to all of this...
Try:
jQuery(document).ready(function(){
});
or maybe you are missing the ); after the }
In TypeScript, all variables must be declared.
You can declare it with declare var $; at the beginning of the file.
Or you can use a definition file for jQuery:
Download it ;
Then, in your .ts file, include the definition file:
/// <reference path='jquery.d.ts' />
// here the compiler known jQuery
$(document).ready(/* ... */);
I am trying to document a javascript function in Visual Studio 2013. The particular function has a parameter of type jQuery, but IntelliSense is not picking up on the type, even though I have the vsdoc.js file referenced earlier in the file. Here is my code:
Early in file
/// <reference path="path_to_vsdoc/jquery-1.10.2-vsdoc.js" />
Later
/// <param name="dep" type="jQuery">The dependent element as a jQuery selector.</param>
function myfunction(dep) { ... }
When I type dep. VS gives me a message "IntelliSense was unable to determine an accurate completion list for this expression. The provided list contains all identifiers in the file. What I'm wondering is whether I can use types defined in my referenced files (i.e. jquery-1.10.2-vsdoc.js). "jQuery" is used as a type in the vsdoc file.
Thanks for the help!
Edit:
Turns out I'm silly and you have to put your function documentation inside the function.
I moved the jQuery in my project over to Microsoft's CDN yesterday so finally have jQuery intellisense back. Yay! However, I apparently need to include the following in all my .js files:
//These references should enable intellisense within this file
///<reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js" />
///<reference path="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js" />
I would prefer to have a single js file which contains the above references such that I have a single, unchanging reference in all my js files like so:
//These references should enable intellisense within this file
///<reference path="/shared/js/stdafx.js" />
The idea is that stdafx.js would be the file containing the jQuery references. Then I have only one place to update the versions or add additional references. I gave it a quick go, but it didn't seem to work. Can anyone figure out a way to make this happen?
Actually the above common reference did work in the end. I didn't realize how quirky VS was in regards to js intellisense. Funny enough it kicked in after compiling the project.
I did try Ctrl-Shift-J which refreshes the JavaScript as well. It takes a few seconds for it to kick in so give it a chance. Another tip I read was dragging the common.js file into the editor of the .js file I wanted to add the common reference to. This sanity check ensured I had the correct path (it did). It added a relative path (../shared/stdafx.js) but I was able to use an absolute path (/shared/js/stdafx.js) which means I can modify the VS .js template for new js files.
So I would suggest anyone who comes across this question to persevere, refresh the JavaScript, compile, even close and reopen VS as it will hopefully kick in for you eventually.
For anyone still wanting jQuery intellisense in their .js files (and why wouldn't you) you need to 'reference' the correct jQuery VSDOC file, that MS created for Visual Studio intellisense:
///<reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2-vsdoc.js" />
To test it, type:
$(
You should see full intellisense with PARAMETERS, as well as members. If you only see a single list of members, it's not working.