How to install and run typescript jquery / bootstrap definition file locally using npm typings?

0
votes

What I am trying to do, installing typescript jquery and boostrap definition file in my new project using npm typings.

Below is the steps which I followed.

1- open cmd and goto my currrent project folder and type following commands.

npm install typings --global

typings init

typings install dt~jquery --global --save

typings install dt~boostrap --global --save

2- below is my tsconfig file configuration { "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": true, "rootDir": "./TS", "outDir": "./JS", "watch": true } }

Note: I created separate folder for TS file and JS file. So when typescript transpile, it create javascript file in JS directory.

3- Add document.ready function in ts file and write alert when page load

4- Build and run index.html file

Note: I add transpile javascript in head section so there is no need to mention here any code.

Error: In browser console window its shows me below error:

myscript.ts:2 Uncaught ReferenceError: $ is not defined

Here is my repository.

Please help me here. What I am doing wrong to installing jquery in my project.

1
jquerytypescripttwitter-bootstrap-3npmtypescript-typings

1 Answers

2
votes

As far as I can see from your rep - you have forgot to load the actual bootstrap and jquery in your page. The typescript definitions only provide compiletime information for the typescript transpiler about content of thouse libraries. The libraries them self must be loaded in your index.html. You can do it in two ways:

  1. Add a links to the bootstrap and jquery as described in their how to guides. This is simple although not the preferred way to go in the modern world of module based client side applications
  2. Use module loader (like SystemJS). This will require some configuration though. Start by reading their docs, sample config you can find here

Hope this will help you to get started.