Use @types #954

Author: l-lin

demo/package.json

@@ -39,17 +39,19 @@
   "devDependencies": {
     "@angular/cli": "1.0.0-rc.1",
     "@angular/compiler-cli": "2.4.8",
+    "@types/datatables.net": "~1.10.1",
     "@types/jasmine": "2.5.38",
+    "@types/jquery": "^2.0.41",
     "@types/node": "~6.0.60",
     "codelyzer": "~2.0.0-beta.4",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.4.2",

demo/src/app/advanced/dt-instance-snippet.component.ts

@@ -44,12 +44,12 @@ import { DataTableDirective } from 'angular-datatables';
 })
 export class DtInstanceComponent implements OnInit {
   @ViewChild(DataTableDirective)
-  private datatableEl: DataTableDirective;
+  private datatableElement: DataTableDirective;
 
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
 
-  displayToConsole(): void {
-    this.datatableEl.dtInstance.then(dtInstance => console.log(dtInstance));
+  displayToConsole(datatableElement: DataTableDirective): void {
+    datatableElement.dtInstance.then((dtInstance: DataTables.Api) => console.log(dtInstance));
   }
 
   ngOnInit(): void {

demo/src/app/advanced/dt-instance.component.ts

@@ -10,10 +10,10 @@ export class DtInstanceComponent implements OnInit {
   @ViewChild(DataTableDirective)
   private datatableElement: DataTableDirective;
 
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
 
   displayToConsole(datatableElement: DataTableDirective): void {
-    datatableElement.dtInstance.then(dtInstance => console.log(dtInstance));
+    datatableElement.dtInstance.then((dtInstance: DataTables.Api) => console.log(dtInstance));
   }
 
   ngOnInit(): void {

demo/src/app/advanced/load-dt-options-with-promise-snippet.component.ts

@@ -36,7 +36,7 @@ import 'rxjs/add/operator/toPromise';
   templateUrl: 'load-dt-options-with-promise.component.html'
 })
 export class LoadDtOptionsWithPromiseComponent implements OnInit {
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
 
   constructor(@Inject(Http) private http: Http) {}
 

demo/src/app/advanced/load-dt-options-with-promise.component.ts

@@ -8,7 +8,7 @@ import 'rxjs/add/operator/toPromise';
   templateUrl: 'load-dt-options-with-promise.component.html'
 })
 export class LoadDtOptionsWithPromiseComponent implements OnInit {
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
 
   constructor( @Inject(Http) private http: Http) { }
 

demo/src/app/advanced/row-click-event-snippet.component.ts

@@ -27,15 +27,13 @@ export class RowClickEventSnippetComponent {
 <pre>
 <code class="typescript highlight">import { Component, NgZone, OnInit } from '@angular/core';
 
-declare var $: any;
-
 @Component({
   selector: 'row-click-event',
   templateUrl: 'row-click-event.component.html'
 })
 export class RowClickEventComponent implements OnInit {
-  message: string = '';
-  dtOptions: any = {};
+  message = '';
+  dtOptions: DataTables.Settings = {};
 
   constructor(private zone: NgZone) { }
 
@@ -56,15 +54,15 @@ export class RowClickEventComponent implements OnInit {
         title: 'Last name',
         data: 'lastName'
       }],
-      rowCallback: (nRow: number, aData: any, iDisplayIndex: number, iDisplayIndexFull: number) => {
-        let self = this;
+      rowCallback: (row: Node, data: any[] | Object, index: number) => {
+        const self = this;
         // Unbind first in order to avoid any duplicate handler
         // (see https://github.com/l-lin/angular-datatables/issues/87)
-        $('td', nRow).unbind('click');
-        $('td', nRow).bind('click', () => {
-          self.someClickHandler(aData);
+        $('td', row).unbind('click');
+        $('td', row).bind('click', () => {
+          self.someClickHandler(data);
         });
-        return nRow;
+        return row;
       }
     };
   }

demo/src/app/advanced/row-click-event.component.ts

@@ -1,14 +1,12 @@
 import { Component, NgZone, OnInit } from '@angular/core';
 
-declare var $: any;
-
 @Component({
   selector: 'app-row-click-event',
   templateUrl: 'row-click-event.component.html'
 })
 export class RowClickEventComponent implements OnInit {
   message = '';
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
 
   constructor(private zone: NgZone) { }
 
@@ -29,15 +27,15 @@ export class RowClickEventComponent implements OnInit {
         title: 'Last name',
         data: 'lastName'
       }],
-      rowCallback: (nRow: number, aData: any, iDisplayIndex: number, iDisplayIndexFull: number) => {
+      rowCallback: (row: Node, data: any[] | Object, index: number) => {
         const self = this;
         // Unbind first in order to avoid any duplicate handler
         // (see https://github.com/l-lin/angular-datatables/issues/87)
-        $('td', nRow).unbind('click');
-        $('td', nRow).bind('click', () => {
-          self.someClickHandler(aData);
+        $('td', row).unbind('click');
+        $('td', row).bind('click', () => {
+          self.someClickHandler(data);
         });
-        return nRow;
+        return row;
       }
     };
   }

demo/src/app/app.module.ts

@@ -5,7 +5,7 @@ import { HttpModule } from '@angular/http';
 
 import { HighlightJsModule, HighlightJsService } from 'angular2-highlight-js';
 
-import { DataTablesModule } from './angular-datatables';
+import { DataTablesModule } from 'angular-datatables';
 
 import { AppRoutingModule } from './app.routing';
 

demo/src/app/basic/angular-way-snippet.component.ts

@@ -54,7 +54,7 @@ class Person {
   templateUrl: 'angular-way.component.html'
 })
 export class AngularWayComponent implements OnInit {
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
   persons: Person[] = [];
   // We use this trigger because fetching the list of persons can be quite long,
   // thus we ensure the data is fetched before rendering

demo/src/app/basic/angular-way.component.ts

@@ -15,7 +15,7 @@ class Person {
   templateUrl: 'angular-way.component.html'
 })
 export class AngularWayComponent implements OnInit {
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
   persons: Person[] = [];
   // We use this trigger because fetching the list of persons can be quite long,
   // thus we ensure the data is fetched before rendering
@@ -25,8 +25,7 @@ export class AngularWayComponent implements OnInit {
 
   ngOnInit(): void {
     this.dtOptions = {
-      paginationType: 'full_numbers',
-      displayLength: 2
+      pagingType: 'full_numbers'
     };
     this.http.get('data/data.json')
       .map(this.extractData)

demo/src/app/basic/with-ajax-snippet.component.ts

@@ -33,7 +33,7 @@ export class WithAjaxSnippetComponent {
   templateUrl: 'with-ajax.component.html'
 })
 export class WithAjaxComponent implements OnInit {
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
 
   ngOnInit(): void {
     this.dtOptions = {

demo/src/app/basic/with-ajax.component.ts

@@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: 'with-ajax.component.html'
 })
 export class WithAjaxComponent implements OnInit {
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
 
   ngOnInit(): void {
     this.dtOptions = {

demo/src/app/basic/with-options-snippet.component.ts

@@ -99,15 +99,14 @@ export class WithOptionsSnippetComponent {
   templateUrl: 'with-options.component.html'
 })
 export class WithOptionsComponent implements OnInit {
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
 
   ngOnInit(): void {
     this.dtOptions = {
-      displayLength: 2,
-      paginationType: 'full_numbers'
+      pagingType: 'full_numbers'
     };
   }
-}</code>
+}/code>
 </pre>
   `;
 }

demo/src/app/basic/with-options.component.ts

@@ -5,12 +5,11 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: 'with-options.component.html'
 })
 export class WithOptionsComponent implements OnInit {
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
 
   ngOnInit(): void {
     this.dtOptions = {
-      displayLength: 2,
-      paginationType: 'full_numbers'
+      pagingType: 'full_numbers'
     };
   }
 }

demo/src/app/getting-started.component.ts

@@ -10,7 +10,9 @@ export class GettingStartedComponent {
 <code class="bash highlight">npm install jquery --save
 npm install datatables.net --save
 npm install datatables.net-dt --save
-npm install angular-datatables --save</code>
+npm install angular-datatables --save
+npm install @types/jquery --save-dev
+npm install @types/datatables.net --save-dev</code>
 </pre>`;
 
   angularCliJsonSnippet = `

package.json

@@ -44,7 +44,9 @@
   "devDependencies": {
     "@angular/compiler-cli": "~2.4.8",
     "@types/core-js": "~0.9.35",
-    "@types/jasmine": "2.5.40",
+    "@types/datatables.net": "~1.10.1",
+    "@types/jasmine": "~2.5.40",
+    "@types/jquery": "~2.0.41",
     "@types/node": "~6.0.46",
     "canonical-path": "0.0.2",
     "codelyzer": "~2.0.1",

src/angular-datatables.directive.ts

@@ -7,9 +7,6 @@
 
 import { Directive, ElementRef, Input, OnInit } from '@angular/core';
 import { Subject } from 'rxjs/Rx';
-import 'jquery';
-import 'datatables.net';
-declare var $: any;
 
 @Directive({
   selector: '[datatable]'
@@ -19,7 +16,7 @@ export class DataTableDirective implements OnInit {
    * The DataTable option you pass to configure your table.
    */
   @Input()
-  dtOptions: any = {};
+  dtOptions: DataTables.Settings = {};
 
   /**
    * This trigger is used if one wants to trigger manually the DT rendering
@@ -34,7 +31,7 @@ export class DataTableDirective implements OnInit {
    * It's possible to execute the [DataTables APIs](https://datatables.net/reference/api/) with
    * this variable.
    */
-  dtInstance: Promise<any>;
+  dtInstance: Promise<DataTables.Api>;
 
   constructor(private el: ElementRef) { }