TypeScript: How To Include External JavaScript Frameworks To TypeScript Projects
While working in Typescript Projects we found it tricky to include external JavaScript Frameworks like JQuery.js, Moment.js and so on.
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 help Typescript newbies with projects involving external JavaScript Frameworks.
https://howtodowithsharepoint.files.wordpress.com/2017/05/11.png?w=800
Note: 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.
https://howtodowithsharepoint.files.wordpress.com/2017/05/21.png?w=800
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 we 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.
https://howtodowithsharepoint.files.wordpress.com/2017/05/31.png?w=800
In “App.ts” file have added “$(#content).append()” which requires jQuery to be included into the typescript.
https://howtodowithsharepoint.files.wordpress.com/2017/05/41.png?w=800
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:
https://howtodowithsharepoint.files.wordpress.com/2017/05/51.png?w=800
We can further see the error message generated by runtime as below:
https://howtodowithsharepoint.files.wordpress.com/2017/05/61.png?w=800
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.
https://howtodowithsharepoint.files.wordpress.com/2017/05/71.png?w=800
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:
https://howtodowithsharepoint.files.wordpress.com/2017/05/8.png?w=800
Click “OK” when asked to proceed with modifications to the project as shown below:
https://howtodowithsharepoint.files.wordpress.com/2017/05/9.png?w=800
This will install the type definitions for this project and that we can see in the output window as shown below:
https://howtodowithsharepoint.files.wordpress.com/2017/05/10.png?w=800
Once type definition has been installed we can see a new folder structure in the solution explorer which will have new definition file for jQuery “jquery.d.ts” as shown below:
https://howtodowithsharepoint.files.wordpress.com/2017/05/111.png?w=800
Next step is to include the reference of type definition in the code files (*.ts) as shown below:
Add /// <reference path=”scripts/typings/jquery/jquery.d.ts” /> at the top of (*.ts) files.
https://howtodowithsharepoint.files.wordpress.com/2017/05/12.png?w=800
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.
https://howtodowithsharepoint.files.wordpress.com/2017/05/13.png?w=800
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.
https://howtodowithsharepoint.files.wordpress.com/2017/05/14.png?w=800
Though this demo talks about including jQuery this holds true for other JavaScript frameworks.
Hope you find it helpful.