title: How to correctly add .js libraries to my application so that I can import them in TypeScript modules
body: <p>Before I learned a little bit of how TypeScript modules work if I wanted to use a js library like jQuery I would simply add a <code>script</code> tag referencing that library, but now that I'm using TypeScript I often find examples like this :</p>
  
  <pre><code>import * as $ from 'jquery'
  </code></pre>
  
  <p>But jQuery is not TypeScript module, so how does this work? How should I add a external non-typescript library to my modules?</p>
  
  <h1>EDIT #1</h1>
  
  <hr>
  
  <p><strong>tsconfig.json</strong></p>
  
  <p>Explicitly telling typescript to use the AMD format (I chose this one over <code>commonjs</code> because I read that since AMD loads modules asynchronously, it is more appropriate for web applications)</p>
  
  <pre><code>{
    "compilerOptions": {
      "sourceMap": false,
      "target": "es5",
      "module": "amd",
      "outDir": "Scripts"
    },
    "exclude": [
      "node_modules",
      "wwwroot"
    ]
  }
  </code></pre>
  
  <p>To install the type definitions I use <strong>typings</strong> </p>
  
  <pre><code>typings install dt~jquery --global --save
  </code></pre>
  
  <p>Having mentioned what I'm actually using, what I don't understand is how RequireJs is able to find third-party libraries when I'm only specifying which file to load (in this case app.js) after <code>require.js</code> loads</p>
  
  <pre><code>&lt;script data-main="Scripts/app/app" src="Scripts/require.js"&gt;&lt;/script&gt;  
  </code></pre>
  
  <p>I tried adding a script tag for the <code>jquery.js</code> file before and after the script tag for <code>require.js</code> but it didn't work. So how am I suppose to tell <code>require.js</code> "look I need this x file, go and load it for me"? </p>
  
  <p>I'm asking this because if I understood correctly the purpose of type definitions, they only exist to give us type checking and nothing more, we still need to add the actual library we want to use.</p>
  
  <hr>
  
  <h1>Edit #2</h1>
  
  <p>So in the end this is what I ended up doing:</p>
  
  <p>I) According to this page <a href="http://requirejs.org/docs/api.html#data-main" rel="nofollow noreferrer">http://requirejs.org/docs/api.html#data-main</a>, <code>data-main</code> is only intended for use when the page just has one main entry point and it will fail when you require other js files, so the following configuration should be used instead:</p>
  
  <pre><code>&lt;script src="~/Scripts/require.js"&gt;&lt;/script&gt;
  &lt;script&gt;
          require.config({
              paths: {
                  "lodash": "Scripts/lodash"
              }
          });
          require(["Scripts/app/js/app"]);
  &lt;/script&gt;
  </code></pre>
  
  <p>Here I'm explicitly telling require.js where to find the source code for the library that I want to use, in this case <code>lodash.js</code>. Only once all the path mapping is done, I instruct require to load <code>app.js</code></p>
  
  <p>II) <strong>app.ts</strong> </p>
  
  <pre><code>   /// &lt;reference path="../../typings/index.d.ts" /&gt;
      import * as _ from "lodash";
      console.log('Using Lodash: ' + _.snakeCase("For Whom the Bells Toll");
  </code></pre>
  
  <p>For the type definition to work properly you have to include a <code>reference</code> tag</p>
  
  <p>And that's it.</p>
  
  <p>To test if everything is working, all I have to use is to check the console and see that everything works as expected:</p>
  
  <p><a href="https://i.stack.imgur.com/v5gXy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v5gXy.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/4cLmT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4cLmT.jpg" alt="enter image description here"></a></p>
  
  <p>One thing that is still not very clear to me is how all the magic works behind the scenes, but taking a look at the js code that is generated for app.js, I guess that the third dependence <strong>"lodash"</strong> is looked for among all the paths specified in <code>require.config</code></p>
  
  <pre><code>define(["require", "exports", "lodash"], function (require, exports, _) {
      "use strict";
      console.log('Using Lodash: ' + _.snakeCase("For Whom the Bells Toll"));
  });
  </code></pre>
  
  <p>Oh, and one last thing, if you don't want to have to include a <code>reference</code> tag in your ts files whenever you need to use a <code>d.ts</code> file, you can add the path to your <code>index.d.ts</code> in the <code>tsconfig.json</code> file like this:</p>
  
  <pre><code>{
    "compilerOptions": {
      "sourceMap": false,
      "target": "es5",
      "module": "amd",
      "outDir": "js"
    },
    "include": [
      "src/**/*.ts",
      "../typings/index.d.ts"
    ] 
  }
  </code></pre>