Javascript D3、Vue和Typescript：如何修复“Vue”的常见错误；应为1个参数，但得到0“；及；对象可能是'；空'；

免责声明：我不熟悉打字脚本。请随意链接文档以了解更多信息。我已经单独审查了错误（在d3的上下文之外），但这些解决方案并没有修复它

我有一个混音器：

import Vue from 'vue';
import { Component, Mixin, Mixins } from 'vue-mixin-decorator';
import { Prop } from 'vue-property-decorator';

import CoreMixin from './core';
import * as d3 from 'd3';

@Mixin
export default class BandAxis extends Mixins<CoreMixin>(CoreMixin) {
  // relevant props
  @Prop({}) private sizeTo!: string;
  @Prop({default: () => ( ['one', 'two', 'three'] )}) private labels!: string[];
  // lots of other props props


  // relevant code
  get scale() {
    return d3.scaleBand()
      .domain(this.labels)
      .rangeRound([0, this.width])
      .padding(0.1);
  }

  get axis() {
    return d3.axisBottom()
      .scale(this.scale)
      .ticks(this.labels.length);
  }
  private bbox() {
    const sel = d3.select(`#${this.sizeTo}`);
    if (sel.empty()) {
      return {
        width: 0,
        height: 0,
      };
    } else {
      return sel.node().getBoundingClientRect();
    }
  }
  // more stuff that isn't related
}

以及：

---

有什么想法吗？

第一条消息表明对

d3.axisBottom

的调用缺少参数。它

第二条消息警告您，

sel

可以为

null

。在启用（或

--strict

）的情况下编译时，它被视为错误。要解决此问题，您可以：

• 禁用strictNullCheck（不推荐）
• 添加一个

  null

  -检查

  sel

  ：

  如果（sel）{/*使用sel*/}

• 使用：

  sel！。node（）.getBoundingClientRect（）

 Expected 1 arguments, but got 0.
  get axis() {
>  return d3.axisBottom()

Object is possibly 'null'. 
  |       };
  |     } else {
> |       return sel.node().getBoundingClientRect();
  |              ^
  |     }
  |  }