2016-07-26 12 views
4

角度:d3.selection.prototypeは次のようにだから私はtypescriptですとangular2とd3.jsを使用している、と私は)ngOnInit(での選択のprototypeプロパティを拡張しようとしているtypescriptですと、エラーをスローし、2

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

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

これらのエラーがスローされているが、プロトタイプが正常のようなものをやっているので選択にmoveToFrontとmoveToBackプロパティを追加拡張:

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

問題はtypescriptですが、言って、エラーを投げている

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

その要素を前面に移動して移動します。それで動作しますが、プロトタイプを拡張したときやmoveToFrontも呼び出すたびにエラーがスローされています。

このエラーを解決する方法を知っている人はいますか?ありがとう。

答えて

2

Typescriptは型安全な言語であり、プロトタイプが公開されていない場合(purejs libの型定義によって公開されていない場合)、プロパティを変更することはできません。 あなたの場合は、d3.selection(d.tsファイル)のプロトタイプでは利用できない新しい方法です。

タイスクリプトのチェックはタイプシステムを持たないJSであるので、トランスクリル時のみチェックされます。したがって、追加のプロパティが見つかり、コードが期待通りに機能します。

また、tsの美しさは、意図的な破損を回避するエラーがあってもトランスファイルを生成できることです。

は、今度は、時には完全に更新されていない定義を入力し、これらのエラー

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

これは、私がプロトタイプを拡張した場所からエラーを取り除くために働いていましたが、 "moveToFront"を使用してもエラーが発生しています。 d3.select( "#container")。moveToFront()と同じように、エラーはまだスローされています。なぜなのかご存知ですか?しかし、助けてくれてありがとう! –

+0

私は何かを選択したときにmoveToFrontを使用するたびに同じエラーが発生していましたが、それらのエラーはまだスローされています。 –

+0

確かに。再びtsは使用時にメソッドを表示しません。オブジェクトを任意のものとしてキャストし、moveToFrontメソッドを呼び出すことができます。 d3.seletionの定義ファイルを拡張してそこに提供することもできます。それはもっと良いアプローチだろう。 –

0

を与えるないようにTSコンパイラを幸せにしましょう。自分の定義を編集してみてください。まず、d3.select( "#container")が返すタイプを見てください。型に互換性がある場合は、 "sendToFront"がその型で定義されているかどうかを確認します。

この機能を定義ファイルに手動で追加することができます。

関連する問題