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?