TypeScript: How to Include External JavaScript Frameworks to TypeScript Projects

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 over on google to find some help around it but don’t find any step by step tutorial to get it implemented.

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

1

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

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

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

2

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

For the sake of this demo I have added 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 dependency.

3

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

4

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 screen shots-

5

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

6

In type script 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 screen shot below

7

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-

8

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

9

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

10

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-

11

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

12

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

13

Once all the changes has 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.

14

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

Hope you find it helpful.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s