Question

所以我正在使用带有typescript和angular2的d3.js，我正在尝试在ngOnInit（）中扩展选择的prototype属性，如：

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(); 
            }
        );
    }

问题是打字稿会抛出错误说：

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

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

正在抛出这些错误，但是成功扩展原型会将moveToFront和moveToBack属性添加到选择中，因为执行以下操作：

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

工作并将该元素移到前面。所以它可以工作，但是在我扩展原型并且每次调用moveToFront时仍然会抛出错误。

有谁知道如何解决此错误？感谢。

Answer 1

Typescript是类型安全的语言，如果它不是公共的（不通过purejs lib的类型定义公开），它将不允许你修改原型上的属性。在您的情况下，它是一种新方法，在d3.selection（d.ts文件）的原型上不可用。

这就是说，typescripts检查是在转换时间，因为转换文件是没有类型系统的JS。因此找到了您的附加属性，代码按预期工作。

ts的另一个好处是它允许生成转换文件，即使有错误可以绕过故意破坏。

现在让我们让ts编译器高兴不给出这些错误

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

Answer 2

有时类型定义并未完全更新。尝试编辑自己的定义。首先看看d3.select（“＃container”）将返回什么类型。如果类型兼容，请验证是否在该类型上定义了“sendToFront”。

您可以手动将此功能添加到定义文件中。

d3.selection.prototype使用typescript和angular 2抛出错误

2 个答案: