Thursday, 23 July 2015

Installing underscore into angular and typescipt

I wanted to know how difficult it is to install underscore js library to project using typescript and angular js into my MVC Application

Turns out you need to download and install underscore.js (Read more about underscore)

using nuget search for "underscore.js"
After installation of this nuget package you will find in your packages.config line such as
<package id="underscore.js" version="1.8.2" targetFramework="net451" />

Note: 

This may differ based on version or framework but the important part is <package id="underscore.js"

Now we have installed underscore.
The directory where the package will be installed is /Scripts/

We need to add reference to our view

<script type="text/javascript" src="~/Scripts/underscore.min.js"></script>

So far this is standard way of using javascript.

Now I have created my typescript. I have named it index.ts

Now typescript does need definitions for it to recognise methods that library exposes and this is done in definition files. You can download definitions from Boris Yankov collection shared on github : https://github.com/borisyankov

File that you are looking for is named: underscore.d.ts

Put the file to same location where you have your underscore js file in my case or with all of your definitions.

Insert following path on top of your file.
/// <reference path="../../underscore.d.ts" />

Why is underscore path: "../../underscore.d.ts"?

it is because of my typescript lives in "/Scripts/App/Index/index.ts" which needs to go two directories up.

After this all we can go to your typescipt file and start using underscore in typescript