typescript1.8 - How to correctly add .js libraries to my application so that I can import them in TypeScript modules -

before learned little bit of how typescript modules work if wanted use js library jquery add script tag referencing library, i'm using typescript find examples :

import * $ 'jquery' 

but jquery not typescript module, how work? how should add external non-typescript library modules?

edit #1

---

tsconfig.json

explicitly telling typescript use amd format (i chose 1 on commonjs because read since amd loads modules asynchronously, more appropriate web applications)

{   "compileroptions": {     "sourcemap": false,     "target": "es5",     "module": "amd",     "outdir": "scripts"   },   "exclude": [     "node_modules",     "wwwroot"   ] } 

to install type definitions use typings

typings install dt~jquery --global --save 

having mentioned i'm using, don't understand how requirejs able find third-party libraries when i'm specifying file load (in case app.js) after require.js loads

<script data-main="scripts/app/app" src="scripts/require.js"></script>   

i tried adding script tag jquery.js file before , after script tag require.js didn't work. how suppose tell require.js "look need x file, go , load me"?

i'm asking because if understood correctly purpose of type definitions, exist give type checking , nothing more, still need add actual library want use.

---

edit #2

so in end ended doing:

i) according page http://requirejs.org/docs/api.html#data-main, data-main intended use when page has 1 main entry point , fail when require other js files, following configuration should used instead:

<script src="~/scripts/require.js"></script> <script>         require.config({             paths: {                 "lodash": "scripts/lodash"             }         });         require(["scripts/app/js/app"]); </script> 

here i'm explicitly telling require.js find source code library want use, in case lodash.js. once path mapping done, instruct require load app.js

ii) app.ts

   /// <reference path="../../typings/index.d.ts" />     import * _ "lodash";     console.log('using lodash: ' + _.snakecase("for whom bells toll"); 

for type definition work have include reference tag

and that's it.

to test if working, have use check console , see works expected:

one thing still not clear me how magic works behind scenes, taking @ js code generated app.js, guess third dependence "lodash" looked among paths specified in require.config

define(["require", "exports", "lodash"], function (require, exports, _) {     "use strict";     console.log('using lodash: ' + _.snakecase("for whom bells toll")); }); 

oh, , 1 last thing, if don't want have include reference tag in ts files whenever need use d.ts file, can add path index.d.ts in tsconfig.json file this:

{   "compileroptions": {     "sourcemap": false,     "target": "es5",     "module": "amd",     "outdir": "js"   },   "include": [     "src/**/*.ts",     "../typings/index.d.ts"   ]  } 

first, i'll point out typescript doesn't force use jquery module. technically use global.

you're right jquery not written typescript module. there 2 things take away:

1. jquery written in format can consumed in module systems commonjs, amd/require.js, , others. because typescript overlays es6 modules abstract away these systems, makes easier use.
2. libraries not written in typescript can described using typescript declaration files (also called .d.ts files). these files tell typescript javascript code exists, can better tooling , error detection.

(2) applies if don't decide use modules. combination, can use typescript consume jquery way specified.

first, let's declaration files jquery:

npm install -s @types/jquery 

off bat, should able reference jquery in typescript. if not, add "jquery" "types" field in tsconfig.json follows:

{     "compileroptions": {         "types": ["jquery"]     } } 

at point, long file doesn't use imports/exports, can use jquery same way you've used it.

if this, make sure still use <script> tag in html jquery.

---

now, can still decide use modules - in case, becomes more involved, , you'll need choose module system want use.

in general, considered best practice use modules in new javascript, can feel little overwhelming. not problem typescript how practices in ecosystem have surfaced around modules.

---

if using webpack or browserify, add "module": "commonjs" compiler options in tsconfig.json. can write

npm install -s jquery 

and webpack ts-loader take care of rest. see our guide here how webpack can set up. note in linked setup, you'll still need use <script> tags libraries decide add externals field.

---

if using require.js, add "module": "amd" compiler options in tsconfig.json. require.js requires bit of configuration going, have a guide here uses amd modules.

you'll have let require.js know import jquery should redirected so:

this can go in own .ts file called require-config.ts

declare var require: any; require.config({     paths: {         "jquery": "scripts/externals/jquery-3.1.1",     } }); 

and can add appropriate script tags page:

    <script src="./scripts/externals/require.js"></script>     <script src="./scripts/app/require-config.js"></script>     <script>         require(["scripts/app/app"]);     </script>