5

I'm getting this error trying a simple jQuery sample with Typescript:

"tsc.js(23915, 17) Microsoft JScript runtime error: '$' is undefined"

My entire .ts file:

/// <reference path="scripts/jquery-1.8.d.ts" />

$(document).ready(function () {});

The jquery-1.8.d.ts is from DefinitelyTyped, but I get the same error if I use the standard jquery.d.ts. I'm not getting any errors on the reference tag, it's correct and is finding the .d.ts file.

I'm obviously missing something basic here, I can't figure out why I'm getting this error. I've got the VS 2012 extension installed and am getting full autocomplete on jQuery... so when I type '$' I do get autcomplete popups. The generated .js file is correct, nothing wrong there. A much more complex .ts file is compiling correctly and the output .js file is perfectly fine, so this is more of an annoyance than an error, I suppose. Or am I missing other errors because of this runtime error??

I'm compiling by adding an "External Tool" in VS with command: C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.1.1\tsc.exe arguments: -e "$(ItemPath)" --sourcemap

Eric Sassaman
  • 1,401
  • 1
  • 18
  • 23
  • Hm, I just discovered that if I wrap the jQuery call in a function in my .ts file, I don't get this error. So for example, function t(){$("#somediv").click()} doesn't cause an error. – Eric Sassaman Dec 12 '12 at 19:23

4 Answers4

3

I believe the issue is with the command that you are using itself, or at least one of the options you are passing in. "-e" tells the compiler to "Execute the script after compilation". So what you see, "Microsoft JScript runtime error: '$' is undefined", is not a compile error, but rather a runtime error that is showing up after the file is compiled and is in the process of being executed.

Hope that helps!

Alex Klock
  • 1,526
  • 12
  • 14
  • Aha! Yep that was it. Thank you very much. Just goes to show you should really understand what you are copying and pasting from someone else :) – Eric Sassaman Dec 15 '12 at 20:27
2

You need to include the real jquery.js in your HTML file, e.g.:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="myApp.js"></script>
Ryan Cavanaugh
  • 209,514
  • 56
  • 272
  • 235
  • I don't get it, what does some .html/.aspx file have to do with my .ts file? They are not connected, other than there is indeed an .aspx file that is including the resulting .js output of the typescript complier, but that has nothing to do with errors from the typescript compiler itself, right? The .aspx file does indeed include jQuery and works perfectly fine, so there are no problems with any other files here. – Eric Sassaman Dec 12 '12 at 19:18
  • Not OP but I had the same problem, this solution fixed it for me – thnkwthprtls Aug 05 '15 at 14:04
0

-- Deleted my original answer..

Where exactly do you get the error : "tsc.js(23915, 17) Microsoft JScript runtime error: '$' is undefined" ?

Also in this topic is a great outline of how to get the compiler to compile your .ts files on build : http://typescript.codeplex.com/discussions/403394 After that you can keep the build action of your .ts files on "TypeScriptCompile"

BreeeZe
  • 86
  • 1
  • 3
  • The error shows up in the VS output window after doing the custom command from the Tools menu as per my question. Same error from the command line, of course. – Eric Sassaman Dec 14 '12 at 01:45
  • Thanks for the tip there, but it was added to the solution as a website, not a project, since there's no project file I won't be able to make things quite that simple for myself :\ – Eric Sassaman Dec 14 '12 at 01:48
  • Hmm.. well I have no other tips on how to fix your original problem, but you could also try the "Web Essentials 2012" plugin for visual studio : http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6 It add some nice features for TypeScript and also compiles your .ts files on save. – BreeeZe Dec 14 '12 at 09:37
  • FYI I am using the wonderful "Bundle Transformer: TypeScript" nuget package from Andrey Taritsyn which makes life so much simpler (at least when using bundling!). – Eric Sassaman Mar 16 '13 at 22:31
0

Didn't know we should not duplicate the answer... I have changed a little bit for my old answer. Ok, My solution is:

I am using VS 2015, and I am new to typescript.I used jQuery and leaflet in my project.

  1. Download all these libraies from NuGet manager in VS 2015. enter image description here

  2. Drag the library files (.js) as instructed in this tutorial:

https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/

  1. Modify the index.html file by adding these lines.

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/leaflet.css" />

<script src="scripts/jquery-2.2.3.min.js"></script>
<script src="scripts/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/leaflet-0.7.3.min.js"></script>

  2. Modify the index.ts file. First add these lines on top to reference your libraries. You may need to change the path.

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

  1. Add your own code within onDeviceReady(), otherwise you might get javascript runtime error, like sysmbol "$" is undefined. I guess this is because the codes try to load some function when the device is not ready yet. This has worked for me. Hope it would help you too.

        function onDeviceReady() {

    document.addEventListener('pause', onPause, false);
    document.addEventListener('resume', onResume, false);


    var parentElement = document.getElementById('deviceready');
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');
    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    // your code goes in here

    }
Luo Lei
  • 141
  • 1
  • 3