Question

我在角度2中使用了图形代码。我在下面的代码时遇到错误。我提到this code.

我的代码是：

var plotDiv = document.getElementById('myDiv');
plotDiv.on('plotly_relayout',
    function(eventdata){
      alert( 'ZOOM!' + '\n\n' +
        'Event data:' + '\n' +
        JSON.stringify(eventdata) + '\n\n' +
        'x-axis start:' + new Date(eventdata['xaxis.range[0]'])+ '\n' +
        'x-axis end:' + new Date(eventdata['xaxis.range[1]']));
      var xVal = new Date(eventdata['xaxis.range[0]']);
      var yVal = new Date(eventdata['xaxis.range[1]']);
    }
  );

我收到了plotDiv.on（'....'）函数的错误。在角度2中是否有.on（）的替代功能？请帮我。我卡在这里。

Answer 1

要防止此错误，您可以写：

var plotDiv: any = document.getElementById('myDiv');
plotDiv.on('plotly_relayout', ...

document.getElementById('myDiv')返回HTMLElement。此类型不包含方法on，因为此方法已添加到plotly-latest.min.js中。因此，为了使打字稿警告静音，您可以明确表示编译不检查plotDiv

的类型

<强> Plunker Example

另一种方法是创建类型定义，如：

interface PlotHTMLElement extends HTMLElement  {
  on(eventName: string, handler: Function): void;
}

var plotDiv  = <PlotHTMLElement>document.getElementById('myDiv')
plotDiv.on('plotly_relayout', function() {

});

Answer 2

我首选的方法是使用字符串文字参数类型为DOM选择器函数声明一个专门的返回类型。然后我们定义特定于这些元素的属性和事件。

这要归功于TypeScript的开放式接口。

// Assuming you using modules as you mention Angular 2
// if this is actually script code and not a module, remove the `declare global` wrapper

declare global {
  interface Document {
    // This only enhances the return type of getElementById for the exact selector "myDiv".
    getElementById("myDiv"): HTMLDivElement & {
      // intersection `&` is used to add the specialized event.
      on('plotly_relayout', (eventdata: {/* fill this in as needed */}) => void);
    };
  }
}

通过此声明，您的原始核心将进行类型检查。没有必要引入类型断言，我们能够保持更具说明性的风格。此外，这也是在我的API级别上div myDiv的期望的文档。

修改

看起来你可能正在使用jQuery，如果是这样，方法是相同的，代码几乎相同。

declare global { interface JQueryStatic { ("#myDiv"): JQuery & { on('plotly_relayout', (eventdata: {/* fill this in as needed */}) => void); }; } }

TS2339：'HTMLElement'类型中不存在属性'on'

2 个答案: