D3.selection.prototype throws error using typescript and angular 2

Question

Therefore, I am using d3.js with typescript and angular2, and I am trying to extend the selection prototype property in ngOnInit (), for example:

import { Component, Input, Injectable } from '@angular/core';
import { Http, HTTP_BINDINGS, Response } from '@angular/http';
import { bootstrap } from 'angular2/platform/browser';
import { RouteParams } from '@angular/router-deprecated';
import { Router } from '@angular/router-deprecated';
import { Observable } from 'rxjs/Rx';
import 'rxjs/Rx';
import * as d3 from 'd3';

import { DataService } from './data.service';

@Component({
    selector: 'measure',

    templateUrl: 'app/new-container.html',
    styleUrls: ['app/new-container.css']
})

export class NewContainer {
    public measures;
    public dimensions;
    public dimensionsAlias;

    public id: string;

    constructor(private router: Router, private routeParams: RouteParams, private _dataService: DataService) {}

    ngOnInit() {
        if (this.routeParams.get('id') != null) {
            this.id = this.routeParams.get('id');
        }

        /* deleting previous svg canvas to make room for the new one */
        var s = d3.selectAll('svg');
        s.remove();

        d3.selection.prototype.moveToFront = function() {
            return this.each(function(){
                this.parentNode.appendChild(this);
            });
        }

        d3.selection.prototype.moveToBack = function() {
            return this.each(function() {
                var firstChild = this.parentNode.firstChild;
                if( firstChild ) {
                    this.parentNode.insertBefore(this, firstChild);
                }
            });
        }

        this.getAll();
    }

    /* gets data from json files */
    getAll() {
        this._dataService.getAll().subscribe(
            data => { 
                this.measures = data[0]; 
                this.dimensions = data[1];
                this.dimensionsAlias = data[2];
            },
            err => { 
                console.error(err); 
            },
            () => {
                /* this is where I draw everything and use the moveToFront 
                   and moveToBack properties on selections */
                this.draw(); 
            }
        );
    }

The problem is that typescript throws an error message:

error TS2339: Property 'moveToFront' does not exist on type 'Selection<any>'.

error TS2339: Property 'moveToBack' does not exist on type 'Selection<any>'.

These errors are thrown, but the prototype extension successfully adds the moveToFront and moveToBack properties to the selections because it does something like:

d3.select("#container").moveToFront();

works and moves this element to the fore. Thus, it works, but the error still rushes to where I extended the prototype and every time I call moveToFront.

Does anyone know how to fix this error? Thank.

Answer 1

Typescript - , , ( purejs lib). , d3.selection ( d.ts).

, , JS, . , , .

ts , , , .

ts ,

 d3.selection.prototype['moveToFront'] = function {} // may need cast protytype to any. 

Answer 2

. . , d3.select( "# container" ) . , , "sendToFront" .

.