SharePoint Framework Typescript typings

Question

I am trying to get familiar with typescript and working with the SharePoint framework. Following a couple of tutorials, I decided to first see how to include external libraries such as jQuery or even SharePoint JSOM scripts. I was able to do that just fine for jQuery using:

npm install jquery --save

The next step was to install the typings which I did using npm install @types/jquery --save-dev

However, as soon as I had installed the typings and ran gulp serve, it threw all sorts of errors related to the typings. When I deleted the jquery from under @types from visual studio, the code started to work fine again. Can some please help me out what I am doing wrong?

The code that I had used without installing the types was within the render function as follows

       jQuery(document).ready(function() {
         alert("test");
       }

The same code, I believe started to throw errors with the typings. I am assuming it is because when I had installed the typings, the compiler (or whatever it is called because it is not technically a compiler or is it??) was expecting proper typescript syntax.

I would be very grateful if someone can clarify this for me in very simple terms. I have searched all over the internet but there is just too much wealth of information out there for me to sort out as a beginner with so many things to learn (spframework, typescript, AMD versus non module scripts, spframework modules, etc. etc.)

Thanks again.

Answer 1

The latest version of the jQuery typings rely on TypeScript 2.3 whereas the version included in SPFx is 2.2.2 and this is causing an issue:

The way to solve this is to use a version of the typings compatible with the version of Typescript being used. Remove the jQuery typings then install a specific version.

I used 2.0.48 and targeted jQuery 2.2.4 (https://code.jquery.com/jquery-2.2.4.min.js):

npm install @types/jquery@2.0.48 --save-dev

Afterwards, I removed the ^ from the version number in my package.json to ensure that that version is the one used if I needed to do npm install again. This fixed all the crazy typings errors during gulp serve and allowed me to use jQuery as expected.

Answer 2

Adding external libraries with a CDN (such as jQuery) to an SPFx project can be broken down into a few parts:

1. Saving the types (for jQuery navigate to the folder through cmd, then put npm install --save @types/jquery)
2. Adding an entry in the 'externals' section of the config.json ("jquery": "https://code.jquery.com/jquery-3.1.0.min.js")
3. Importing the library. For jQuery, this would be done by adding import * as $ from 'jquery';

Once done, you should be able to use jQuery in the normal way (using $). I'd test it by just having a simple input with id="test" and just going alert($(#test).val());

If you are still having issues and this is an older project, I'd advise ensuring that your version of everything (TypeScript, Yeoman etc.) is all up to date. Once done, try scaffolding out a new project to see whether you have issues there - A lot of my older projects (late 2016) weren't too happy when GA hit, but that's to be expected.