I have a project using JSPM. I'm using FoundationJS which in turn requires JQuery.
I was importing JQuery like this:
import jQuery from 'jquery';
and then using it like this:
jQuery(document).foundation();
and all was good - JQuery was being imported from JSPM.
However I then decided to switch to using TypeScript.
TypeScript is coming up with the error '
cannot find module 'jquery'
How can I import this JSPM module in TypeScript? I'm also using SystemJS... but I'm not sure if that helps!
When using javascript libraries like jQuery and FoundationJS in typescript, you only have to provide enough information for typescript to typecheck your code.
This is usually done by including type declarations for javascript libraries together with your source files to be compiled by typescript.
For typescript 2.0, you can find type declarations for jQuery and FoundationJS under @types npm prefix:
npm install @types/foundation
will install declarations for FoundationJS and its dependency, jQuery, in node_modules/@types where typescript compiler will find it automatically.
But the way these declarations are written is incompatible with the way you are importing jQuery. It looks like you have to change your import to use typescript-specific syntax compatible with pre-es6 modules:
import jQuery = require('jquery');
Then it compiles. Then you might have to choose proper module format (look for --module in compiler options). Typescript produces CommonJS by default, which should not be a problem for SystemJS (using es6 module format is precluded by import ... = require syntax).
Another possible issue might be that declarations coming from @types are for a different version of jQuery or FoundationJS which is incompatible with the actual version that you use at run time - then you have to find correct declarations somewhere else or write your own.