How To Include External JavaScript Frameworks To TypeScript Projects

Introduction

While working in Typescript Projects I found it tricky to include external JavaScript Frameworks like JQuery.js, Moment.js and so on.

I tried to look on Google to find some help around it but didn’t find any step by step tutorial to get it implemented.

The purpose of this blog post is to help Typescript newbies with projects involving external JavaScript Frameworks.

Note

I am using Visual Studio 2015 as a development IDE and these steps are specific to Visual Studio only.

In order to start with this demo, first, we will create an “HTML Application with Typescript” project using Visual Studio Typescript Template.

Enter “Project Name, Location and Solution Name” as required and click OK.

Once the Project has been created successfully we can add the required typescript code in the “App.ts” file while HTML elements in the “index.html” file.

For the sake of this demo, I have added a simple code that requires JQuery.js.

In the index.html file we can see JQuery code construct as “$(document).ready ()”, which requires “JQuery.js” as a dependency.

In the “App.ts” file I have added “$(#content).append()” which requires JQuery to be included in the typescript.

Now let’s try to run this project by pressing “F5” and see what we get.

And Boom. We get this error since we don’t have JQuery file included in this project as shown in the following screenshots-

We can further see the error message generated by the runtime as below,

In typescript projects that required external JavaScript Frameworks, we need to first install the Type Definition for the respective framework.

For example, in this demo, since we need to include JQuery to the project so what we need to first install Type Definition for JQuery.

We can install JQuery Type Definition by using “NuGet Package Manager” from the “Tools” menu as shown in the screenshot below:

Once the Package Manager launches, search for “jQuery for SharePoint”.

Search results will show you “jquery.TypeScript.DefinitelyTyped” which needs to be installed for this project.

Select the Project and click “Install” to install the type definitions as shown below,

Click “OK”, when asked to proceed with modifications to the project as shown below,

This will install the type definitions for this project and that we can see in the output window as shown below,

Once type definition has been installed we can see a new folder structure in the solution explorer which will be having new definition file for JQuery “jquery.d.ts” as shown below,

Next Step is to include the reference of type definition in the code files (*.ts) like shown below,

Add /// <reference path=”scripts/typings/jquery/jquery.d.ts” /> at the top of (*.ts) files

Now in the HTML files, wherever you need to consume JQuery Framework add the reference of JQuery file as we usually do in normal web application projects

Add <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> to the HTML files

Once all the changes have been made to the code files, let’s run the project again using “F5” and this time we can see it through without any errors.

Though this demo talks about including JQuery this holds true for other JavaScript Frameworks.

Hope you find it helpful.