Integrating Fusion chart in typescript

Question

I am changing My SPA application from Javascript to typeScript. In this project I have used Fusionchart JQuery plugin. Now I have to integrate FusionChart in this type Script project. i have Added jquery.d.ts in my project but not able to figure out how can I use that to integrate.

Is there any way to that?

Answer 1

Firstly thanks to all.

I have done as follows:

I declared a class Names FusionChart in a separate ts file as follows:

declare class FusionCharts  {

    constructor(ChartType: string, ChartName: string, height: string, width: string);

    constructor(ChartType: string, ChartName: string, height: string, width: string, other: string);

    public setXMLData(ChartValues: string): any;

    public render(renderId: string): any;
    public static setCurrentRenderer(renderName: string): any;
}

after that I used the constructor of this class in my ViewModel backend .ts file as follows:

1. I added the reference of the FusionChart class.
2. Created he fusion chart object.
3. In compositionComplete I set the CurrentRenedrer to JavaScript(optional) and used the render method.

My code is as follows:

export class FinancialView 
{
   public column3DChart: FusionCharts;

   constructor() {
     this.column3DChart = new FusionCharts("Column3D", "myChartId", "300", "200");
     this.column3DChart.setXMLData("XML data");
    }
    compositionComplete() {
       FusionCharts.setCurrentRenderer('javascript');
       this.column3DChart.render("chartdivId");
    }
}

Answer 2

There are two ways in which you can get and use TypeScript.

1. MSI package for Microsoft Visual Studio 2012.
2. Command-line TypeScript compiler can be installed as a Node.js package.

Simply put TypeScript compiles all .ts files to .js files. It doesn't matter even if .ts files contain only JavaScript and no TypeScript at all, as it is a superset to JavaScript.

So just rename your JavaScript files to .ts and your app will work as it should. The added benefit is that you can use the power of TypeScript.