SystemJS Configuration For TypeScript Export Declaration Of External Javascript Library

Viewed 818

I'm very new to Angular2 and Typescript. I want to find a way to gracefully use external js library: I know, i can use:

declare var somelibrary: any;
somelibrary.doAnithing();

But I want to have some typization, so i read here for the use of *.d.ts

So i create a module chart.d.ts :

export declare class Chart {
    constructor (ctx: any);

    Doughnut(data: any, options: any): Function;
}

(I try also:)

export declare module 'chart' {
    export class Chart {
        constructor (ctx: any);

        Doughnut(data: any, options: any): Function;
    }
}

and reference it, trying many ways:

// version 1
import chartFactory = require('../chart');
// version2
import { Chart } from '../chart';

and use it:

// version 1 usage    
new  chartFactory.Chart(ctx).Doughnut(this.chart1, {responsive : true});

or for the second import:

// version 2 usage
new  Chart(ctx).Doughnut(this.chart1, {responsive : true});

The compilation succeds, but on runtime SystemJS try to load the js implementation of my definition searching 'path/to/chart.js' (obviusly there isn't any chart.js, the original library is imported with script tag).

The configuration of SystemJS is the same as angular tutorial:

System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});

the tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Some suggestions with explaination?

I think the cause of the failed loockup is "module": "system" but the question is: How to do internal d.ts without conflicting with SystemJS resolution?

2 Answers
Related