javascript - D3、Vue 和 typescript : how to fix common errors for "Expected 1 arguments, but got 0" and "Object is possibly ' null'

Question

免责声明:我是 Typescript 的新手。请随意链接文档以阅读更多信息。我已经单独审查了错误(在 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
}

使用它给我:

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

和:

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

有什么想法吗？

Answer 1

第一条消息表明调用了d3.axisBottom缺少一个参数。它expects an AxisScale<Domain> argument .

第二条消息警告您 sel可以是null .使用 --strictNullChecks 编译时，它被视为错误(或 --strict )启用。要解决这个问题，您可以:

• 禁用strictNullCheck (不推荐)
• 添加 null -检查sel : if (sel) { /* use sel */ }
• 使用non-null assertion operator : sel!.node().getBoundingClientRect()