Typescript definitions for Reporting

[Walter]

Hi,

 I was wondering if there were any typescript definition files for the reporting js framework, and if so, where I could find them?

 Thanks,

[Nasko]

Hello Walter,

We do not provide typescript definition files for Telerik Reporting.
The available approaches to implement Reporting are described in the Using Telerik Reporting in Applications help articles.

Regards,
Nasko
Telerik

[nick]

Three years later and this still seems to be the case. Are there any near term plans for TypeScript / Webpack support for the Html5 Report Viewer? Right now, I'm having to workaround the lack of typing for 'telerikReportViewer'.

[Nasko]

Hello Nick,

What is the type of application you are using when embedding the HTML5 viewer? Also, what kind of workaround is needed for the lack of typing? Do you create mock d.ts files or use another approach?

Regards,
Nasko
Progress Telerik

[nick]

@Nasko

Just a client-side JS / Typescript application built with Webpack...

Workaround due to 'cannot find name 'telerikReportViewer' TS error:

// k.d.ts

declare var telerikReportViewer: any;

// app.ts

(<any>$("#reportViewer1")).telerik_ReportViewer({

  serviceUrl: apiDataset.reportapi,
reportSource: {
  report: "SampleReport.trdp"

},

viewMode: telerikReportViewer.ViewModes.INTERACTIVE,           

scaleMode: telerikReportViewer.ScaleModes.FIT_PAGE_WIDTH,

scale: 1.0,
enableAccessibility: false,
ready: function() {
//this.refreshReport();
}
});

[Nasko]

Hi Nick,

I'm not sure if this will help in your scenario, but you can find attached the d.ts file that is used internally for the Angular Report Viewer. You can get the package and take a look at its internal scripts from here.

Regards,
Nasko
Progress Telerik

[Marcus]

What about a react d.ts file that doesn't require Angular? Also what are the types for the viewer ref? I see things like `viewer.commands` but I dont see any types for any object with commands on it or with the `refreshReport`

[Dimitar]

The React Report Viewer also has types for it(see in \node_modules\@progress\telerik-react-report-viewer\dist\dependencies) but there are some problems with it currently, one being that the commands are not defined. 

For the current time, when used in a TypeScript project, one has to use @ts-ignore to use the react report viewer - React Report Viewer throws error ts7016 on importing it in a TypeScript project (telerik.com).

With that being said, we have been working on re-writing the report viewer in TypeScript, the pure HTML5 viewer that the angular and react viewers are currently based on, and we hope to be able to release it soon which should also fix the issues with the react and angular viewers.

[Bharat]

I am facing the same issue. I am using it in react-typescript project.

I have to use type "any"(but i don't want to use any) for jquery selector to make it run.

($("#reportViewer1") as any).telerik_ReportViewer({
....
});

 

 

 

[Silviya]

Hi Bharat,

I'm not completely sure about the scenario you have and I'm not an expert in typescript, but I have an assumption that you want to use the viewer as TelerikReportViewerComponent type instead of any type.

You might refer to this code snippet from out Localization article:

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { TelerikReportViewerComponent } from '@progress/telerik-angular-report-viewer';
import { StringResources } from './stringResources';
...

export class AppComponent implements AfterViewInit {
  @ViewChild('viewer1') viewer: TelerikReportViewerComponent;

  ngAfterViewInit(): void {
    const language = navigator.language;
    let resources = StringResources.english; // default

    if(language === 'ja-JP'){
      resources = StringResources.japanese;
    }

    this.viewer.viewerObject.stringResources = Object.assign(this.viewer.viewerObject.stringResources, resources);
  }
}

Please let us know if this helps and it not, please elaborate more on the scenario you have. We would appreciate if you open a new support ticket and attach the application to investigate further.

Best Regards,
Silviya
Progress Telerik

[Bharat]

 

I have created my own types by reading all the properties from document. I have created types for each and every property and used it. But I think you should provide the typings so users do not need to create it their selves. 

   /**
    * The Telerik HTML5 Report Viewer is a jQuery plugin - jQuery.fn.telerik_ReportViewer(options).
    */
   export default interface ITelerikReportViewerOptions {
       /**
        * Sets the unique identifier of the ReportViewer instance.
        * If not specified, the id of the target HTML element will be used (if such is set).
        * The id of the ReportViewer is used to identify the client session of the viewer
        * when persistSession is enabled (true)
        */
       id?: string;

       /**
        * Sets the address of the html page that contains the viewer templates.
        * If omitted, the default template will be downloaded from the REST service.
        */
       trvTemplateUrl?: string;
       /*
        ......... and so on...
       */
   }

   export default interface IReportViewer<T> extends JQuery<T> {
       telerik_ReportViewer: (options: ITelerikReportViewerOptions) => void;
   }
//////////////////////////////

[Bharat]

I used it in React component,

01.export default class ReportViewerComponent extends React.PureComponent<IReportViewerProps> {
02.    public render(): JSX.Element {
03.        return (
04.            <div id="reportViewer" style={{ height: "100vh" }} />
05.        );
06.    }
07.
08.    public componentDidMount(): void {
09.        const reportViewer1: IReportViewer<HTMLDivElement> =
10.                       $("#reportViewer") as IReportViewer<HTMLDivElement>;
11.        reportViewer1.telerik_ReportViewer({
12.            serviceUrl: "https://demos.telerik.com/reporting/api/reports/",
13.            reportSource: { report: this.props.report },
14.            viewMode: TelrikOptions.ViewMode.INTERACTIVE,
15.            sendEmail: { enabled: true },
16.        });
17.    }
18.}

[Bharat]

I used it in React like,

01.export default class ReportViewerComponent extends React.PureComponent<IReportViewerProps> {
02.    public render(): JSX.Element {
03.        return (
04.            <div id="reportViewer" style={{ height: "100vh" }} />
05.        );
06.    }
07.
08.    public componentDidMount(): void {
09.        const reportViewer1: IReportViewer<HTMLDivElement> =
10.                   $("#reportViewer") as IReportViewer<HTMLDivElement>;
11.        reportViewer1.telerik_ReportViewer({
12.            serviceUrl: "https://demos.telerik.com/reporting/api/reports/",
13.            reportSource: { report: this.props.report },
14.            viewMode: TelrikOptions.ViewMode.INTERACTIVE,
15.            sendEmail: { enabled: true },
16.        });
17.    }
18.}

[Silviya]

Hello Bharat,

Indeed, this is a valid feature request and it was already logged and approved in our Feedback and Ideas portal. You might vote for it to raise its priority: TypeScript definitions for the HTML5 Viewer Report. In future versions of our product we consider for implementation the most demanded features, so if it has more votes, we'll move it up in our implementation list.

Regards,
Silviya
Progress Telerik

[Rick]

Hi Bharat,

Any interest in sharing your d.ts file for the report viewer?

Thanks.