Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

typescript: import jspm libraries

So most examples I found on importing jspm packages to typescript assumed that I wanted to use Systemjs to load and interpret them in the browser. However, I would rather like to use tsc to build commonjs modules and only import the js code, since it seems to me to be the more general and error-resistent approach to me.

So my directory structure looks like this:

src/index.ts
jspm_packages/...
config.js
tsconfig.json

With tsconfig having the following content:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "rootDir": "src",
    "outDir": "target/app",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": true
  },
  "exclude": [
    "jspm_packages",
    "node_modules",
    "typings",
    "target"
  ]
}

For testing purposes, I installed angular 2 with jspm install npm:angular2 and tried to import it in my index.ts via import { bootstrap } from 'angular2/platform/browser';

When running tsc, I get the error

src/index.ts(1,27): error TS2307: Cannot find module 'angular2/platform/browser'.

Now I wonder, can I make jspm-packages known to typescript? I feel like I tried it all, removing the jspm_packages from the tsconfig exclude list, switching to node module resolution or systemjs module generation. Maybe I just haven't found the right combination. Any hints on what to try next?

like image 351
rweng Avatar asked Mar 03 '16 17:03

rweng


People also ask

Can I use import in TypeScript?

With TypeScript 3.8, you can import a type using the import statement, or using import type .

How do I import a function in TypeScript?

To import a function from another file in TypeScript: Export the function from file A , e.g. export function sum() {} . Import the function in file B as import { sum } from './another-file' . Use the imported function in file B .

What is moduleResolution node?

Note: node module resolution is the most-commonly used in the TypeScript community and is recommended for most projects. If you are having resolution problems with import s and export s in TypeScript, try setting moduleResolution: "node" to see if it fixes the issue.

How do I create a TypeScript module?

A module can be created using the keyword export and a module can be used in another module using the keyword import . In TypeScript, files containing a top-level export or import are considered modules. For example, we can make the above files as modules as below. console.


1 Answers

I am also struggling with this same issue and after some research, I learned that there no good solutions to allow this as of yet.

Workarounds:

A) You can duplicate your dependencies and install it with npm. tsc should not throw any errors since its resolving from npm.

B) Change your tsconfig.json and map angular to the jspm path. For example

"baseUrl": ".",
"paths": {
     "angular2/*": [
        "jspm_packages/npm/[email protected]/*"
     ],
     "rxjs/*": [
        "jspm_packages/npm/[email protected]/*"
     ]
  }

See https://github.com/frankwallis/plugin-typescript/tree/master/examples/angular2 for a full example.

Note that "baseUrl" and "paths" are not official properties and only on the beta version of typescript compiler.

The issue is currently being tracked here: https://github.com/Microsoft/TypeScript/issues/6012

like image 98
skalidindi Avatar answered Sep 27 '22 20:09

skalidindi