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(/* ... */);
Related
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?
I'm trying to move my workspace to c9 because the Ace editor's autocompletion really pleased me when I worked on NodeJS projects.
But now I would like to work on JS files client-sided. It is from this point autocompletion going wrong. Indeed, there is nothing such as "require" command in client-side JS inside of the JS files themselves (except using some plugins) to inform of the other source files used in.
So when I use, in one of my JS files, a function that is defined in an other file (even libraries, frameworks : jquery, etc), Ace notifies me that the function is not defined (cause it has no way to know that the function is defined in another file, I guess).
Here we go : is there some comment line I could put in my code, or some configuration of c9 I could set, to correct that behavior ?
To remove the errors and warning, you can just add the following line near the top of your javascript file:
/* globals jquery lodash someOtherLibrary */
However, Cloud9 doesn't do autocomplete for client side libraries yet.
Abuse C9's require support
When you use var yourLibrary = require("./somefile.js");, auto-completion works perfectly.
But, as you stated, require() doesn't exist, nor do you want to have yourLibrary set to undefined. (Or to just throw an error)
As it turns out, C9 isn't that smart:
//Your library was defined in some other file
var yourLibrary; //"This does nothing other than making C9 happy
function require() {return 1;} //Define the require function
if(false) {
yourLibrary = require("yourLibraryFile.js");
}
Now, you can use autocomplete (it even shows the documentation comments)!
Note: It doesn't always work.
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.
I have a very simple d.ts mapping like this:
interface CordovaClass {
exec(success:Function, error:Function, ...rest:any[]);
}
declare var Cordova:CordovaClass;
I later reference it in NativeCordova.ts:
/// <reference path="../lib/cordova.d.ts" />
However, when I call the below in that same file:
Cordova.exec(success, error, tag, command, params);
The browser throws this error:
Uncaught ReferenceError: Cordova is not defined
Fairly new to mappings, but from what I can tell from other mappings (like jquery.d.ts) this should be working.
Any help would be greatly appreciated. :)
Update
I was able to get this working by declaring the var with a lowercase 'C':
declare var cordova:CordovaClass;
And then calling it that way:
cordova.exec(success, error, tag, command, params);
This is because that's the variable used by cordova to reference itself, much like the jQuery d.ts did.
*exec is not a real call you can make with Cordova, but that's not the problem I was having.
The TypeScript definition file is just to tell the compiler about what's supposed to already be there. At runtime, you need to have the Cordova implementation present through whatever script loading mechanism exists for your host (e.g. in a browser, a <script> tag).
When I open console of Chrome 14 and type...
require (or require(), if that matters)
I get: ReferenceError.
This means that JavaScript doesn't have that function by default, right? At least on web browsers.
Why I'm talking about that?
I needed Markdown parser for JavaScript.
What to do?
I, as usually, opened GitHub and searched for it. The first results that matched my needs was this and this.
Usually (I'm not that good with JavaScript) I include script I want to use before my code using <script /> tag and then... well - use it. But this time I don't get what's happening... :(
Usage for #1 script:
var input = "# Heading\n\nParagraph";
var output = require( "markdown" ).toHTML( input );
print( output );
Usage for #2 script:
var marked = require('marked');
console.log(marked('i am using __markdown__.'));
Where does that require() came from? Thanks in an advice! :)
It's a way to include node.js packages. Luckily, the first package you linked to, markdown-js, is very smart. It checks whether it is included as a node package, and if not, will set the markdown object to window.markdown. So all you have to do is include this file in a <script> tag and you should be able to use the markdown object from the global scope.
From the page you link to:
The simple way to use it with CommonJS is:
Looks like require comes from CommonJS