TypeScript and jQuery scope error - code 1 while compiling

Question

Does anyone know why the hell i can't use jQuery in my TypeScript code (tho it looks like noone else doesn't have that problem).

I've made a new TypeScript project in VS2012, included the jquery.d.ts, added a script tag pointing to jquery cdn in the main html file, and in the main app.ts file i've added "

///  <reference path="jquery.d.ts" />

at the top of the file and underneath a simple line "$("something").hide();". The intellisense worked fine, tho when I try to compile it I get an error with code 1. I checked it in the command window and it said "The name '$' does not exist in the current scope".

Does anyone know whats going on? Generally I have a very hard time splitting my code to different files, I had to write the whole app in one file. I tried to use modules, import and export but everything ends up in a scope error thrown by the compiler :/

Please save me

EDIT @Sohnee Its a default Typescript project from VS:

Structure:

app.css
app.ts
  --app.js
default.htm
jquery.d.ts

Modified files:

1) app.ts:

/// <reference path="jquery.d.ts" />

$("body").hide();

2) default.htm

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.8.0.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"/>
</body>
</html>

Fenton · Accepted Answer · 2012-11-05 08:49:28Z

1

Your reference looks incorrect.

/// <_reference path="jquery.d.ts" />"

Should be

/// <reference path="./jquery.d.ts" />

The only way I can recreate this issue is by making the reference path invalid.

For example, I get the same error as you in these situations:

Missing slash:

/// <reference path="jquery.d.ts">

Missing quote (or missing both quotes):

/// <reference path="jquery.d.ts />

Invalid path:

No code example for this one, but if you have jquery.d.ts in a different folder to your script, the path needs to be relative.

Works fine:

/// <reference path="./jquery.d.ts" />

edited Nov 5, 2012 at 8:49

answered Nov 4, 2012 at 19:45

Fenton

253k74 gold badges404 silver badges414 bronze badges

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

6 Comments

Maciej Andrzej Over a year ago

i couldnt write it that way - XSS protection on stackoverflow? how did you do it?

Maciej Andrzej Over a year ago

nvm got it :P anyway thats not the case

Fenton Over a year ago

If you precede the code block with 4 spaces it normally allows anything in the code block. What was the issue in the end?

Maciej Andrzej Over a year ago

Damn we got on a wrong track :D I meant "i got it" with the code block issue. The error thing is still not resolved.

Fenton Over a year ago

I have tested a ton of scenarios and listed the ones that can cause a problem in the answer. Also, check the contents of jquery.d.ts just to ensure that right at the bottom it has declare var $: JQueryStatic.

|

Rafay · Accepted Answer · 2012-11-05 11:42:08Z

0

How does the jquery.d.ts looks like?

it should be something like

interface JQuery {
hide();
}
interface JQueryStatic {
(query: string): JQuery; 
(ready: () => any): any;
}
declare var $: JQueryStatic;

now add it as a dependency inside the app.ts like (not a big fan of putting periods in the filenames so im going to call it custom.ts

/// <reference path="custom.ts" />
$(function(){$("body").hide();});

now build the solution if you have the web essentials installed it wil generate the custom.js and app.js for you

now run the project, hopefully you'll not see a thing because the body will be hidden.

for more information Read the TypeScript Lang Specs

answered Nov 5, 2012 at 11:42

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Collectives™ on Stack Overflow

TypeScript and jQuery scope error - code 1 while compiling

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related