I am a beginner in the world of Angular2 and Typescript. I am exploring ways to utilize an external JavaScript library smoothly: I am aware that I can use:
declare var somelibrary: any;
somelibrary.doAnything();
However, I would like to add some typing to it, so I came across the concept of *.d.ts files here.
So, I created a module called chart.d.ts:
export declare class Chart {
constructor (ctx: any);
Doughnut(data: any, options: any): Function;
}
(I also tried this approach:)
export declare module 'chart' {
export class Chart {
constructor (ctx: any);
Doughnut(data: any, options: any): Function;
}
}
and referenced it using various methods:
// version 1
import chartFactory = require('../chart');
// version 2
import { Chart } from '../chart';
and implemented its usage as follows:
// 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 is successful, but during runtime, SystemJS attempts to load the javascript implementation of my definition by searching for 'path/to/chart.js' (which obviously doesn't exist since the original library was imported through a script tag).
The SystemJS configuration is similar to the one provided in the 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"
]
}
Any suggestions with explanations on how to resolve this issue?
I believe the problem lies within the setting "module": "system", but the real question is: How can I create internal d.ts without conflicting with SystemJS resolution?